8 Replies Latest reply on Mar 19, 2008 12:06 PM by mars1412

    rich:tab with ui:include ?

    Eric Jung Newbie

      Hi,

      I have a very simple seam/facelets/richfaces app. I cannot get rich:tab to work with ui:include in my template.xhtml:

      <h:form id="f1">
       <rich:tabPanel>
       <rich:tab label="tab 1">
       <ui:insert name="tab1"/>
       </rich:tab>
       <rich:tab label="tab2">
       <ui:include src="tab2.xhtml"/>
       </rich:tab>
       </rich:tabPanel>
       </h:form>


      tab1 renders correctly, but tab2 does not. Is this expected? What am I doing wrong?

      thank you in advance.

        • 1. Re: rich:tab with ui:include ?
          Sergey Smirnov Master

          What do you mean by "renders correctly" ? What it is rendered now?

          • 2. Re: rich:tab with ui:include ?
            Eric Jung Newbie

            Hi Sergey, thanks for the reply. What I mean by "rendered correctly" is that the content of tab1 displays just fine, but tab2 does not. Here is more detail.

            tab1.xhtml:

            <ui:composition ... template="template.xhtml">
            <ui:define name="tab1">
             <h:outputText value="Search criteria: "/>
             <h:inputText id="searchString" value="#{userSearch.searchString}"/>
             <rich:suggestionbox id="suggestionBox" for="searchString"
             suggestionAction="#{userSearch.findUsers}" var="user"
             fetchValue="#{user.name}" ... >
             <h:column>
             <h:outputText value="#{user.name}"/>
             </h:column>
             </rich:suggestionbox>
            
             <h:commandButton action="#{userSearch.search}" value="Search"/>
            
             <h:dataTable value="#{users}" var="user" rendered="#{users.rowCount>0}">
             <h:column>
             <f:facet name="header">User ID</f:facet>
             #{user.id}
             </h:column>
             <h:column>
             <f:facet name="header">#{user.name}</f:facet>
             #{user.name}
             </h:column>
             </h:dataTable>
            </ui:define>
            </ui:composition>
            </ui:composition>


            tab2.xhtml:

            <ui:composition ... template="template.xhtml">
             <h:outputText value="Hello from tab2"/>
            </ui:composition>
            


            template.xhtml:
            <html><body>
            <h:form id="f1">
             <rich:tabPanel>
             <rich:tab label="Tab 1">
             <ui:insert name="tab1"/>
             </rich:tab>
             <rich:tab label="Tab 2">
             <ui:include src="tab2.xhtml"/>
             </rich:tab>
             </rich:tabPanel>
            </h:form></body></html>

            It does not matter if I change switchType of rich:tabPanel to client, server, or ajax... content of tab2 is empty

            Screenshot:

            http://img86.imageshack.us/img86/1724/capture221200825248pm22ap5.png

            • 3. Re: rich:tab with ui:include ?
              mars1412 Apprentice

              looks like your template.xhtml only renders things defined by

              <ui:define name="tab1">

              like you do it in the first tab
              post the code of your template.xhtml

              also:
              maybe you should use one form for each tab:
              <h:form id="f1">
               <rich:tabPanel>
               <rich:tab label="tab 1">
               <h:form>
               <ui:insert name="tab1"/>
               </h:form>
               </rich:tab>
               <rich:tab label="tab2">
               <h:form>
               <ui:include src="tab2.xhtml"/>
               </h:form>
               </rich:tab>
               </rich:tabPanel>
              


              and read about the switch type

              • 4. Re: rich:tab with ui:include ?
                Sergey Smirnov Master

                 

                "mars1412" wrote:

                maybe you should use one form for each tab:


                Bad idea. Nested forms are not allowed in JSF

                • 5. Re: rich:tab with ui:include ?
                  Sergey Smirnov Master

                   

                  "grimholtz" wrote:
                  Hi Sergey, thanks for the reply. What I mean by "rendered correctly" is that the content of tab1 displays just fine, but tab2 does not. Here is more detail.


                  Are you sure, that the path to include src is correct? What if you put this include outside of tab panel just for testing purpose?

                  • 6. Re: rich:tab with ui:include ?
                    mars1412 Apprentice

                    sorry - was a pasting mistake:

                    <h:form id="f1">


                    remove this - then the forms are not nested and it should work as expected

                    if you have only one form around the complete tabPanel, switching from one tab to the other will submit all your data which is sometimes not what you want.



                    • 7. Re: rich:tab with ui:include ?
                      Eric Jung Newbie

                       

                      "mars1412" wrote:
                      if you have only one form around the complete tabPanel, switching from one tab to the other will submit all your data which is sometimes not what you want.


                      The http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone/docs/devguide/en/html_single/index.html#d0e36800 says:

                      Note:
                      All tabPanels should be wrapped into a form element so as content is correctly submitted inside. If a form is placed into each tab, the Action elements of Tab controls appear to be out of the form and content submission inside the panels could be performed only for Action components inside tabs.


                      Indeed, placing forms around each tab makes the tabs render vertically.

                      Anyway, I was able to solve the problem by making the template ui:include both .xhtml pages instead of ui:inserting one and ui:including the other. The user then navigates to the template page (now named tabpanel.xhtml) instead of tab1.xhtml.



                      • 8. Re: rich:tab with ui:include ?
                        mars1412 Apprentice

                         

                        If a form is placed into each tab, the Action elements of Tab controls appear to be out of the form and content submission inside the panels could be performed only for Action components inside tabs.


                        yipp, what I said before.

                        so when you now switch from tab1 to tab2 the form including all the data of your input fileds is submitted, isn't it?

                        Indeed, placing forms around each tab makes the tabs render vertically.


                        around or inside each tab?

                        which browser?