Hobione's Weblog

Living & Breathing in Web 2.0 Era

RichFaces Tabs: switch dynamically

On my application I have bunch of tabs and each tabs has different functionalities. Here is a screen shots.
Tabs

I wanted to click a year from the List tab and do couple things.
1. Pass the project id so JPA do it’s thing
2. Display project details under Detail tab

Step 1: I have set up a tabHome.xhtml where I organize my tabs like a template.


<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="/body/facelets/template.xhtml">   

    <ui:define name="body">
        <rich:tabPanel id="tabs" switchType="client" binding="#{controller.tabPanel}" selectedTab="#{controller.selectedTab}">
            <rich:tab id="listTab1" label="List">
                <a4j:include  viewId="/activeProjects.xhtml" />
            </rich:tab>
            <rich:tab id="detailTab2" label="Detail">
                <a4j:include  viewId="/detail.xhtml" />
            </rich:tab>
            <rich:tab id="commentsTab3" label="Comments" >
                Comments.......
            </rich:tab>
            <rich:tab id="searchTab4" label="Search">
                Search.......
            </rich:tab>
            <rich:tab label="Trips">
                Comments.......
            </rich:tab>
            <rich:tab label="Desc">
                Description.......
            </rich:tab>
        </rich:tabPanel>
    </ui:define>
</ui:composition>
In line 10, I have taken advantage of binding attribute which binds to the backing bean. selectedTab attribute defines name of selected tab.

Step 2: Under List tab, I have a include statemement for activeProjects.xhtml


<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">
    <style>
        .headerBold {font-weight:bold;}
    </style>

    <h:form>
        <rich:datascroller align="left"  for="projectTable" maxPages="20" />
        <rich:spacer height="30px" />
        <rich:scrollableDataTable  id="projectTable" var="project" value="#{controller.projectList}" first="0" rows="20" border="1" frozenColCount="2"  rowKeyVar="rkv" height="375px" width="700px"  sortMode="single" hideWhenScrolling="false" onRowMouseOver="this.style.backgroundColor='#E6E8FA'" onRowMouseOut="this.style.backgroundColor='#FFFFFF'" cellpadding="1" cellspacing="1">                                               

            <rich:column id="fiscalYear" width="35px" align="center">
                <f:facet name="header"><h:outputText styleClass="headerBold" value="FY" /></f:facet>
                <h:commandLink id="link" value="#{project.fy}" actionListener="#{controller.listTab1}" reRender="tabs">
                    <f:param name="projectId" value="#{project.projectId}"/>
                </h:commandLink>
            </rich:column>

            <rich:column id="projectNumber" width="150px">
                <f:facet name="header"><h:outputText styleClass="headerText" value="Project Number" /></f:facet>
                <h:outputText value="#{project.projectNumber}"></h:outputText>
            </rich:column>
            <rich:column id="team" width="30px">
                <f:facet name="header"><h:outputText styleClass="headerText" value="Team" /></f:facet>
                <h:outputText value="#{project.teamRoute}"></h:outputText>
            </rich:column>
            <rich:column id="projStatus" width="50px" sytelClass="rich-sdt">
                <f:facet name="header"><h:outputText styleClass="headerText" value="Proj Status" /></f:facet>
                <h:outputText value="#{project.projStat}"></h:outputText>
            </rich:column>
            <rich:column id="estimated" width="100px">
                <f:facet name="header"><h:outputText styleClass="headerText" value="Estimated" /></f:facet>
                <h:outputText value="#{project.estimatedCompletionDate}"> <f:convertDateTime pattern="mm/dd/yyyy"/></h:outputText>
            </rich:column>
        </rich:scrollableDataTable>
        <rich:spacer height="20px"/>
    </h:form>        

</ui:composition>
Line 18, added actionListener to tie with backing bean.

Step 3: Under Detail tab, I have a include statement for detail.xhtml

Step 4: Backing bean method

//....
private HtmlTabPanel tabPanel;
private String selectedTab;
//....

 public String getSelectedTab() {
        return selectedTab;
    }

public void listTab1(ActionEvent event) {
        Project projectBean = getProjectDetailFromRequestParam();
        this.setProject(projectBean);
        tabPanel.setSelectedTab("detailTab2");
    }

Now, I can click a link from List tab and get the results in the Datail tab.

About these ads

April 18, 2008 - Posted by | Jboss RichFaces (Ajax4JSF) |

