0 Replies Latest reply: May 1, 2012 5:17 AM by hantsy bai RSS

Any suggestion about creating reusable modelPanel?

hantsy bai Master

Hi all,

I have tried to create an composition componnet for a selector, like the FileSelector in your system..

 

1. This is a Company selector, when user click a button or link in a view page, a modelPane will be poped up to the front end.

2. User can search the company by keyword, and select one company and preview the company in the modelPanel.

3. When user confirm select the company, close the modelPanel, and need some callback way to the selected Company.

 

There are some codes I have tried to implement this purpose.

I created a session scoped CompanyDialogManager to handle the action in the modelPanel.

 

 

@SessionScoped
@Named("companyDialogManager")
public class CompanyDialogManager implements Serializable {

    /**
     * 
     */
    private static final long serialVersionUID = 2029508652995968760L;

    private static final Logger log = LoggerFactory
            .getLogger(CompanyDialogManager.class);

    private String keyword;

    private Company previewCompany;
    
    @Inject
    private EntityManager em;
    
    public String getKeyword() {
        return keyword;
    }

    public void setKeyword(String keyword) {
        this.keyword = keyword;
    }

    public Company getPreviewCompany() {
        return previewCompany;
    }

    public void setPreviewCompany(Company previewCompany) {
        this.previewCompany = previewCompany;
    }

    public void init(ComponentSystemEvent event) {
        if (log.isDebugEnabled()) {
            log.debug("call init@");
        }
        this.keyword = "";
    }

    public List<Company> getCompaniesByKeyword() {
        if (log.isDebugEnabled()) {
            log.debug("call getCompaniesByKeyword@");
        }
        
        if (this.keyword == null || this.keyword.trim().length() == 0) {
            return Collections.<Company> emptyList();
        }
        
        return (List<Company>) em
                .createQuery(
                        "select distinct a from Company a left join a.types t where t.name='Agents' and a.name like :name order by a.name")
                .setParameter("name", "%" + this.keyword + "%")
                .setMaxResults(100).getResultList();

        
    }

 

 

and created a composition component for the modelPanel(still some problem in the  cdes).

 

 

<composite:interface>
    <composite:attribute name="action" targets="#{cc.clientId}:form:saveButton"/>
    <composite:attribute name="render" />
</composite:interface>

<!-- IMPLEMENTATION -->
<composite:implementation>
    <rich:popupPanel id="#{cc.clientId}Dialog" header="Position"
        width="800" modal="true" domElementAttachment="parent" closable="true"
        autosized="true">
        <f:event type="preRenderComponent"
            listener="#{companyDialogManager.init()}" />
        <h:form id="form">
            <h:panelGrid id="#{cc.clientId}Grid" columns="2" width="100%"
                columnClasses="col2, col2">
                <cui:fieldset legend="Filter by keyword">
                    <h:inputText value="#{companyDialogManager.keyword}"
                        style="width:250px">
                        <a4j:ajax event="change" execute="@this" render="companyResults" />
                    </h:inputText>
                    <h:panelGroup id="companyResults" layout="block"
                        style="width:250px; height:200px; y-overflow:auto">
                        <rich:list value="#{companyDialogManager.companiessByKeyword}"
                            var="_subCompany">
                            <a4j:commandLink value="#{_subCompany.name}"
                                action="#{companyDialogManager.setPreviewCompany(_subCompany)}"
                                render="previewCompanyPanel" />
                        </rich:list>
                    </h:panelGroup>
                </cui:fieldset>
                <h:panelGroup id="previewCompanyPanel">
                    <ui:fragment
                        rendered="#{companyDialogManager.previewCompany ne null}">
                        <p:output label="#{messages['Company.name']}"
                            value="#{companyDialogManager.previewCompany.name}" />

                        <p:output label="#{messages['Company.Phone1']}"
                            value="#{companyDialogManager.previewCompany.phone}" />
                        <p:output label="#{messages['Company.Phone2']}"
                            value="#{companyDialogManager.previewCompany.phone2}" />
                        <p:output label="#{messages['Company.Fax1']}"
                            value="#{companyDialogManager.previewCompany.fax}" />
                        <p:output label="#{messages['Company.Telex1']}"
                            value="#{companyDialogManager.previewCompany.telex1}" />

                        <p:output label="#{messages['Company.Port']}"
                            value="#{companyDialogManager.previewCompany.port.name}" />

                        <p:output label="#{messages['Company.Email']}"
                            value="#{companyDialogManager.previewCompany.email}" />
                        <p:output label="#{messages['Company.Address']}" verbatim="true">
                            <m:outputAddress
                                address="#{companyDialogManager.previewCompany.shippingAddress}"
                                compact="true" />
                        </p:output>
                    </ui:fragment>
                </h:panelGroup>
                <f:facet name="footer">
                    <h:panelGroup layout="block" styleClass="buttonBox">
                        <a4j:commandButton id="saveButton"
                            value="#{messages['Buttons.Select']}" action="#{cc.attrs.action}"
                            execute="@form" render="#{cc.clientId}Dialog #{cc.attrs.render}"
                            oncomplete="if(!#{facesContext.validationFailed}){#{rich:component('#{cc.clientId}Dialog')}.hide();}"
                            type="submit" />
                            #{' or  '}
                            <h:outputLink
                            value="javascript:#{rich:component('#{cc.clientId}Dialog')}.hide();">#{messages['Buttons.Cancel']}</h:outputLink>
                    </h:panelGroup>
                </f:facet>
            </h:panelGrid>
        </h:form>
    </rich:popupPanel>
</composite:implementation>

 

 

Some question about this purpose...

1. I used a  standalone a rich:popupPanel and form to the popup panel,  I must user another link to trigger the popup windows, is there any way to merge the trigger link and rich:popupPanel together?

 

2. If a page, I have more one companies which will use the selector to choose company, how to use one popupPanel for all cases?

 

3. saveButton button action must accept a method expression, and need a method signature, but I want to pass different method expressions to the action, for example, agent 1, I will set action "#{somebean.setAgent(companyDialogManger.previewComany)}", agent2, I will set action "#{somebean.setAgent2(companyDialogManger.previewComany)}", how to do this?

 

Any help here? Thanks.