RichFaces Tabs: switch dynamically
On my application I have bunch of tabs and each tabs has different functionalities. Here is a screen shots.
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.
29 Comments »
Leave a reply to alonso Cancel reply
-
Archives
- January 2018 (1)
- August 2014 (2)
- January 2011 (3)
- September 2010 (1)
- August 2010 (1)
- May 2010 (1)
- April 2010 (1)
- November 2009 (1)
- July 2009 (1)
- June 2009 (5)
- May 2009 (2)
- April 2009 (4)
-
Categories
-
RSS
Entries RSS
Comments RSS
good stuff. thanks!
Comment by John | May 2, 2008 |
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 |
Yes, it is working for me. It works on IE and Firefox
Thanks
Hobi
Comment by hobione | May 19, 2008 |
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 |
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 |
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 |
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 |
@alonso can you provide more details on this issue?
Max
http://mkblog.exadel.com
Comment by maxwp | March 27, 2009 |
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 |
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 |
Sorry, forgot to include my name in the last post
Max
http://mkblog.exadel.com
Comment by maxwp | May 1, 2009 |
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 |
Should with with id’s too.
Max
Comment by Max | August 10, 2009 |
meant to say ‘work’
Comment by Max | August 10, 2009 |
Thanx :)))
Comment by Mustafa Sait ÖZEN | December 11, 2009 |
Dhanyawad dost ……
Taro khub khub abhar….
I mean to say ….thanks a lot :-)
Comment by Achilles | February 6, 2010 |
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 |
Use panel grid or html table (may be).
Comment by HobiOne | February 9, 2010 |
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 |
mmm… this work for me
…
Next”
onclick=”RichFaces.switchTab(‘#{rich:clientId(‘tabPane’)}’,’#{rich:clientId(‘tab2′)}’, ‘tab2’)”/>
Comment by ZacJacK | June 24, 2010 |
mmm… this work for me
...
Next"
onclick="RichFaces.switchTab('#{rich:clientId('tabPane')}','#{rich:clientId('tab2')}', 'tab2')"/>
Comment by ZacJacK | June 24, 2010 |
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 |
[…] RichFaces Tabs: switch dynamically April 2008 22 comments 3 […]
Pingback by 2010 in blog review « Hobione's Weblog | January 7, 2011 |
Excelent !!!! Thank
Comment by J@v@sso | March 23, 2011 |
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 |
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 |
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 |
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 |
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 |