I'm developing my first JSF2 + Richfaces application and now I have this problem.
I have the following rich:tabPanel to which add and remove dynamically tab.
<h:form>
<rich:tabPanel id="tabsPanel" switchType="ajax" activeItem="#{tabsBean.activeTab}" >
<c:forEach var="tab" items="#{tabsBean.tabs}" styleClass="myRightPanel">
<rich:tab name="#{tab.name}" styleClass="myTab" >
<h:form id="#{tab.name}" >
<ui:include src="#{tab.pathDaIncludere}" />
</h:form>
</rich:tab>
</c:forEach>
</rich:tabPanel>
</h:form>
but to run I must add a <h:form> around each <rich:tab> otherwise the actions in the tabs will not work.
Is correct insert <h:form> in each tab?
Related
We switched from RichFaces 3 to 4 and have some conceptual problems with <rich:tabPanel>... with RichFaces 3 you could do something like that:
<rich:tabPanel switchType="server">
<rich:tab header="A">
<h:form>
<h:commandButton value="A1" />
</h:form>
<h:form>
<h:commandButton value="A2" />
</h:form>
</rich:tab>
<rich:tab header="B">
<h:form>
<h:commandButton value="B" />
</h:form>
</rich:tab>
<rich:tab header="C">
<h:form>
<h:commandButton value="C" />
</h:form>
</rich:tab>
</rich:tabPanel>
That no longer works with JSF 2 and RichFaces 4 – for <rich:tabPanel> needs its own <h:form> for switchType="server" or "ajax"... only client works without a form. So we now would have to build it like that:
<h:form>
<rich:tabPanel switchType="server">
<rich:tab header="A">
<h:commandButton value="A1" />
<h:commandButton value="A2" />
</rich:tab>
<rich:tab header="B">
<h:commandButton value="B" />
</rich:tab>
<rich:tab header="C">
<h:commandButton value="C" />
</rich:tab>
</rich:tabPanel>
</form>
That works... but I'm no longer able to separate between A1 and A2 which have been separate forms before.
How can we solve that problem without using switchType="client"?
The multi forms support in rich:tabPanel ticket has been just recently rejected with recommendation to use a4j:region:
This will not be implemented, <a4j:region> can be used to limit the
scope of execution inside a tab.
https://issues.jboss.org/browse/RF-11306
You can can limit the scope of the <a4j:commandButton execute="#region"> with #execute. Probably the easiest approach would be to wrap the data in an <a4j:region> and set execute="#region" on the button.
On a facelet composed with different ui:include, what would be the best way to refer to a component located in ui:composition 2 from ui:composition 1?
Example:
fileA.xhtml
<ui:composition>
<p:commandButton value="OK" action="#{bean.foo}" update=":componentToUpdate"/>
</ui:composition>
fileB.xhtml
<ui:composition>
<p:panel id="componentToUpdate">
// ...
</p:panel>
</ui:composition>
Here, I'm "hardcoding" the id, "componentToUpdate". I thought of using a parameter:
<ui:include src="fileA.xhtml" >
<ui:param name="myParam" value="myId"/>
</ui:include>
fileB.xhtml
<ui:composition>
<p:panel id="#{myId}">
// ...
</p:panel>
</ui:composition>
Would it be interesting to have a bean that maintains all of these ids?
Hope I'm clear enough, thanks.
I hava a rich:tabPanel where i can add and remove tab dynamically
<rich:tabPanel id="tabsPanel" switchType="client" activeItem="#{tabsBean.activeTab}" itemChangeListener="#{tabsBean.tabChange()}" >
<c:forEach var="tab" items="#{tabsBean.tabs}" >
<rich:tab name="#{tab.name}" onheaderclick="switchTab('#{tab.name}');" >
<f:facet name="header">
<h:panelGrid columns="2">
<h:outputText value="#{tab.name}" />
<h:graphicImage value="#{pathImmagini.pathImmagineElimina}"
style="width:12px; height:12px;"
onclick="myFunc('#{tab.name}'); Event.stop(event);"/>
</h:panelGrid>
</f:facet>
<h:form id="#{tab.name}" >
<ui:include src="#{tab.pathComponent}" />
</h:form>
</rich:tab>
</c:forEach>
</rich:tabPanel>
where each tab has a its component *.xhtml (tab.pathComponent) , within of this components i have many a4j:commandlink that not works at first time.
this is one of my components (tab.pathComponent)
<rich:toolbar height="30" >
<a4j:commandLink action="#{tab.setNewObject('Nuovo Cliente')}" render="pannelloDatiCliente" execute="#this" >
<h:graphicImage value="#{pathImmagini.pathImmagineAggiungiSoggetto}"/>
</a4j:commandLink>
</rich:toolbar>
How i can do?
can you give bit more information regarding your xhtml. normally second click problem happens because of partial rendereing of page or UI. Can't tell the problem only with this part of code.
I have a rich:tabPanel where add tabs dinamically
<c:forEach var="tab" items="#{tabsBean.tabs}" >
<rich:tab name="#{tab.name}" >
<h:form id="#{tab.name}" >
<f:facet name="header">
<h:outputText value="#{tab.name}" />
<a4j:commandLink value="X" action="#{tabsBean.removeTab(tab)}" />
</f:facet>
<ui:include src="#{tab.path}" />
</h:form>
</rich:tab>
</c:forEach>
The troubles are
command link (X) is not show and when i close the tab i would open the #perv tab
How can i do?
f:facet name="header" must be a direct child of rich:tab (in your code it is a facet of h:form, but h:form does not support such facet, so it is not shown).
Note also if you are using RichFaces 4.x then you can not have form elements inside individual tabs, it is not supported yet, refer to:
https://issues.jboss.org/browse/RF-11306
As you can see I am trying to display a dialog box on click on the command link, the dialog is displayed in IE and Firefox, but not in Google Chrome v23, please suggest.
<h:form id="myForm">
<p:tabView id="tabView">
<p:tab id="tab1" title="Tab 1">
<h:panelGrid columns="1" cellpadding="10">
<h:dataTable value="#{testBean.dataList}" var="data">
<h:column>
<h:outputText value="#{data}" />
</h:column>
<h:column>
<p:commandLink action="#{testBean.loadCommentHistory(data)}"
update=":myForm:tabView:dialog" oncomplete="dlg.show()">
<h:graphicImage url="resources/theme1/images/comments.gif"
styleClass="basicImageStyle" />
</p:commandLink>
</h:column>
</h:dataTable>
<p:dialog id="dialog" header="Dynamic Dialog" widgetVar="dlg">
<h:outputText value="#{testBean.commentHistory}" />
</p:dialog>
</h:panelGrid>
</p:tab>
</p:tabView>
</h:form>
When you update the dialog the dialog is reset to the default state which is hidden. If you call dialog.show() and update the dialog the dialog is hidden again. Chrome (being probably faster than IE or FireFox) seems to handle this differently. A solution would be to wrap the content of the dialog in a container and update the container.
<p:commandLink action="#{testBean.loadCommentHistory(data)}"
update=":myForm:tabView:dialog-content" oncomplete="dlg.show()">
<h:graphicImage url="resources/theme1/images/comments.gif"
styleClass="basicImageStyle" />
</p:commandLink>
<p:dialog id="dialog" header="Dynamic Dialog" widgetVar="dlg">
<p:outputPanel id="dialog-content">
<h:outputText value="#{testBean.commentHistory}" />
</p:outputPanel>
</p:dialog>
Try to encapsulate the page in a f:view tag if you haven't already. There is some problem when it is not present with Chrome and Safari. See http://primefaces.org/faq.html question 3
<html xmnls=... >
<f:view contentType="text/html">
<h:head>
....
</h:head>
<h:body>
....
</h:body>
</f:view>
</html>