Primefaces Мобильные шаблоны лица

Question

Primefaces Мобильные шаблоны лица

Я разрабатываю мобильное приложение с использованием 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>

1

mobile jsf-2 facelets primefaces-mobile

Источник

user3545546 11 ноя '14 в 12:18

1 ответ

Другие вопросы по тегам mobile jsf-2 facelets primefaces-mobile

user848926 25 янв '17 в 18:18 2017-01-25 18:18 · Answer 1 · 2017-01-25 18:18

Я все еще решаю, что мне больше нравится. Наличие шаблона оболочки или вложенных повторно используемых компонентов. Прямо сейчас у меня есть оба, поэтому я поделюсь тем, что у меня есть.

WebApp / мобильный /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/ шаблоны / мобильный 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/ шаблоны / 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. Эти компоненты были настроены до того, как я взял на себя обслуживание этого приложения, поэтому я не уверен, есть ли другие шаги для его настройки. Пелотон был кодовым названием для проекта.

WebApp / ресурсы / пелотон / 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>