2 Replies Latest reply on Feb 14, 2008 1:14 AM by fstof

    RichFaces Tabs as a template

    fstof
    fstof Feb 13, 2008 8:43 AM

      Hey all
      Im using Facelets for templating and RichFaces.

      Now I'm having a problem with creating a facelet template to be used on all my pages.

      These are the pages that I have

      /template.xhtml
      /userlist.xhtml
      /myprofile.xhtml

      now in template.xhtml I have the following

      <html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:c="http://java.sun.com/jstl/core"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:rich="http://richfaces.org/rich">

<head>...</head>
<body>
...
 <rich:tabPanel id="topTabs" switchType="server" selectedTab="#{loggedOnDetails.currentTab}">
 <rich:tab id="tab1" label="My Profile" action="#{some.action}">
 <rich:panel>
 <f:facet name="header">
 <ui:insert name="pageHeader">Page Header</ui:insert>
 </f:facet>
 <ui:insert name="bodyPart">Body content</ui:insert>
 </rich:panel>
 </rich:tab>

 <rich:tab id="tab2" label="User List" action="#{some.action}">
 <rich:panel>
 <f:facet name="header">
 <ui:insert name="pageHeader">Page Header</ui:insert>
 </f:facet>
 <ui:insert name="bodyPart">Body content</ui:insert>
 </rich:panel>
 </rich:tab>
 </rich:tabPanel>
...
</body>
</html>

      and in the other 2 pages is the following 

      <ui:composition xmlns="http://www.w3.org/1999/xhtml"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:rich="http://richfaces.org/rich"
 template="/template.xhtml">

 <ui:define name="header">
 <h:outputText value="User List"/>
 </ui:define>

 <ui:define name="bodyPart">
 <h:outputText value="Here is my list"/>
 <h:inputText value="myValue" id="user"/>
 </ui:define>

</ui:composition>


      both /userlist.xhtml and /myprofile.xhtml use the /template

      Now when either page is loaded and calls the template the "bodyPart" is duplicated on both tabs resulting in a "duplicate id" error

      Is there any way around this?

      • 1617 Views
      • Tags:
        • 1. Re: RichFaces Tabs as a template
          h0ppy Feb 13, 2008 9:35 AM (in response to fstof)

          I don't think you can do it like that as you'll will navigate to either one page or the other (userlist.faces or myprofile.faces) and the one knows nothing about the other. You could use ui:include to include these two files into the correct place though:

          ...
<rich:tabPanel id="topTabs" switchType="server" selectedTab="#{loggedOnDetails.currentTab}">
 <rich:tab id="tab1" label="My Profile" action="#{some.action}">
 <ui:include src="myprofile.xhtml"/>
 </rich:tab>

 <rich:tab id="tab2" label="User List" action="#{some.action}">
 <ui:include src="userlist.xhtml"/>
 </rich:tab>
 </rich:tabPanel>
...


          You'd have to include the <rich:panel><f:facet name="header"> etc in the other files in this case, but that's no biggy.



            • Actions
          • 2. Re: RichFaces Tabs as a template
            fstof
            fstof Feb 14, 2008 1:14 AM (in response to fstof)

             

            I don't think you can do it like that as you'll will navigate to either one page or the other (userlist.faces or myprofile.faces) and the one knows nothing about the other. You could use ui:include to include these two files into the correct place though:



            Thanks... I'll give it a try... but I'm worried that when the page (with the tabPanel) loads that both userlist.xhtml and myprofile.xhtml will get processed.. ie... the work to be done on each one of the pages (serverside) is quite significant, and If I want to view only the myprofile page/tab I dont want the userlist work to be done...

            as you may have noted I'm quite new to RichFaces... so please explain what would happen in this case...

            Thanks

            By the way...
            Heres what I did with mine to get It working...
            I changed the name attribute of ui:insert on each tab and then only the page that has te be displays uses ui:define for the specific name... It works but I dont know if it is technically correct 

            <rich:tabPanel id="topTabs" switchType="server" selectedTab="#{loggedOnDetails.currentTab}">
 <rich:tab id="tab1" label="My Profile" action="#{some.action}">
 <rich:panel>
 <f:facet name="header">
 <ui:insert name="pageHeader">Page Header</ui:insert>
 </f:facet>
 <ui:insert name="myProfileBody">Body content</ui:insert>
 </rich:panel>
 </rich:tab>

 <rich:tab id="tab2" label="User List" action="#{some.action}">
 <rich:panel>
 <f:facet name="header">
 <ui:insert name="pageHeader">Page Header</ui:insert>
 </f:facet>
 <ui:insert name="userListBody">Body content</ui:insert>
 </rich:panel>
 </rich:tab>
 </rich:tabPanel>


            <ui:composition xmlns="http://www.w3.org/1999/xhtml"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:rich="http://richfaces.org/rich"
 template="/template.xhtml">

 <ui:define name="header">
 <h:outputText value="User List"/>
 </ui:define>

 <ui:define name="userListBody>
 <h:outputText value="Here is my list"/>
 <h:inputText value="myValue" id="user"/>
 </ui:define>

</ui:composition>



              • Actions