I want to define the main menu as a tabPanel in the template.html but am struggling how to approach this. I did it this way but I'm getting lots of problems and am sure there must be a better approach. I'm looking for just a basic example to model this after, of suggestions on using a different approach.
template.html
<div class="body">
<rich:tabPanel switchType="server">
<rich:tab >
<f:facet name="label">
<h:panelGroup>
<h:graphicImage value="/images/home.gif"/>
<h:outputText value=" Home" />
</h:panelGroup>
</f:facet>
<h:panelGrid columns="1">
<ui:insert name="body1">
<ui:include src="test1.xhtml"/>
</ui:insert>
</h:panelGrid>
</rich:tab>
<rich:tab label="Devices">
<h:panelGrid columns="1">
<ui:insert name="body2">
<ui:include src="test2.xhtml"/>
</ui:insert>
</h:panelGrid>
</rich:tab>
<rich:tab label="Services">
<h:panelGrid columns="1">
<ui:insert name="body">
<ui:include src="test3.xhtml"/>
</ui:insert>
</h:panelGrid>
</rich:tab>
</rich:tabPanel>
</div>
test1.html
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:rich="http://richfaces.org/rich"
template="/layout/template.xhtml">
<ui:define name="body">
<h:form>
<h:panelGrid styleClass="blueborder" columns="1">
<h:panelGrid columns="1" width="800">
</h:panelGrid>
<h:panelGrid columns="3" width="800">
<h:outputText styleClass="red1" value="First Name" />
<h:outputText styleClass="red1" value="Last Name" />
<h:outputText styleClass="black1" value="Middle Name" />
<h:inputText size="25" maxlength="50" />
<h:inputText size="20" maxlength="50" />
<h:inputText size="20" maxlength="50" />
</h:panelGrid>
</h:panelGrid>
</h:form>
</ui:define>
</ui:composition>
