4 Replies Latest reply on Jun 15, 2009 12:02 PM by swhatmore

    How to implement tabbed navigation

    sam-user
    sam-user Jun 15, 2009 11:12 AM

      Hello,
      I just started with richfaces and I have a problem related to page navigation.
      I have a tab panel where each tab points to a different page. I would like to be able to navigate from one page of (say) tab1 to another page in tab2. For example if I have the seam-gen generated application with xxxList.xhtml and xxxEdit.xhtml pages, and I put them in two separate tabs - tab1 and tab2 respectively, I would like when clicking on a link in tab1 to be re-directed to tab2 where xxxEdit.xhtml will be populated witth some specific details - pretty much like the seam-gen generated application, but the pages to be opened in something like a "tab container" in a manner intelligent enough be able to change the selected tab.
      I tried using a4j:include but I have problem passing page parameters. The selected tab also doesn't change.
      Could someone advise me what's the best approach for this problem? Are there any examples I could look at?
      Thank you.

      • 2237 Views
      • Tags:
        • 1. Re: How to implement tabbed navigation
          swhatmore Jun 15, 2009 11:29 AM (in response to sam-user)

          We have done exactly this and it can be accomplished via the following:

          <rich:tabPanel id="accountTabs" selectedTab="#{accountAction.selectedTab}" switchType="ajax" activeTabClass="rich-tab-active-secondary" contentClass="rich-tab-content-secondary" styleClass="rich-tab-panel-secondary">
 <rich:tab id="accountDetailsTab" label="#{msgs['account.tab.accounts']}">
...
 </rich:tab>
 <rich:tab id="accountGroupsTab" label="#{msgs['account.tab.accountGroups']}">
...
 </rich:tab>
</rich:tabPanel>


          when you want to show a different tab, you set the attribute in the backing bean to be the name of the other tab (say "accountGroupsTab") and rerender the tabPanel ("accountTabs").

          Complete details left out but you should get the idea.

          Whatty

            • Actions
          • 2. Re: How to implement tabbed navigation
            sam-user
            sam-user Jun 15, 2009 11:47 AM (in response to sam-user)

            Thanks Whatty.
            I though about changing the tab by using a variable. My bigger problem, though, is passing the page parameter - don't seem to be able to do it.
            I've got a home.xhtml page that has this:

            <rich:tabPanel id="allTabs" selectedTab="Details" >
 <rich:tab id="detailsTab" label="Details">
 <a4j:include viewId="/Details.xhtml" />
 </rich:tab>
 <rich:tab id="search" label="Search">
 <a4j:include viewId="/Search.xhtml" />
 </rich:tab>
</rich:tabPanel>


            Then in my Search.xhtml I have the following link: 

            <h:form>
<a4j:commandLink action="edit" value="Edit" immediate="true" >
 <a4j:actionparam name="detailId" assignTo="detail.detailId" id="detailDetailId"/>
</a4j:commandLink>
</h:form>



            detailDetailId is the page parameter of Detail.xhtml that tells it which details to populate. The problem is that I can't set that parameter. Is that the correct way of doing this?
            Thanks.

              • Actions
            • 3. Re: How to implement tabbed navigation
              sam-user
              sam-user Jun 15, 2009 11:56 AM (in response to sam-user)

              Ooops, the action param element from the second snippet should read like this:

              <a4j:actionparam name="detailDetailId" assignTo="#{detailDetailId}" id="detailDetailId" noEscape="false" value="#{_detail.detailId}"/>



                • Actions
              • 4. Re: How to implement tabbed navigation
                swhatmore Jun 15, 2009 12:02 PM (in response to sam-user)

                I am not if this fits within your overall architectural strategy but if you use a session based bean you can store the object in the bean and reference it directly from both tabs using something along the lines of "_detail.object"

                Then there is no need to pass the ID between pages.

                We however are not using SEAM so things may be slightly different in your world

                  • Actions