1 Reply Latest reply on Oct 2, 2007 8:05 AM by Ilya Shaikovsky

    rich:tab label facet

    Richard Hardy Newbie

      Hi,
      I am trying to use the new label facet of a rich:tab component to display a "close tab" image. The idea is that when I click on this image, an actionListener is called and the tab will be closed.

      This works correctly if the image on the currently selected tab is clicked.

      However, if I click on the image associated with an inactive tab, an ajax request takes place, but my actionListener is never called.

      This means that at the moment I can only close the active tab, and not the inactive tabs, which I would really like to do.

      Here is the code for the label facet for one of my tabs. The others are all very similar:

       <f:facet name="label">
       <a4j:outputPanel layout="block"
       rendered="#{!tabManager.managedDocumentTabs['DOCUMENTTAB0'].emptyTabType}">
       <h:outputText value="#{tabManager.managedDocumentTabs['DOCUMENTTAB0'].tabTitle}"
       styleClass="floatLeft"/>
       <a4j:outputPanel layout="block"
       rendered="#{!sessionTracker.lowBandwidth}">
       <a4j:commandButton image="/images/css-images/popupcloseSharp.gif"
       styleClass="floatRight"
       reRender="ajaxRenderedTabPanel"
       actionListener="#{tabManager.closeTab0}"
       eventsQueue="generalEventQueue"
       title="Close tab"
       oncomplete="releaseAjax();"/>
       </a4j:outputPanel>
       </a4j:outputPanel>
       </f:facet>


      Does anyone have any suggestions?

      Thanks,
      Richard.

        • 1. Re: rich:tab label facet
          Ilya Shaikovsky Master

          My simple example:

           <rich:tabPanel switchType="ajax" id="tab">
           <rich:tab label="test 1" name="tab1" action="#{bean.action}">
           <ui:include src="/pages/greeting1.xhtml" />
           <a4j:commandButton value="next" reRender="tab"
           action="#{bean.nextTab}"></a4j:commandButton>
           </rich:tab>
           <rich:tab name="tab2" action="#{bean.action}"
           rendered="#{not bean.check}">
           <f:facet name="label">
           <h:panelGroup>
           <h:graphicImage value="/pages/texas.gif"
           onclick="Event.stop(event); doHide();" />
           </h:panelGroup>
           </f:facet>
           <h:form>
           <ui:include src="/pages/greeting1.xhtml" />
           <a4j:commandButton value="prev" reRender="tab"
           action="#{bean.prevTab}"></a4j:commandButton>
           </h:form>
           </rich:tab>
           </rich:tabPanel>
           <a4j:jsFunction name="doHide" action="#{bean.toggleCheck}"
           reRender="tab"/>
          


          check - boolean varible and toggleCheck - inverts the check value.

          Pay your attention to

          onclick="Event.stop(event); doHide();"


          This stops the tabChange event on the tab itself.