3 Replies Latest reply on Mar 28, 2007 11:03 AM by nbelaevski

    tabPanel: selected tab is lost

    aland

      I am using a tabPanel to organize sets of functions. Each tab will provide a set of functions/links per user role.

      When navigation (clicking a link) within a tab the currently selected tab is lost and the browser will go back to the first tab. The user doesn't want to click again on the tab he/she is working on. The server should remember that state.

      How can I do this?

      Right now I am using request parameters but this not very clean.

      Further Seam and Facelets are used.


      <rich:tabPanel switchType="ajax" id="tabs" selectedTab="#{param.selectedTab}">
      
       <rich:tab label="tabTest" name="testTab" id="testTab">
       Test Tab..
       </rich:tab>
      
       <rich:tab label="tabHome" name="homeTab" id="homeTab">
       <s:link view="persons" value="persons" propagation="none">
       <f:param name="selectedTab" value="homeTab"/>
       </s:link>
       <s:link view="companies" value="companies" propagation="none">
       <f:param name="selectedTab" value="homeTab"/>
       </s:link>
      
       <ui:define name="body"/>
      
       </rich:tab>
      </rich:tabPanel>
      


      In this case both views persons and companies use the above template and define their onwn body content.

      I would like to use some sort of valueChangeListener that informs me when tabs are changed, store the active tab in a managed bean and use that in the selectedTab attribute. But somehow I don't get the valueChangeListener nor a backing bean to work.

        • 1. Re: tabPanel: selected tab is lost
          awheeler

          I have the same problem. I have tabs with dataTables, which when selected edit the item in a nested conversation. When the nested conversation "pops" the tab context is back at the first tab.

          I took a slightly different approach using a backing bean. I tried using the valueChangeListener on the tabPanel but that does not give new or old values of the selected tab. Perhaps the Richfaces guys could look at implementing the listener so that the old value is the previous tab and the new value is the newly selected tab.

          Anyway, I tried a backing bean which looks like:

          @Scope(ScopeType.CONVERSATION)
          @Name("richFacesTabSelection")
          public class RichFacesTabSelection implements IRichFacesTabSelection,Serializable {
           private static final long serialVersionUID = 5709694844281585638L;
           private String selectedTab;
          
           public void tabSelectedActionListener(ActionEvent event) {
           this.setSelectedTab(event.getComponent().getId());
           }
          
           public String getSelectedTab() {
           return selectedTab;
           }
          
           public void setSelectedTab(String selectedTab) {
           this.selectedTab = selectedTab;
           }
          }
          


          The tab looks like:
          <rich:tabPanel switchType="server" selectedTab="#{richFacesTabSelection.selectedTab}">
          <rich:tab id="tab1" label="Testing" actionListener="#{richFacesTabSelection.tabSelectedActionListener}">
          .
          .
          </rich:tabPanel>
          


          Ideally I'd like the backing bean to be at page scope, but it does not retain its state when a nested conversation is popped. You'll probably run into trouble with this bean if there are more than one tabPanels in the same conversation. Perhaps the bean could be modified to put the selectedTab in the request values as per seam's datamodelselection.

          It would be nice if this issue is resolved by the standard richfaces tabpanel.


          • 2. Re: tabPanel: selected tab is lost
            mbolcina

            I am having same problem. I tought that tabPanel remembers its selected tab?

            • 3. Re: tabPanel: selected tab is lost
              nbelaevski

              Hello all!

              I've checked tabPanelDemo application today. Both valueChange listeners work fine: one defined as component attribute, the other defined as nested tag. You can see them at action in the demo application.

              The new value obtained from getNewValue() of ValueChangeEvent corresponds to concrete tab name and can then be set as "currentTab" property of tabPanel to open that concrete tab.