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

    How to implement tabbed navigation

    Some Kid Newbie

      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.

        • 1. Re: How to implement tabbed navigation
          Steve Whatmore Newbie

          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 id="accountGroupsTab" label="#{msgs['account.tab.accountGroups']}">

          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.


          • 2. Re: How to implement tabbed navigation
            Some Kid Newbie

            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 id="search" label="Search">
             <a4j:include viewId="/Search.xhtml" />

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

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

            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?

            • 3. Re: How to implement tabbed navigation
              Some Kid Newbie

              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}"/>

              • 4. Re: How to implement tabbed navigation
                Steve Whatmore Newbie

                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