Is there a way to refresh "header" for a particular <rich:tab> in the <rich:tabPanel>?

[td121136]

Hi, i want to update existing system which used RichFaces 3 to RichFaces 4.3.2.Final, the problem i faced now is in existing system we did set passed and failed markers on the tab header, but in RichFaces 4, after i set them, when i render the tab, nothing is being change.

Then I created a dummy <rich:tab> like below, by right the ajax call should re-render the <rich:tab> and refresh the last accessed time in the header, unfortunately nothing is change, but when i change the render to tabPanel "tabPanel1", then the tab header last accessed time changed this time, but this is not what i want, because if i have multiple tabs, then all tabs will get refresh. Can i just to render on particular tab or (tabs), apprieciate any advise.

Dummy Tab

<rich:tabPanel id="tabPanel1" switchType="client">

    <rich:tab id="tab1">

        <f:facet name="header">

            <h:panelGroup id="group1">

                   <h:outputText id="output1" value="SECOND: #{session.lastAccessedTime}"/>

                <rich:message for="stringValueInput">

                    <f:facet name="errorMarker">

                        <h:outputText id="innerMessage1" value="error : #{session.lastAccessedTime}"/>

                    </f:facet>

                    <f:facet name="fatalMarker">

                        <h:outputText id="innerMessage2" value="fatal : #{session.lastAccessedTime}"/>

                    </f:facet>

                    <f:facet name="infoMarker">

                        <h:outputText id="innerMessage3" value="info : #{session.lastAccessedTime}"/>

                    </f:facet>

                    <f:facet name="passedMarker">

                        <h:outputText id="innerMessage4" value="passed : #{session.lastAccessedTime}"/>

                    </f:facet>

                    <f:facet name="warnMarker">

                        <h:outputText id="innerMessage5" value="warn : #{session.lastAccessedTime}"/>

                    </f:facet>

                </rich:message>

            </h:panelGroup>

          </f:facet>

        <h:panelGrid columns="1">

            <h:outputText id="output2" value="#{session.lastAccessedTime}"/>

        </h:panelGrid>

          <h:panelGrid columns="3">

            <h:outputText id="label" value="Value "/>

               <h:inputText id="stringValueInput" required="true">

                    <f:validateLength minimum="2" maximum="256" />

                    <a4j:ajax event="blur" execute="@this" render="tab1"/>

               </h:inputText>

               <rich:message id="error1" for="stringValueInput"/>

          </h:panelGrid>

     </rich:tab>

</rich:tabPanel>

[sandy4you]

Hi Alfred,

Do you need something like this.

<ui:fragment

    xmlns="http://www.w3.org/1999/xhtml"

    xmlns:a4j="http://richfaces.org/a4j"

    xmlns:rich="http://richfaces.org/rich"

    xmlns:ui="http://java.sun.com/jsf/facelets"

    xmlns:cc="http://java.sun.com/jsf/composite/components/correspondence">

    <rich:tabPanel

        id="tabp_topic"

        rendered="#{registeredUser.allowed(permissions.corrTopicDisplay)}"

        switchType="client"

        activeItem="#{correspondenceTopicOverviewBean.tabController.activeTab}">

        <rich:tab

            id="tab_topicReason"

            name="tab_topicReason"

            header="#{commonTrans.corTopicReasons}"

            rendered="#{correspondenceTopicOverviewBean.topicIndividual}"

            onheaderclick="changeTabToReasons()">

            <ui:include src="reason/reasonOverview.xhtml" />

        </rich:tab>

        <rich:tab

            id="tab_topicMapping"

            name="tab_topicMapping"

            header="#{commonTrans.corTopicMappings}"

            rendered="#{correspondenceTopicOverviewBean.topicSystemic}"

            onheaderclick="changeTabToMappings()">

            <ui:include src="mapping/mappingOverview.xhtml" />

        </rich:tab>

        <rich:tab

            id="tab_topicNoSelection"

            name="tab_topicNoSelection"

            header="#{commonTrans.corTopicReasonsOrMappings}"

            rendered="#{not correspondenceTopicOverviewBean.topicSelected}"

            onheaderclick="changeTabToDefault()">

            <cc:noTopicSelected />

        </rich:tab>

        <rich:tab

            id="tab_topicParameter"

            name="tab_topicParameter"

            header="#{commonTrans.corTopicParameters}"

            onheaderclick="changeTabToParameters()">

            <ui:include src="parameter/parameterOverview.xhtml" />

        </rich:tab>

        <rich:tab

            id="tab_topicTemplate"

            name="tab_topicTemplate"

            header="#{commonTrans.corTopicTemplates}"

            onheaderclick="changeTabToTemplates()">

            <ui:include src="template/topicTemplateOverview.xhtml" />

        </rich:tab>

    </rich:tabPanel>

    <a4j:jsFunction

        id="js_changeTabToReasons"

        name="changeTabToReasons"

        immediate="true"

        action="#{correspondenceTopicOverviewBean.tabController.setReasonsTab}" />

    <a4j:jsFunction

        id="js_changeTabToMappings"

        name="changeTabToMappings"

        immediate="true"

        action="#{correspondenceTopicOverviewBean.tabController.setMappingsTab}" />

    <a4j:jsFunction

        id="js_changeTabToDefault"

        name="changeTabToDefault"

        immediate="true"

        action="#{correspondenceTopicOverviewBean.tabController.setDefaultTab}" />

    <a4j:jsFunction

        id="js_changeTabToParameters"

        name="changeTabToParameters"

        immediate="true"

        action="#{correspondenceTopicOverviewBean.tabController.setParametersTab}" />

    <a4j:jsFunction

        id="js_changeTabToTemplates"

        name="changeTabToTemplates"

        immediate="true"

        action="#{correspondenceTopicOverviewBean.tabController.setTemplatesTab}" />

