I'm developing a mobile application using PrimeFaces Mobile (community PrimeFaces 5.1) and successfully using the navigation between different pages. Now I would like to create a template containing a fixed top and menu and reuses it on all my pages.
The best approach is to use nested pages? Is there another option?
I appreciate if someone can show me a simple example of using template PrimeFaces Mobile with fixed top and/or menu. My code is as below
templateMobile.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:pm="http://primefaces.org/mobile">
<f:view renderKitId="PRIMEFACES_MOBILE" />
<h:head>
<title>.....</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</h:head>
<h:body>
<pm:page id="main">
<pm:content>
<h:form id="formMobile">
<!-- I want to reuse it on all pages -->
<ui:include src="top.xhtml" />
<ui:include src="menu.xhtml" />
</h:form>
</pm:content>
</pm:page>
<pm:page id="content">
<pm:content>
<h:form id="formMobile">
<!-- don´t want to include it on all pages -->
<ui:include src="top.xhtml" />
<ui:include src="menu.xhtml" />
<!-- don´t want to include it on all pages -->
<p:growl id="messages"
showDetail="true"
showSummary="false"
autoUpdate="true" />
<!-- dynamic content -->
<ui:insert name="contentForm" />
</h:form>
</pm:content>
</pm:page>
</h:body>
</html>
page1.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:pm="http://primefaces.org/mobile"
template="templateMobile.xhtml">
<ui:define name="contentForm">
...
</ui:define>
</ui:composition>