Question: Richfaces tabPanel - using the same page for the different tabs changing the content dinamically

Question

I am using Seam 2.1.2 and RichFaces 3.3.2.SR1.

<a4j:form>
    <rich:tabPanel switchType="ajax">
        <rich:tab label="TAB 1" actionListener="#{outControl.tab1}" immediate="true">
            <ui:include src="/pages/agenda/TabContain.xhtml" />
        </rich:tab>
        <rich:tab label="TAB 2" actionListener="#{outControl.tab2}">
            <ui:include src="/pages/agenda/TabContain.xhtml" />
        </rich:tab>
        ...

TabContain.xhtml:

<rich:extendedDataTable value="#{manBean.seDataModel}" var="out" id="bc_table" 
    sortMode="#{manBean.sortMode}" selectionMode="#{manBean.selectionMode}" 
    tableState="#{manBean.tableState}" selection="#{manBean.selection}" 
    rowKeyVar="rkvar">
    <rich:column sortable="false" id="bc_col_0">
        ...

The content of extendedDataTable should be dependent of the tab selected. My first approach was to set an actionListener in the tabs and change the manBean within that action. After that actionListener even if I can see in the logs that the manBean has changed, this is not reflected in the page in the browser. It's like not refreshing. I tried setting a rerender in the rich:tab but that's also not doing it.

Any idea? Also happy about other approaches, this might be not the best one.

Answer 1

ok, the approach above worked out after a couple of tries using actionListener (I was not changing the correct attribute).

actionListener

1- it fires when the tab is selected 2- it grabs the managed bean through:

ManBean mb = (ManBean) context.getExternalContext().getSessionMap().get("manBean");

3- it modifies the managed bean which is the "value" in the extendedDataTable

4- important!: add a f:subview around each -ui:include- to avoid a "duplicate component ID" error!

Would you say there is a better approach for this?

Thanks.

Answer 2

Not sure I can put this into words easily but here it goes... If you have a fixed number of tabs and you know the possible values ahead of time, consider passing a parameter to the reusable template via ui:param.

Example Template with the tabpanel

<rich:tabPanel switchType="ajax">
  <rich:tab label="TAB 1" >
      <ui:include src="/pages/agenda/TabContain.xhtml">
         <ui:param name="dataModel" value="#{dataBean.dataset1}" />
      </ui:include>
  </rich:tab>
  <rich:tab label="TAB 2">
     <ui:include src="/pages/agenda/TabContain.xhtml">
       <ui:param name="dataModel" value="#{dataBean.dataset2}" />
     </ui:include>
  </rich:tab>

Then in the resusableDataTable template

<rich:extendedDataTable value="#{dataModel}" ....>
    <rich:column sortable="false" id="bc_col_0">
....
</rich:extendedDataTable>

The value of "dataModel" will then be passed into TabContain.xhtml as a parameter, and replaced anywhere there is a #{dataModel}.

Hope this helps, I'm doing essentially this in our project.