rich:tab label facet

rhardy5014 Oct 2, 2007 6:00 AM

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 Oct 2, 2007 8:05 AM (in response to rhardy5014)

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.