6 Replies Latest reply on Jun 21, 2013 6:16 PM by Brian Leathem

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

    Alfred Wong Newbie

      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>

        • 1. Re: Is there a way to render specific <rich:tab> in <rich:tabPanel>?
          Sandeep Singh Newbie

          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

          • 2. Re: Is there a way to render specific <rich:tab> in <rich:tabPanel>?
            Alfred Wong Newbie

            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..

            • 3. Re: Is there a way to render specific <rich:tab> in <rich:tabPanel>?
              Sandeep Singh Newbie

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

              • 4. Re: Is there a way to render specific <rich:tab> in <rich:tabPanel>?
                Alfred Wong Newbie

                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?

                • 5. Re: Is there a way to refresh "header" for a particular <rich:tab> in the <rich:tabPanel>?
                  scarycomputer Newbie

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

                  • 6. Re: Is there a way to refresh "header" for a particular <rich:tab> in the <rich:tabPanel>?
                    Brian Leathem Master

                    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".

                    1 of 1 people found this helpful