8 Replies Latest reply on Mar 19, 2008 12:06 PM by mars1412

rich:tab with ui:include ?

grimholtz Mar 17, 2008 6:20 PM

Hi,

I have a very simple seam/facelets/richfaces app. I cannot get rich:tab to work with ui:include in my template.xhtml:

<h:form id="f1">
 <rich:tabPanel>
 <rich:tab label="tab 1">
 <ui:insert name="tab1"/>
 </rich:tab>
 <rich:tab label="tab2">
 <ui:include src="tab2.xhtml"/>
 </rich:tab>
 </rich:tabPanel>
 </h:form>

tab1 renders correctly, but tab2 does not. Is this expected? What am I doing wrong?

thank you in advance.

1. Re: rich:tab with ui:include ?

sergeysmirnov Mar 17, 2008 6:38 PM (in response to grimholtz)

What do you mean by "renders correctly" ? What it is rendered now?
Actions

2. Re: rich:tab with ui:include ?

grimholtz Mar 18, 2008 10:34 AM (in response to grimholtz)

Hi Sergey, thanks for the reply. What I mean by "rendered correctly" is that the content of tab1 displays just fine, but tab2 does not. Here is more detail.

tab1.xhtml:

<ui:composition ... template="template.xhtml">
<ui:define name="tab1">
 <h:outputText value="Search criteria: "/>
 <h:inputText id="searchString" value="#{userSearch.searchString}"/>
 <rich:suggestionbox id="suggestionBox" for="searchString"
 suggestionAction="#{userSearch.findUsers}" var="user"
 fetchValue="#{user.name}" ... >
 <h:column>
 <h:outputText value="#{user.name}"/>
 </h:column>
 </rich:suggestionbox>

 <h:commandButton action="#{userSearch.search}" value="Search"/>

 <h:dataTable value="#{users}" var="user" rendered="#{users.rowCount>0}">
 <h:column>
 <f:facet name="header">User ID</f:facet>
 #{user.id}
 </h:column>
 <h:column>
 <f:facet name="header">#{user.name}</f:facet>
 #{user.name}
 </h:column>
 </h:dataTable>
</ui:define>
</ui:composition>
</ui:composition>

tab2.xhtml:

<ui:composition ... template="template.xhtml">
 <h:outputText value="Hello from tab2"/>
</ui:composition>

template.xhtml:

<html><body>
<h:form id="f1">
 <rich:tabPanel>
 <rich:tab label="Tab 1">
 <ui:insert name="tab1"/>
 </rich:tab>
 <rich:tab label="Tab 2">
 <ui:include src="tab2.xhtml"/>
 </rich:tab>
 </rich:tabPanel>
</h:form></body></html>

It does not matter if I change switchType of rich:tabPanel to client, server, or ajax... content of tab2 is empty

Screenshot:
http://img86.imageshack.us/img86/1724/capture221200825248pm22ap5.png

3. Re: rich:tab with ui:include ?

mars1412 Mar 18, 2008 11:12 AM (in response to grimholtz)
looks like your template.xhtml only renders things defined by
<ui:define name="tab1">

like you do it in the first tab
post the code of your template.xhtml

also:
maybe you should use one form for each tab:
<h:form id="f1"> <rich:tabPanel> <rich:tab label="tab 1"> <h:form> <ui:insert name="tab1"/> </h:form> </rich:tab> <rich:tab label="tab2"> <h:form> <ui:include src="tab2.xhtml"/> </h:form> </rich:tab> </rich:tabPanel>

and read about the switch type
Actions
4. Re: rich:tab with ui:include ?

sergeysmirnov Mar 18, 2008 3:29 PM (in response to grimholtz)

"mars1412" wrote:

maybe you should use one form for each tab:

Bad idea. Nested forms are not allowed in JSF
Actions
5. Re: rich:tab with ui:include ?

sergeysmirnov Mar 18, 2008 3:31 PM (in response to grimholtz)

"grimholtz" wrote:
Hi Sergey, thanks for the reply. What I mean by "rendered correctly" is that the content of tab1 displays just fine, but tab2 does not. Here is more detail.

Are you sure, that the path to include src is correct? What if you put this include outside of tab panel just for testing purpose?
Actions
6. Re: rich:tab with ui:include ?

mars1412 Mar 19, 2008 4:51 AM (in response to grimholtz)
sorry - was a pasting mistake:
<h:form id="f1">

remove this - then the forms are not nested and it should work as expected

if you have only one form around the complete tabPanel, switching from one tab to the other will submit all your data which is sometimes not what you want.
Actions
7. Re: rich:tab with ui:include ?

grimholtz Mar 19, 2008 11:41 AM (in response to grimholtz)

"mars1412" wrote:
if you have only one form around the complete tabPanel, switching from one tab to the other will submit all your data which is sometimes not what you want.

The http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone/docs/devguide/en/html_single/index.html#d0e36800 says:

Note:
All tabPanels should be wrapped into a form element so as content is correctly submitted inside. If a form is placed into each tab, the Action elements of Tab controls appear to be out of the form and content submission inside the panels could be performed only for Action components inside tabs.

Indeed, placing forms around each tab makes the tabs render vertically.

Anyway, I was able to solve the problem by making the template ui:include both .xhtml pages instead of ui:inserting one and ui:including the other. The user then navigates to the template page (now named tabpanel.xhtml) instead of tab1.xhtml.
Actions
8. Re: rich:tab with ui:include ?

mars1412 Mar 19, 2008 12:06 PM (in response to grimholtz)

If a form is placed into each tab, the Action elements of Tab controls appear to be out of the form and content submission inside the panels could be performed only for Action components inside tabs.

yipp, what I said before.

so when you now switch from tab1 to tab2 the form including all the data of your input fileds is submitted, isn't it?

Indeed, placing forms around each tab makes the tabs render vertically.

around or inside each tab?

which browser?
Actions

Go to original post