14 Replies Latest reply: Jun 25, 2012 1:32 PM by Steve Stair RSS

rich:tabPanel

Joao Mello Newbie

Please someone I need help.
I have a tabPanel with 4 tabs. When I go to the server to collect some information, I need tabPanel to remember my current selected tab.


Thanks,

Mello

  • 1. Re: rich:tabPanel
    Abdulla Abdurakhmanov Newbie

    Hi!
    I implement this feature with using the action in rich:tab and selectedTab in the tabpanel.

    <rich:tab label="MyName" id="MyName" action="#{MySessionBean.activateSecuritySettingsTab}" >

    And using after:
    <rich:tabPanel id="tblPnl" selectedTab="#{MySessionBean.activeTabName}">

    I think you might to create MySessionBean correctly ;-)

  • 2. Re: rich:tabPanel
    Joao Mello Newbie

    Thanks. I end up finding the solution.

  • 3. Re: rich:tabPanel
    Andrei Keybo Newbie

    I got similar problem
    akira, could you specify more detailed your MySessionBean.
    I just try

    public void activateSecuritySettingsTab(ValueChangeEvent event) {
    activeTabName=event.getNewValue().toString();
    }

    but it not working

  • 4. Re: rich:tabPanel
    Abdulla Abdurakhmanov Newbie

    Hi!

    I don't find any solution then:

    class MySessionBean {
    private String activeTab;

    ...
    public String activateMyTab2() {
    activeTab = "MyTab2";
    return null;
    }
    ...

    public String getActiveTab() {
    return activeTab;
    }
    }


    You can also trying to store in session a TabPanel binding...
    I think This is must be working too.

  • 5. Re: rich:tabPanel
    Andrei Keybo Newbie

    Hi
    Thanx for fast replay
    I put switchType="server" into <rich:tab>

    <rich:tabPanel id="tblPnl" switchType="client" value="#{Bb.currentTab}">
    <rich:tab id="uploader" name="uploader" label="Upload" switchType="server">
    <ui:include src="/WEB-INF/includes/uploader.xhtml"/>
    </rich:tab>

    <rich:tab id="manager" name="manager" label="Manage" switchType="server">
    <ui:include src="/WEB-INF/includes/manager.xhtml"/>
    </rich:tab>
    </rich:tabPanel>


    looks like it works too

  • 6. Re: rich:tabPanel
    Abdulla Abdurakhmanov Newbie

    No problem.
    I'm glad that this problem has many solutions ;-)
    Thanks!

  • 7. Re: rich:tabPanel
    Andrei Keybo Newbie

    Hi again
    My System architect almost kill me after he review my previus solution. It really works slow and swichType on tab has higher priority under swichType on tabPanel. So I put swichType="ajax". Like:

    <rich:tabPanel id="tblPnl" switchType="ajax" value="#{Bb.currentTab}">
    <rich:tab id="uploader" name="uploader" label="Upload">
    <ui:include src="/WEB-INF/includes/uploader.xhtml"/>
    </rich:tab>

    <rich:tab id="manager" name="manager" label="Manage">
    <ui:include src="/WEB-INF/includes/manager.xhtml"/>
    </rich:tab>
    </rich:tabPanel>


    very sadly but cant find solvation with swichType="client". Is it really possible in principal

  • 8. Re: rich:tabPanel
    Tamara Bealer Newbie

    Has any else looked into changing the selectedTab attributed client side without making a request to backing bean?

  • 9. Re: rich:tabPanel
    Paula Newbie

    I am trying to implement this, and I keep getting a error..

    javax.faces.el.PropertyNotFoundException: /editprofile.xhtml @17,91 selectedTab="#{userHome.tabValue}": Bean: UserHome_$$_javassist_10, property: tabValue


    What do I need to put in the bean?

    Thanks

  • 10. Re: rich:tabPanel
    Luis Tama Newbie

    Hi everyone!

     

    I know this is a very old question, but I want to share the solution I came up with... IMHO, the offered ones are not good enough, considering that I was redirected here by the RichFaces FAQ...

     

    In my app I needed to save the currently selected tab in the DB (not only the current session), so on the next login the last selected tab would be displayed. In fact, I wanted to save it in a task instance variable, as I'm using Seam + jBPM, but any persistence method should work.

     

    Also, I needed my rich:tabPanel to be switched completely on client-side.

     

    So, for this to work, we need the following:

    • RichFaces 3.3.3.Final (I didn't chetk if this works on earlier versions, but I guess it should).
    • A rich:tabPanel with the tabs named by id (e.g. "tab1", "tab2" and "tab3", etc.).
    • A backing bean (e.g. named "myBean"), with a property (with getter and setter) related to the selected tab name (e.g. selectedTabName).
    • An a4j:jsFunction that will do the update on the backing bean property.
    • The rich:tabPanel must have its selectedTab attribute associated to the backing bean property.
    • Also, the rich:tabPanel must call the a4j:jsFunction by its function name on the ontabchange event, sending the recently updated enteredTabName attribute in the event object (to learn more, see the function RichFaces.onTabChange inside your RichFaces UI jar file: richfaces-ui-3.3.3.Final.jar/org/richfaces/renderkit/html/scripts/tabPanel.js).

     

    Please note:

    • We don't need any server-side event listeners - that's the part I didn't like in the older posts, the motivation to figure out this...
    • This works with any tab switching method (server, ajax or client).
    • The (possible) downside is that on every tab change, the backing bean property will be updated via AJAX. But anyway, when else would you update it?

     

    Finally, here's the code!

     

    The property in the backing bean:

     

    ...
    // You don't need the @In and @Out lines if not using Seam + jBPM
    // I use them because that's how I save the selected tab
    // in my task instance for later use
    @In(required = false)
    @Out(scope = ScopeType.BUSINESS_PROCESS, required = false)
    private String selectedTabName;
     
    public String getSelectedTabName() {
      // you could check if it's the first time the page is rendered,
      // maybe with something like:
      // if (this.selectedTabName == null)
      //   this.selectedTabName = "tab1";
      // or you could check it in your bean creation method
      return this.selectedTabName;
    }
     
     
    public void setSelectedTabName(String selectedTabName) {
      this.selectedTabName = selectedTabName;
      // here you could add your DB update code for the selectedTabName
      // or maybe somewhere else.
      // Seam + jBPM saves the variable in the task instance for me
      // automatically on conversation end via outjection :)
    }
    ...
    
    

     

    The a4j:jsFunction and the rich:tabPanel on your page (note how the function is called):

     

    <a4j:jsFunction id="tabChangeFn" name="tabChangeFn">
      <a4j:actionparam name="name"
          value="name"
          assignTo="#{myBean.currentTabName}"
          noEscape="true" />
    </a4j:jsFunction>
    
    <rich:tabPanel switchType="client"
        selectedTab="#{myBean.currentTabName}"
        ontabchange="tabChangeFn(event.enteredTabName)">
    <rich:tab id="tab1">
    ...
    </rich:tab>
    <rich:tab id="tab2">
    ...
    </rich:tab>
    <rich:tab id="tab3">
    ...
    </rich:tab>
    </rich:tabPanel>
    

     

     

    Please tell if this works for you, or if you have any suggestions.

     

    God bless you.

     

    Luis Tama

  • 11. Re: rich:tabPanel
    Ilya Shaikovsky Master

    Thanks for detailed post! Thats would be greate if you will be able to use wiki posts for such cool design solutions contributions in future. [RichFaces Knowledgebase]  It will helps community newcomers much in future! 

     

    B.t.w. you talking that should works with any modes. But I believe that additional JS function really need in client mode only. In other mode - you will have request from tabPanel itself and could store information just in change listener. And even more - I'm concerned with the fact that such usage - will cause concurrent requests in ajax or server mode(request fro tabpanel and in the same time request from jsFunction)

  • 12. Re: rich:tabPanel
    Luis Tama Newbie

    Thanks for your reply, Ilya...

     

    I'm sure you're right when talking about server-side tab switching - tab name could be remembered in that single server request, maybe with some action event listener? What I was pointing out was that my code worked with the 3 modes without changes. I used that solution because I my tabPanel switches tabs client-side...

     

    But... hehe... In fact, I'm already facing some problems with concurrent AJAX requests (on every tab change). I'm solving it with a global a4j:queue, as explained in the examples.

    Another solution would be to bind one single call to my a4j:jsFunction on the unload event of the window, but I haven't checked deeply what JS method I should call from tabPanel.js and how. It seems that the page does always wait for these onunload listeners, as stated by jQuery, at least if not closing the browser window, but I haven't tested. I first wanted to try to make it work with pure RichFaces...

     

    And yes, I would really like to contribute to that KB. I must you tell you that I have some JS client-side tricks (added methods and properties, etc.) for some of RichFaces components, because sometimes they can't do what I need them to out-of-the-box...

    So... What do you mean by wiki posts? Would it be useful if I change my last post to wiki format or should I create an article or blog post? When posting to the forums, should I always use wiki markup?

     

    Best regards,

    Luis Tama

  • 13. Re: rich:tabPanel
    Ilya Shaikovsky Master

    for clien mode - your solution seems most good one. And for server side - yes I prefer to remove jsFunction and store selectedTab from valueChangeListener of tabPanel.

     

    Asfor contribution - yes, just create new article in RichFaces space, then after published - copy it's permanent link and paste it into main page I shown you by editing it. I'm monitoring all the wiki changes and will be glad to review any contributions.

  • 14. Re: rich:tabPanel
    Steve Stair Newbie

    How is this any different than just using switchType="ajax"?

     

    <rich:tabPanel switchType="ajax"
        selectedTab="#{myBean.currentTabName}">

    <rich:tab id="tab1">

    .

    .

    .

    </rich:tabPanel>