Primefaces Mobile template facelets

Question

Primefaces Mobile template facelets

1.2k Views Asked by gfinotti At 04 April 2025 at 20:02

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>

Original Q&A

There are 1 best solutions below

**Alan B. Dee** · Answer 1

I'm still deciding what I like better. Having a template wrapper or nested re-usable components. Right now I have both so I will share what I have.

webapp/mobile/index.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<ui:composition
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:peloton="http://java.sun.com/jsf/composite/peloton"
                xmlns:pm="http://primefaces.org/mobile"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/templates/mobile-template.xhtml">

    <ui:param name="title" value="#{globalMessages.actionItems}" />

    <ui:define name="metadata">
    </ui:define>

    <ui:define name="heading">
        #{globalMessages.home}
    </ui:define>

    <ui:define name="help">
        Show Help Info
    </ui:define>

    <ui:define name="content">
        <peloton:mobileToolbar header="Show Action Items"/>
        Additional content here
    </ui:define>

</ui:composition>

webapp/WEB-INF/templates/mobile-template.xhtml

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:pm="http://primefaces.org/mobile"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:p="http://primefaces.org/ui">
<f:view renderKitId="PRIMEFACES_MOBILE"/>
<h:head>
    <link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/mobile-theme/s7i-mobile.css?ver=${applicationInfoManager.versionNumber}"/>
    <link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/mobile.css?ver=${applicationInfoManager.versionNumber}" />
    <c:if test="#{applicationInfoManager.isTestDatabase()}">
        <link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/test.css?ver=${applicationInfoManager.versionNumber}" />
    </c:if>
    <ui:insert name="head"/>
    <ui:insert name="metadata"/>
</h:head>

<h:body>
    <ui:insert name="content"/>
    <ui:include src="navs/errorDialogs.xhtml"/>
</h:body>
</html>

webapp/WEB-INF/templates/navs/errorDialogs.xhtml

<?xml version="1.0" encoding="UTF-8"?>

<html
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:peloton="http://java.sun.com/jsf/composite/peloton">
<ui:component>
    <h:form id="site-wide-dialog">

        <ui:include src="idleMonitor.xhtml"/>

        <p:growl id="growl" showDetail="true" life="6000"/>

        <p:dialog id="errorDialog" styleClass="errorDialog"
                      header="#{formName} -  #{globalMessages.errorMessage} "
                      widgetVar="errorMessageDialog" width="400" height="400"
                      appendTo="@(body)">
            <h:panelGroup id="errorMessagesPanel">
                <peloton:errorMessages id="errorMessages"
                                       value="#{errorMessages}"/>
            </h:panelGroup>
            <h:outputText value="#{saveUpdateMessage}"
                          style="font-size: 12px;"/>
        </p:dialog>
    </h:form>
</ui:component>
</html>

The peloton:mobileToolbar is a reusable component, defined in the peloton namespace. These components where setup prior to me taking over maintenance of this application so I'm not sure if there are other steps to configure it. Peloton was the code name for the project.

webapp/resources/peloton/mobileToolbar.xhtml

<?xml version='1.0' encoding='UTF-8' ?>

<html
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:cc="http://java.sun.com/jsf/composite"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:p="http://primefaces.org/ui" >

<!-- INTERFACE -->
<cc:interface>
    <cc:attribute name="header" required="true" targets=""/>
</cc:interface>

<!-- IMPLEMENTATION -->
<cc:implementation>
    <h:form>
        <p:toolbar styleClass="mobile-header">
            <f:facet name="left">
                <p:commandButton id="menu-button" value="Menu" type="button" icon="ui-icon-bullets"/>
                <h1><h:outputText value="#{cc.attrs.header}" /></h1>
            </f:facet>
            <f:facet name="right">
                <h:form>
                    <p:selectOneMenu width="250"
                                     id="defaultLocation"
                                     value="#{menuLocationManager.selectedLocation}" required="true"
                                     valueChangeListener="#{menuLocationManager.defaultLocationVCL}"
                                     immediate="true" render="content">
                        <f:converter binding="#{entityConverter}"/>
                        <f:selectItems value="#{userManager.userLocations}" var="location"
                                       itemValue="#{location}" itemLabel="#{location.name}"/>
                    </p:selectOneMenu>
                </h:form>
            </f:facet>
        </p:toolbar>
        <p:overlayPanel for="menu-button" widgetVar="pnl-basic" at="right" showEffect="overlay">
            <h2>Panel Content</h2>
            <p:menu>
                <p:menuitem value="Normal Site" url="/index.xhtml"/>
                <p:menuitem value="Logout" url="#" action="#{userManager.logout()}"/>
            </p:menu>
        </p:overlayPanel>
    </h:form>
</cc:implementation>
</html>

Primefaces Mobile template facelets

There are 1 best solutions below

Related Questions in MOBILE

Related Questions in JSF-2

Related Questions in FACELETS

Related Questions in PRIMEFACES-MOBILE

Trending Questions

Popular # Hahtags

Popular Questions