Primefaces Mobile 模板 facelets答案

【问题标题】：Primefaces Mobile template faceletsPrimefaces Mobile 模板 facelets
【发布时间】：2014-11-11 12:18:03
【问题描述】：

我正在使用 PrimeFaces Mobile（社区 PrimeFaces 5.1）开发移动应用程序，并成功使用不同页面之间的导航。现在我想创建一个包含固定顶部和菜单的模板，并在我的所有页面上重复使用它。

最好的方法是使用嵌套页面？还有其他选择吗？

如果有人可以向我展示一个使用带有固定顶部和/或菜单的模板 PrimeFaces Mobile 的简单示例，我将不胜感激。我的代码如下

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>

【问题讨论】：

查看 jQuery Mobile 中的工具栏小部件。 demos.jquerymobile.com/1.4.5/toolbar-external

标签： mobile jsf-2 facelets primefaces-mobile

【解决方案1】：

我仍在决定我更喜欢什么。具有模板包装器或嵌套的可重用组件。现在我两者都有，所以我会分享我所拥有的。

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>

peloton:mobileToolbar 是一个可重用的组件，在 peloton 命名空间中定义。这些组件是在我接管此应用程序的维护之前设置的，因此我不确定是否还有其他步骤来配置它。 Peloton 是该项目的代号。

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>

【讨论】：