</ui:fragment>

And in all the tabs I have Data-Table and only that data-table for the given is refreshed if there was any change.

For example the first Tab code,

<f:metadata>

        <f:event

            type="preRenderView"

            listener="#{correspondenceTopicOverviewBean.reasons.dataModel.preRenderModelLoad}" />

    </f:metadata>

    <h:panelGroup

        id="pgr_topicReason"

        rendered="#{registeredUser.allowed(permissions.corrTopicDisplay)}">

        <a4j:region

            id="reg_topicReasonSelected"

            rendered="#{correspondenceTopicOverviewBean.topicSelected}">

            <h:panelGroup

                id="pgr_createTopicReason"

                rendered="#{registeredUser.allowed(permissions.corrTopicModify)}">

                <div align="right">

                    <a4j:commandLink

                        id="cl_createTopicReason"

                        value="#{commonTrans.corTopicReasonCreateBtn}"

                        styleClass="rf-ds-btn"

                        render="pgr_reasonCreatepopUps"

                        execute="@this"

                        action="#{correspondenceReasonCrudWflBean.startNew}" />

                </div>

            </h:panelGroup>

            <hr />

            <h:form id="f_topicReasonTable">

                <rich:dataTable

                    id="tbdt_topicReasonTable"

                    var="reason"

                    iterationStatusVar="it"

                    value="#{correspondenceReasonOverviewBean.dataModel}"

                    rows="5"

                    style="width: 100%;">

                    <rich:column

                        id="tbc_topicReasonAction"

                        width="100px">

                        <f:facet name="header">

                            <h:outputText

                                id="out_topicReasonActionHeader"

                                value="#{commonTrans.corTopicTableAction}" />

                        </f:facet>

                        <div align="center">

                            <h:panelGroup

                                id="pgr_deleteTopicReason"

                                rendered="#{registeredUser.allowed(permissions.corrTopicModify)}">

                                <a4j:commandLink

                                    id="cl_deleteTopicReason"

                                    styleClass="no-decor"

                                    render="pgr_reasonDeletepopUps"

                                    execute="@this"

                                    action="#{correspondenceReasonCrudWflBean.startDelete}">

                                    <h:graphicImage

                                        id="img_deleteTopicReason"

                                        value="/images/tables/row_delete.gif"

                                        alt="#{commonTrans.corTopicReasonDeleteImageAlt}" />

                                    <f:setPropertyActionListener

                                        target="#{correspondenceReasonCrudWflBean.topicReasonToBeDeleted}"

                                        value="#{reason}" />

                                </a4j:commandLink>

                            </h:panelGroup>

                        </div>

                    </rich:column>

Let me know if this gives you any help or you need some more information.

In sort use <a4j:region> for each tabs and render then using their ID's.

Hope this help you.

Cheers,

Sandy

[td121136]

Hi Sandy, thanks for your quick response. Unfortunately that doesn't solve my problem, my problem is I want to refresh the rich:tab "header" which doesn't involve any switch to other tab.

For example in the same tab, i try to key in wrong value to some input fields, then the tab header will changed accordingly like:

Original: Tab1

Passed: Tab1 (tick)

Failed: Tab1 (cross)

Sorry for the mislead title..

[sandy4you]

Curently the only way I see here is to change to switch type from client to server.

[td121136]

I tried the suggested way, but the header of the rich:tab still not refresh when i re-render the tab, or in RichFaces 4.3.2.Final version the rich:tab is designed not to support to be re-render?

[scarycomputer]

You can use the tab facets headerActive & headerInactive, place controls (e.g. outputText) and re-render them.

[bleathem]

The tab headers are rendered via the TabPanelRenderer, see:

https://github.com/richfaces/richfaces/blob/master/framework/src/main/java/org/richfaces/ui/toggle/tabPanel/TabPanelRenderer.java#L186

So if you want to refresh the tab header, you'll have to render the whole tabPanel.  You can file a feature request to enable rendering just the tab headers, we might be able to do this with a meta component identifier, something like: "tabPanel@headers".