10 Replies Latest reply on Jan 13, 2008 10:54 PM by sushma wupendram

    modal panel using componentcontrol

    sushma wupendram Newbie

      Unable to use the parameter provided in f:param in componentcontol in modal panel.
      I am able to use it in rich:contextmenu with open and close {} braces. I am unable to use it in rich:modal panel. I would appreciate if some one can help me on how to display the values in modal panel. I am able to display the parameters in modal panel by assigning it to onshow="alert(event.parameters.detailpackagename) but not in textfieldI would like to include my code in here.

      <h:outputLink value="#" id="link" submitMode="ajax">
       #{pkg.packageName}
       <rich:componentControl for="detailpanel" operation="show" event="onclick" >
      <f:param value="#{pkg.packageName}" name="detailpackagename"/>
       <f:param value="#{pkg.packageId}" name="detailpackageid"/>
       <f:param value="#{pkg.description}" name="detaildescription"/>
       <f:param value="#{pkg.packageType}" name="detailpackagetype"/>
       </rich:componentControl>
      </h:outputLink>
      <rich: id="detailpanel" minHeight="300" minWidth="450" height="300" width="500" zindex="2000">
       <f:facet name="header">
       <h:outputText value="Package Details " />
       </f:facet>
       <table width="500px" border="0">
      <tr align="left">
      <td width="20">Package Title: </td>
      <td>
      <h:inputText value="(detailpackagename)"></h:inputText></td>
      </tr>


      Could some body please suggest me how to display these values.

      Appreciate it,


        • 1. Re: modal panel using componentcontrol
          Nick Belaevski Master

          The code seems to be corrupted, could you please update it?

          • 2. Re: modal panel using componentcontrol
            sushma wupendram Newbie

            Sorry, I have included the complete code.

            Thanks
            Sushma

            <h:form style=" height : 465px;">
            <a4j:outputPanel layout="none">
            <rich:dataTable width="100%" id="packageTable"
             rows="#{UI.rowsPerPage}"
             columnClasses="col1,col1,col1,col1"
             value="#{UI.pList}" var="pkg"
             first="#{ContentUI.firstRow}"
             rowKeyVar=" #{UI.firstRow}"
             rowClasses="odd-row,even-row">
            <f:facet name="header">
             <rich:columnGroup>
             <h:column>
             <h:outputText styleClass="headerText" value="Package" />
            </h:column>
            </rich:columnGroup>
            </f:facet>
            
            <h:column>
             <h:outputLink value="#" id="link" >
             #{pkg.packageName}
            <rich:componentControl for="detailpanel" operation="show" event="onclick" >
            <f:param value="#{pkg.packageName}" name="detailpackagename"/>
            <f:param value="#{pkg.packageId}" name="detailpackageid"/>
            <f:param value="#{pkg.description}" name="detaildescription"/>
             <f:param value="#{pkg.packageType}" name="detailpackagetype"/>
            </rich:componentControl>
            </h:outputLink>
            </h:column>
             </rich:dataTable>
            <rich:modalPanel id="detailpanel" minHeight="300" minWidth="450" height="300" width="500" zindex="2000">
            <f:facet name="header">
            <h:outputText value="Package Details " />
            </f:facet>
            <table width="500px" border="0">
            <tr align="left">
            <td width="20">Package Title: title</td>
            <td>
            <h:inputText value="(detailpackagename)"></h:inputText>
            </td>
            </tr>
            <tr align="left">
            <td width="30%">Package Type: pack type</td>
            <td>
            <h:outputText value="#{detailpackagetype}"/>
            </td>
            </tr>
            </table>
            </rich:modalPanel>
            


            • 3. Re: modal panel using componentcontrol
              Sergey Smirnov Master

              You completely miss the meaning of the parameters passed with componentControl. They are used as a parameters passed to the javascript method, in this case - show of the modalpanel dialog API. Those parameters have no relation to the content of the modal panel that is already formed on the server side and just hidden till you call show.
              Even, those parameters somehow, magically, fill the field inside the modal panel, it will does not make sense for JSF. JSF does not work such way.

              • 4. Re: modal panel using componentcontrol
                sushma wupendram Newbie

                First i thought the same way but when i put the same table definition with in the context menu and menu item all these values were displayed in input and output text fields.

                Is there any alternate way , to display this modal window with values.
                I tried to use output link with "action" calling a backing bean method to assign values and then in "on complete" calling javascript to display values in modal panel but it is calling oncomplete before action event.
                I ran out of ideas, I would appreciate if you can suggest me some solution to this issue.

                Thanks
                Sushma

                • 6. Re: modal panel using componentcontrol
                  sushma wupendram Newbie

                  Hi Mike ,

                  I tried the solution you have suggested but I got an exception because it is trying to populate the values in modal panel before calling action method. Infact it is not even calling the action method. I get this exception on the page.
                  type Exception report

                  message

                  description The server encountered an internal error () that prevented it from fulfilling this request.

                  exception

                  javax.servlet.ServletException: /pages/content.xhtml @140,57 value="#{ContentUI.detailedPackage.packageName}": Target Unreachable, 'detailedPackage' returned null
                  javax.faces.webapp.FacesServlet.service(FacesServlet.java:256)
                  org.ajax4jsf.webapp.BaseXMLFilter.doXmlFilter(BaseXMLFilter.java:141)
                  org.ajax4jsf.webapp.BaseFilter.doFilter(BaseFilter.java:281)
                  org.jboss.web.tomcat.filters.ReplyHeaderFilter.doFilter(ReplyHeaderFilter.java:96)


                  root cause

                  javax.el.PropertyNotFoundException: /pages/content.xhtml @140,57 value="#{ContentUI.detailedPackage.packageName}": Target Unreachable, 'detailedPackage' returned null
                  com.sun.facelets.el.TagValueExpression.getType(TagValueExpression.java:62)
                  com.sun.faces.renderkit.html_basic.HtmlBasicInputRenderer.getConvertedValue(HtmlBasicInputRenderer.java:81)
                  javax.faces.component.UIInput.getConvertedValue(UIInput.java:934)
                  javax.faces.component.UIInput.validate(UIInput.java:860)
                  javax.faces.component.UIInput.executeValidate(UIInput.java:1065)
                  javax.faces.component.UIInput.processValidators(UIInput.java:666)
                  javax.faces.component.UIForm.processValidators(UIForm.java:229)
                  javax.faces.component.UIComponentBase.processValidators(UIComponentBase.java:1033)
                  javax.faces.component.UIInput.processValidators(UIInput.java:664)
                  javax.faces.component.UIComponentBase.processValidators(UIComponentBase.java:1033)
                  javax.faces.component.UIForm.processValidators(UIForm.java:229)
                  javax.faces.component.UIComponentBase.processValidators(UIComponentBase.java:1033)
                  javax.faces.component.UIViewRoot.processValidators(UIViewRoot.java:662)
                  org.ajax4jsf.component.AjaxViewRoot.access$201(AjaxViewRoot.java:57)
                  org.ajax4jsf.component.AjaxViewRoot$3.invokeRoot(AjaxViewRoot.java:319)
                  org.ajax4jsf.context.JsfOneOneInvoker.invokeOnRegionOrRoot(JsfOneOneInvoker.java:56)
                  org.ajax4jsf.context.AjaxContextImpl.invokeOnRegionOrRoot(AjaxContextImpl.java:170)
                  org.ajax4jsf.component.AjaxViewRoot.processValidators(AjaxViewRoot.java:333)
                  com.sun.faces.lifecycle.ProcessValidationsPhase.execute(ProcessValidationsPhase.java:100)
                  com.sun.faces.lifecycle.LifecycleImpl.phase(LifecycleImpl.java:251)
                  com.sun.faces.lifecycle.LifecycleImpl.execute(LifecycleImpl.java:117)
                  javax.faces.webapp.FacesServlet.service(FacesServlet.java:244)
                  org.ajax4jsf.webapp.BaseXMLFilter.doXmlFilter(BaseXMLFilter.java:141)
                  org.ajax4jsf.webapp.BaseFilter.doFilter(BaseFilter.java:281)
                  org.jboss.web.tomcat.filters.ReplyHeaderFilter.doFilter(ReplyHeaderFilter.java:96)


                  note The full stack trace of the root cause is available in the JBossWeb/2.0.0.GA_CP01 logs


                  Thanks
                  --
                  Sushma

                  • 7. Re: modal panel using componentcontrol
                    Mikael Andersson Master

                    Hi

                    If you look in the cookbook example you can see that the content of the modal panel is wrapped inside a a4j:outputPanel with a rendered attribute. That makes sure that the content in the modal panel is only rendered if an object to display details from has been selected.

                    What I think is happening in your case is that the details object is null, but the content of the modal panel tries to access the properties of this null object.

                    You should do the same to your modal panel, and reRender that wrapped content when you select the object which details is to be displayed.

                    Hope this helps,
                    Mike

                    • 8. Re: modal panel using componentcontrol
                      sushma wupendram Newbie

                      Mike,

                      I thought if i can send you the code you probably might understand how i am implementing. I have defined outputPanel in the modal panel like you have mentioned. But for some reason modal panel is trying to access a object which gets assigned when action is performed on the output link button.

                      <a4j:commandLink value="#{pkg.packageName}"
                      action="#{ContentUI.getSelectedPackageDetails}"
                      reRender="modalContent"
                      oncomplete="Richfaces.showModalPan('detailpanel'{width:450,top:200})">
                      <a4j:actionparam value="#{pkg.packageId}" assignTo="{ContentUI.selectedPkgId}"/>
                      </a4j:commandLink>
                      <rich:modalPanel id="detailpanel" minHeight="300" minWidth="450" height="300" width="500" zindex="2000">
                      <a4j:outputPanel id="modalContent" layout="inline">
                      <f:facet name="header">
                      <h:outputText value="Package Details {detailpackagename}" />
                      </f:facet>


                      Package Title:  

                      <h:inputText value="{ContentUI.detailedPackage.packageName}">
                      </h:inputText>



                      Package Type:  

                      <h:outputText value="#{ContentUI.detailedPackage.packageType}"/>




                      </a4j:outputPanel>
                      </rich:modalPanel>

                      • 9. Re: modal panel using componentcontrol
                        Mikael Andersson Master

                        Hi

                        I have never tried to wrap a facet in a output panel, that might not work, you may have to have a separate panels, an extra one to wrap the content of the header.

                        The problem is most likely that you don't have a "rendered" attribute on the wrapping outputPanel, that means that it will always try to render the content. But we only want the content of the modal panel to be rendered when there is a "detailsObject" selected (not null on the backing bean).

                        Try something like this on the wrapping outputPanel:
                        rendered="#{not empty ContentUI.detailedPackage}"

                        Cheers

                        • 10. Re: modal panel using componentcontrol
                          sushma wupendram Newbie

                          Thanks mike, It worked. Panel was not rendering so i had to set output panel type value to none.

                          --
                          Sushma