[
https://issues.jboss.org/browse/RF-11750?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Jean ANDRE updated RF-11750:
----------------------------
Description:
We put onenter() on tabs, because the actionlistener does not work very well on
the first click. Some tabs are static while other are dynamically constructed.
Tabs are created after a search and a new tab is created with a list of items.
When a user click on item list, the content of the tab is refreshed to display
detailed information. These information are displayed also inside 6 static tabs.
The problems comes when we click/select these static tabs. Selecting theses
tabs, trigger the onter() of the parent tab even if we stay all the time on the
parent tab.... The expected behavior is to receive the event on the sub-tab
instead of its parent.
We do not known if this behavior is normal or not.
The following code is the dynamic tab construction - Note the onenter()
{code}
<rich:tabPanel id="desktopTabPanel" switchType="ajax" headerPosition="top"
activeItem="#{desktopTabController.activeTab}">
<rich:tab id="tab-workitems" name="tab-workitems"
header="#{msg['desktop.tab.workitems']}" onenter="enterTab('#{tab.id}')">
<!-- -->
<!-- WORKITEMS TAB -->
<!-- -->
</rich:tab>
<rich:tab id="tab-search" name="tab-search"
header="#{msg['desktop.tab.search']}" onenter="enterTab('#{tab.id}')">
<!-- -->
<!-- SEARCH TAB -->
<!-- -->
<a4j:outputPanel id="toggleSearchOutput">
<!-- -->
<!-- TOGGLE SEARCH -->
<!-- -->
<a4j:commandButton id="toggleCommandSearch"
value="#{msg[desktopTabController.toggleSearchLabel]}"
actionListener="#{desktopTabController.doToggleSearch}"
render="toggleSearchOutput"
immediate="true">
</a4j:commandButton>
<br />
<br />
<!-- -->
<!-- SEARCH CLIENT -->
<!-- -->
<ui:include src="client/searchClient.xhtml" />
<!-- -->
<!-- SEARCH WORKITEMS -->
<!-- -->
<ui:include src="workitems/searchWorkItems.xhtml" />
</a4j:outputPanel>
</rich:tab>
<c:forEach items="#{desktopTabController.desktopTabBean.tabElements}"
var="tab">
<rich:tab id="#{tab.id}" name="#{tab.id}"
actionListener="#{desktopTabController.doTabListener}"
onenter="enterTab('#{tab.id}')">
<!-- -->
<!-- DYNAMIC TABS -->
<!-- -->
<f:facet name="header">
<h:panelGrid id="tab-header-#{tab.id}" columns="2"
title="#{desktopTabController.getTabHeader(tab.id)}">
<h:outputText
value="#{desktopTabController.getAdjustedTabHeader(tab.id)}" />
<h:commandButton image="/images/closeButton.png"
styleClass="closeButton"
action="#{desktopTabController.doCloseTab(tab.id)}" />
</h:panelGrid>
</f:facet>
<ui:fragment rendered="#{tab.isTabClient}">
<!-- -->
<!-- CLIENT TAB -->
<!-- -->
<ui:include src="client/listClient.xhtml" />
</ui:fragment>
<ui:fragment rendered="#{tab.isTabWorkItems}">
<!-- -->
<!-- WORKITEMS TAB -->
<!-- -->
<ui:include src="workItems/listWorkItems.xhtml" />
</ui:fragment>
</rich:tab>
</c:forEach>
</rich:tabPanel>
</h:form>
{code}
The onenter function definition. This function set only the selectedTab
variable in the backing bean
{code}
<a4j:jsFunction id="enterTab" name="enterTab"
action="#{desktopTabController.doEnterTab}" render="menu-opened-tabs">
<a4j:param name="tabId" assignTo="#{desktopTabController.activeTab}" />
</a4j:jsFunction>
{code}
The onenter function inside the backing-bean
{code}
public String doEnterTab() {
// we just need to set the activeTab because actionListener is not working
// for the first click - Bug has been reported by other users.
return OUTCOME_DESKTOP;
}
{code}
The following code is the nested tabs - Those tabs appears when the use click
on the item from a list.
{code}
<rich:tabPanel switchType="client" headerPosition="top">
<rich:tab header="#{msg['client.tab.summary']}">
<!-- -->
<!-- SUMMARY -->
<!-- -->
<ui:include src="summaryClient.xhtml" />
</rich:tab>
<rich:tab header="#{msg['client.tab.info']}">
<!-- -->
<!-- INFO. -->
<!-- -->
<ui:include src="infoClient.xhtml" />
</rich:tab>
<rich:tab header="#{msg['client.tab.products']}">
<!-- -->
<!-- PRODUCTS -->
<!-- -->
</rich:tab>
<rich:tab header="#{msg['client.tab.phone.address']}">
<!-- -->
<!-- PHONES & ADDRESSES -->
<!-- -->
</rich:tab>
<rich:tab header="#{msg['client.tab.history']}">
<!-- -->
<!-- HISTORY -->
<!-- -->
</rich:tab>
<rich:tab header="#{msg['client.tab.workitems']}">
<!-- -->
<!-- WORK ITEMS -->
<!-- -->
</rich:tab>
</rich:tabPanel>
{code}
Then, each time we click on these nested tabs, the parent tab call the
onenter().
See the screen capture for better understanding of the scenario.
was:
We put onenter() on tabs, because the actionlistener does not work very well on
the first click. Some tabs are static while other are dynamically constructed.
Tabs are created after a search and a new tab is created with a list of items.
When a user click on item list, the content of the tab is refreshed to display
detailed information. These information are displayed also inside 6 static tabs.
The problems comes when we click/select these static tabs. Selecting theses
tabs, trigger the onter() of the parent tab even if we stay all the time on the
parent tab....
We do not known if this behavior is normal or not.
The following code is the dynamic tab construction - Note the onenter()
{code}
<rich:tabPanel id="desktopTabPanel" switchType="ajax" headerPosition="top"
activeItem="#{desktopTabController.activeTab}">
<rich:tab id="tab-workitems" name="tab-workitems"
header="#{msg['desktop.tab.workitems']}" onenter="enterTab('#{tab.id}')">
<!-- -->
<!-- WORKITEMS TAB -->
<!-- -->
</rich:tab>
<rich:tab id="tab-search" name="tab-search"
header="#{msg['desktop.tab.search']}" onenter="enterTab('#{tab.id}')">
<!-- -->
<!-- SEARCH TAB -->
<!-- -->
<a4j:outputPanel id="toggleSearchOutput">
<!-- -->
<!-- TOGGLE SEARCH -->
<!-- -->
<a4j:commandButton id="toggleCommandSearch"
value="#{msg[desktopTabController.toggleSearchLabel]}"
actionListener="#{desktopTabController.doToggleSearch}"
render="toggleSearchOutput"
immediate="true">
</a4j:commandButton>
<br />
<br />
<!-- -->
<!-- SEARCH CLIENT -->
<!-- -->
<ui:include src="client/searchClient.xhtml" />
<!-- -->
<!-- SEARCH WORKITEMS -->
<!-- -->
<ui:include src="workitems/searchWorkItems.xhtml" />
</a4j:outputPanel>
</rich:tab>
<c:forEach items="#{desktopTabController.desktopTabBean.tabElements}"
var="tab">
<rich:tab id="#{tab.id}" name="#{tab.id}"
actionListener="#{desktopTabController.doTabListener}"
onenter="enterTab('#{tab.id}')">
<!-- -->
<!-- DYNAMIC TABS -->
<!-- -->
<f:facet name="header">
<h:panelGrid id="tab-header-#{tab.id}" columns="2"
title="#{desktopTabController.getTabHeader(tab.id)}">
<h:outputText
value="#{desktopTabController.getAdjustedTabHeader(tab.id)}" />
<h:commandButton image="/images/closeButton.png"
styleClass="closeButton"
action="#{desktopTabController.doCloseTab(tab.id)}" />
</h:panelGrid>
</f:facet>
<ui:fragment rendered="#{tab.isTabClient}">
<!-- -->
<!-- CLIENT TAB -->
<!-- -->
<ui:include src="client/listClient.xhtml" />
</ui:fragment>
<ui:fragment rendered="#{tab.isTabWorkItems}">
<!-- -->
<!-- WORKITEMS TAB -->
<!-- -->
<ui:include src="workItems/listWorkItems.xhtml" />
</ui:fragment>
</rich:tab>
</c:forEach>
</rich:tabPanel>
</h:form>
{code}
The onenter function definition. This function set only the selectedTab
variable in the backing bean
{code}
<a4j:jsFunction id="enterTab" name="enterTab"
action="#{desktopTabController.doEnterTab}" render="menu-opened-tabs">
<a4j:param name="tabId" assignTo="#{desktopTabController.activeTab}" />
</a4j:jsFunction>
{code}
The onenter function inside the backing-bean
{code}
public String doEnterTab() {
// we just need to set the activeTab because actionListener is not working
// for the first click - Bug has been reported by other users.
return OUTCOME_DESKTOP;
}
{code}
The following code is the nested tabs - Those tabs appears when the use click
on the item from a list.
{code}
<rich:tabPanel switchType="client" headerPosition="top">
<rich:tab header="#{msg['client.tab.summary']}">
<!-- -->
<!-- SUMMARY -->
<!-- -->
<ui:include src="summaryClient.xhtml" />
</rich:tab>
<rich:tab header="#{msg['client.tab.info']}">
<!-- -->
<!-- INFO. -->
<!-- -->
<ui:include src="infoClient.xhtml" />
</rich:tab>
<rich:tab header="#{msg['client.tab.products']}">
<!-- -->
<!-- PRODUCTS -->
<!-- -->
</rich:tab>
<rich:tab header="#{msg['client.tab.phone.address']}">
<!-- -->
<!-- PHONES & ADDRESSES -->
<!-- -->
</rich:tab>
<rich:tab header="#{msg['client.tab.history']}">
<!-- -->
<!-- HISTORY -->
<!-- -->
</rich:tab>
<rich:tab header="#{msg['client.tab.workitems']}">
<!-- -->
<!-- WORK ITEMS -->
<!-- -->
</rich:tab>
</rich:tabPanel>
{code}
Then, each time we click on these nested tabs, the parent tab call the
onenter().
See the screen capture for better understanding of the scenario.
> onter() on nested tab
> ---------------------
>
> Key: RF-11750
> URL: https://issues.jboss.org/browse/RF-11750
> Project: RichFaces
> Issue Type: Bug
> Security Level: Public(Everyone can see)
> Affects Versions: 4.1.0.CR1
> Environment: Websphere 8 - RAD 8 - JSF Mojorra 2.1.4 - Spring 3.0.6
> Final - Use @Inject @Named @SessionScoped as annotations - Firefox 7.0.1 -
> Windows 7 (6.1 sp1) - AspectJ 1.6.12 / AJDT
> Reporter: Jean ANDRE
> Fix For: 4.Future
>
> Attachments: screenshot-1.jpg, screenshot-2.jpg, screenshot-3.jpg
>
>
> We put onenter() on tabs, because the actionlistener does not work very well
> on the first click. Some tabs are static while other are dynamically
> constructed. Tabs are created after a search and a new tab is created with a
> list of items. When a user click on item list, the content of the tab is
> refreshed to display detailed information. These information are displayed
> also inside 6 static tabs.
> The problems comes when we click/select these static tabs. Selecting theses
> tabs, trigger the onter() of the parent tab even if we stay all the time on
> the parent tab.... The expected behavior is to receive the event on the
> sub-tab instead of its parent.
> We do not known if this behavior is normal or not.
> The following code is the dynamic tab construction - Note the onenter()
> {code}
> <rich:tabPanel id="desktopTabPanel" switchType="ajax" headerPosition="top"
> activeItem="#{desktopTabController.activeTab}">
> <rich:tab id="tab-workitems" name="tab-workitems"
> header="#{msg['desktop.tab.workitems']}" onenter="enterTab('#{tab.id}')">
> <!-- -->
> <!-- WORKITEMS TAB -->
> <!-- -->
> </rich:tab>
> <rich:tab id="tab-search" name="tab-search"
> header="#{msg['desktop.tab.search']}" onenter="enterTab('#{tab.id}')">
> <!-- -->
> <!-- SEARCH TAB -->
> <!-- -->
> <a4j:outputPanel id="toggleSearchOutput">
> <!-- -->
> <!-- TOGGLE SEARCH -->
> <!-- -->
> <a4j:commandButton id="toggleCommandSearch"
> value="#{msg[desktopTabController.toggleSearchLabel]}"
> actionListener="#{desktopTabController.doToggleSearch}"
> render="toggleSearchOutput"
> immediate="true">
> </a4j:commandButton>
> <br />
> <br />
> <!-- -->
> <!-- SEARCH CLIENT -->
> <!-- -->
> <ui:include src="client/searchClient.xhtml" />
> <!-- -->
> <!-- SEARCH WORKITEMS -->
> <!-- -->
> <ui:include src="workitems/searchWorkItems.xhtml" />
> </a4j:outputPanel>
> </rich:tab>
> <c:forEach items="#{desktopTabController.desktopTabBean.tabElements}"
> var="tab">
> <rich:tab id="#{tab.id}" name="#{tab.id}"
> actionListener="#{desktopTabController.doTabListener}"
> onenter="enterTab('#{tab.id}')">
> <!-- -->
> <!-- DYNAMIC TABS -->
> <!-- -->
> <f:facet name="header">
> <h:panelGrid id="tab-header-#{tab.id}" columns="2"
> title="#{desktopTabController.getTabHeader(tab.id)}">
> <h:outputText
> value="#{desktopTabController.getAdjustedTabHeader(tab.id)}" />
> <h:commandButton image="/images/closeButton.png"
> styleClass="closeButton"
> action="#{desktopTabController.doCloseTab(tab.id)}" />
> </h:panelGrid>
> </f:facet>
> <ui:fragment rendered="#{tab.isTabClient}">
> <!-- -->
> <!-- CLIENT TAB -->
> <!-- -->
> <ui:include src="client/listClient.xhtml" />
> </ui:fragment>
> <ui:fragment rendered="#{tab.isTabWorkItems}">
> <!-- -->
> <!-- WORKITEMS TAB -->
> <!-- -->
> <ui:include src="workItems/listWorkItems.xhtml" />
> </ui:fragment>
> </rich:tab>
> </c:forEach>
> </rich:tabPanel>
> </h:form>
> {code}
> The onenter function definition. This function set only the selectedTab
> variable in the backing bean
> {code}
> <a4j:jsFunction id="enterTab" name="enterTab"
> action="#{desktopTabController.doEnterTab}" render="menu-opened-tabs">
> <a4j:param name="tabId" assignTo="#{desktopTabController.activeTab}" />
> </a4j:jsFunction>
> {code}
> The onenter function inside the backing-bean
> {code}
> public String doEnterTab() {
> // we just need to set the activeTab because actionListener is not working
> // for the first click - Bug has been reported by other users.
> return OUTCOME_DESKTOP;
> }
> {code}
> The following code is the nested tabs - Those tabs appears when the use click
> on the item from a list.
> {code}
> <rich:tabPanel switchType="client" headerPosition="top">
> <rich:tab header="#{msg['client.tab.summary']}">
> <!-- -->
> <!-- SUMMARY -->
> <!-- -->
> <ui:include src="summaryClient.xhtml" />
> </rich:tab>
> <rich:tab header="#{msg['client.tab.info']}">
> <!-- -->
> <!-- INFO. -->
> <!-- -->
> <ui:include src="infoClient.xhtml" />
> </rich:tab>
> <rich:tab header="#{msg['client.tab.products']}">
> <!-- -->
> <!-- PRODUCTS -->
> <!-- -->
>
> </rich:tab>
> <rich:tab header="#{msg['client.tab.phone.address']}">
> <!-- -->
> <!-- PHONES & ADDRESSES -->
> <!-- -->
>
> </rich:tab>
> <rich:tab header="#{msg['client.tab.history']}">
> <!-- -->
> <!-- HISTORY -->
> <!-- -->
>
> </rich:tab>
> <rich:tab header="#{msg['client.tab.workitems']}">
> <!-- -->
> <!-- WORK ITEMS -->
> <!-- -->
>
> </rich:tab>
> </rich:tabPanel>
> {code}
> Then, each time we click on these nested tabs, the parent tab call the
> onenter().
> See the screen capture for better understanding of the scenario.
--
This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators:
https://issues.jboss.org/secure/ContactAdministrators!default.jspa
For more information on JIRA, see: http://www.atlassian.com/software/jira
_______________________________________________
richfaces-issues mailing list
[email protected]
https://lists.jboss.org/mailman/listinfo/richfaces-issues
