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.
14 Comments »
Leave a comment
-
Archives
- November 2009 (1)
- July 2009 (1)
- June 2009 (5)
- May 2009 (2)
- April 2009 (4)
- March 2009 (2)
- January 2009 (3)
- December 2008 (1)
- November 2008 (2)
- October 2008 (1)
- September 2008 (3)
- August 2008 (2)
-
Categories
-
RSS
Entries RSS
Comments RSS
good stuff. thanks!
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
Yes, it is working for me. It works on IE and Firefox
Thanks
Hobi
Man you save my day. Thanks a lot, very useful.
It is working very well under any web explorer!
Cheers!
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.
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
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!
@alonso can you provide more details on this issue?
Max
http://mkblog.exadel.com
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…..
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.
Sorry, forgot to include my name in the last post
Max
http://mkblog.exadel.com
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
Should with with id’s too.
Max
meant to say ‘work’