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.

---

Possibly related posts: (automatically generated)

• Layouting and Dynamic Includes in Facelets