29 Comments »

  1. good stuff. thanks!

    Comment by John | May 2, 2008 | Reply

  2. I developing a website which has a similar scenario. Here i am confused by the below part.

    Can we use the reRender property in h commanlink tag.When i tried to use its having tag error. Could you let me know if its working for you.

    regards
    hari

    Comment by Hari | May 19, 2008 | Reply

  3. Yes, it is working for me. It works on IE and Firefox
    Thanks
    Hobi

    Comment by hobione | May 19, 2008 | Reply

  4. Man you save my day. Thanks a lot, very useful.
    It is working very well under any web explorer!
    Cheers!

    Comment by Daniel Galanti | May 25, 2008 | Reply

  5. Hi…

    I am exploring using richdatatable for my web application using richfaces. Now how will I display the values in my richdatatable. What do I have to put in my backing bean to be displayed in the table. I understand I need to return an array or maybe a collection object. Would you teach me the codes to put in the backing bean?

    Thanks.

    Comment by Alvin Fernandez | August 12, 2008 | Reply

  6. I was going to paste some code for you but unfortunately wordpress not let me. I would recommend you to see richfaces live demo example, http://livedemo.exadel.com/richfaces-demo/richfaces/dataTable.jsf

    Hope this help
    Thanks
    Hobi

    Comment by hobione | August 13, 2008 | Reply

  7. Hi!!

    I’m trying to develop a web application using Facelets and RichFaces 3.3.0. I’m having problems because .xhtml files are not representing RichFaces tags although tags are defined in both files (template and main page using the template)

    I don’t know if this could be a problem of configuration in web.xml or faces-config.xml or what it would be happen…
    can u help me???

    thanks in advance!

    Comment by alonso | March 25, 2009 | Reply

  8. @alonso can you provide more details on this issue?

    Max

    http://mkblog.exadel.com

    Comment by maxwp | March 27, 2009 | Reply

  9. Hi,thanks, you saved my time actually I have a doubt here about richfaces tabpanel, in that program actually you have binded tabpanel to the backing bean so why don’t we take advantage of tabpanel.setSelectedTab(“tab1″). Actually I tried in that way but it is not working ok any way one more thing is actually my tabpanel has 11 tabs so how can I arrange them in row-wise, that mean keep the tabs in three rows, if you can please help me out…..

    Comment by J.Naveen | May 1, 2009 | Reply

  10. I need more details to understand what didn’t work. As for row-wise tabs, I don’t think it’s possible with the current component.

    Comment by maxwp | May 1, 2009 | Reply

  11. Sorry, forgot to include my name in the last post

    Max

    http://mkblog.exadel.com

    Comment by maxwp | May 1, 2009 | Reply

  12. Hi,
    thank you for your tutorial. It helped a lot… I just had one problem. Somehow i had to change the selected tab by name not by id. Using the id of the tab, didnt work. Im using Richfaces 3.3.1-SNAPSHOT. Maybe this comment helps someone, who has the same problem.
    bye

    Comment by Ray | August 10, 2009 | Reply

  13. Should with with id’s too.

    Max

    Comment by Max | August 10, 2009 | Reply

  14. meant to say ‘work’

    Comment by Max | August 10, 2009 | Reply

  15. Thanx :)))

    Comment by Mustafa Sait ÖZEN | December 11, 2009 | Reply

  16. Dhanyawad dost ……
    Taro khub khub abhar….
    I mean to say ….thanks a lot :-)

    Comment by Achilles | February 6, 2010 | Reply

  17. i want to know how to arrange the radio buttons rowwise.
    there are 16buttons each row should have 4 radio buttons

    Comment by savitha | February 9, 2010 | Reply

    • Use panel grid or html table (may be).

      Comment by HobiOne | February 9, 2010 | Reply

  18. Hi,

    I’m very new to seam and your article helped me in getting the tabs. But the problem is, my application is not able to restore the currently selected tab. By default it goes to the first tab. I found that you have used binding attribute with the rich:tabPanel tag. I got to know that you have created a backing bean(here it is controller) and passing the value to .xhtml file.

    As i’m new to seam i don’t know how to create a backing bean. What should i do in-order to restore the currently selected tab. Please explain me in detail. If possible provide me with sample code.

    Thank you

    Comment by Anitha | April 27, 2010 | Reply

  19. mmm… this work for me


    Next”
    onclick=”RichFaces.switchTab(‘#{rich:clientId(‘tabPane’)}’,’#{rich:clientId(‘tab2′)}’, ‘tab2′)”/>

    Comment by ZacJacK | June 24, 2010 | Reply

  20. mmm… this work for me

    ...
    Next"
    onclick="RichFaces.switchTab('#{rich:clientId('tabPane')}','#{rich:clientId('tab2')}', 'tab2')"/>

    Comment by ZacJacK | June 24, 2010 | Reply

  21. Hi,
    I tried the above code and its not working for me .The actionevent is being triggered but the reRender of the tabs are not working .Kindly assist me do I required any additional code to be included .

    Thank you

    Regards
    Jailani

    Comment by Jailani | August 4, 2010 | Reply

  22. [...] RichFaces Tabs: switch dynamically April 2008 22 comments 3 [...]

    Pingback by 2010 in blog review « Hobione's Weblog | January 7, 2011 | Reply

  23. Excelent !!!! Thank

    Comment by J@v@sso | March 23, 2011 | Reply

  24. I am using tags , but i am unable to change the size of the tab appearance.
    now tabs are appearing very small and at the left corner of the page ..please gimme suggestions

    Comment by Manjunath | May 25, 2011 | Reply

  25. Hi all,

    I have implemented richfaces tab in my code. In the first tab I have say a.jsf, so when a.jsf is submitted how to render b.jsf under first tab itself……….

    someone pls help to resolve this issue pls……..

    Thanks,
    Bachchu

    Comment by Bachchu (@bharathnav) | August 17, 2011 | Reply

  26. Hi I’ve a functionality like, two tabs in my tabpanel and 2 or more screens(common for both tabs) are there.I’m including the home.xhtml page in both tab1 and tab2.By defaultly I’ll navigate my flow in tab1.in the middle of flow I’ll switch to tab2.So now I need to use the same screen in tab2. How to maintain the screen flow state in both tabs? Can you please help me on this

    Comment by Dharma | February 14, 2012 | Reply

  27. Hi

    This example is very much like my requirement,
    but i am working on seams and richface custom tags i have tabpanel with tabs in those one of the tab having datatable which is not reRendering while addding a new record.

    Comment by Srikanth | September 4, 2012 | Reply

  28. This is exactly the 4th blog post, of urs I really read through.
    And yet I actually enjoy this 1, “RichFaces Tabs: switch dynamically Hobione’s Weblog” the best. Cya ,Fredrick

    Comment by http://tinyurl.com/nwscpiers11281 | January 23, 2013 | Reply


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: