Primefaces响应式布局– Primefaces Mobile-IGI

时间：2020-02-23 14:41:39 　来源:igfitidea点击:

Primefaces提供了其库的移动版本Primefaces Mobile或者(PFM)。
Primefaces Mobile是一个UI套件，用于为移动设备创建具有响应设计的基于JSF的应用程序。
今天，我们将使用Primefaces Mobile创建一个Primefaces响应式布局。

PFM基于jQuery Mobile库构建，jQuery Mobile库是一种针对触摸优化HTML5 UI框架，为各种移动平台提供支持。

Primefaces响应式布局– Primefaces Mobile

本教程旨在为您提供有关如何利用Primefaces Mobile库并创建适用于移动设备的自适应应用程序的完整说明。

Primefaces移动设置

要开始使用Primefaces mobile，需要其他必需的配置。
即使我们将开发响应式应用程序，也不需要任何其他库，因为该库已经与Primefaces的核心库连接。

要正确配置Primefaces mobile，需要执行以下步骤：

配置：faces配置中必须有一个移动导航处理程序，才能启用移动导航支持。
Taglib：PFM为移动特定组件提供了以下taglib。
RenderKit：RenderKit是Primefaces mobile的核心部分，用于在移动环境中渲染组件。
启用Primefaces Mobile RenderKit的主要方法有两种：如果要在应用程序内的单个页面内使用PFM，则应在页面范围内定义渲染器，但是如果要开发使用以下功能的完整应用程序： PFM，应在应用范围内定义渲染器。
以下两个示例向您展示了如何根据定义的范围定义PFM渲染器。
您可能会问为什么视图标签立即关闭并且在儿童时期不包含任何组件？这是因为facelets视图没有像旧的JSP视图那样将f：view组件视为强制性组件。
它只是用作指示将在包含的视图中使用哪些渲染器的指示器。

Primefaces移动页面

现在该看看如何定义Primefaces Mobile页面。
移动页面是普通的facelets XHTML文件，具有使用pm：page定义的移动页面容器。

index.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<faces-config xmlns="https://xmlns.jcp.org/xml/ns/javaee"
	xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="https://xmlns.jcp.org/xml/ns/javaee https://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd"
	version="2.2">
<application>
	<navigation-handler>
		org.primefaces.mobile.application.MobileNavigationHandler
	</navigation-handler>
</application>
</faces-config>

您已经注意到上面列出的代码中存在一个页面组件。
可以在同一视图中定义多个页面，并且在加载并显示视图后，将自动呈现第一个定义的页面。

让我们来看另一个示例，它阐明了我们如何定义多个页面组件：

index.xhtml

xmlns:pm="https://primefaces.org/mobile"

导航列

作为Primefaces的核心实现，PFM通过添加自定义导航模型支持各种标准导航。
为了在PFM应用程序中实现导航，可以使用以下导航类型中的任何一种：

内部：内部导航用于在单个facelets XHTML视图中定义的所有页面之间导航。

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui"
	xmlns:pm="https://primefaces.org/mobile">
<f:view renderKitId="PRIMEFACES_MOBILE"
</html>

结果为pm ：，然后是页面组件的标识符。
也适用于作为操作执行结果的导航。

<?xml version="1.0" encoding="UTF-8"?>
<faces-config xmlns="https://xmlns.jcp.org/xml/ns/javaee"
	xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="https://xmlns.jcp.org/xml/ns/javaee https://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd"
	version="2.2">
<application>
	<default-render-kit-id>PRIMEFACES_MOBILE</application>
</application>
</faces-config>

外部：外部导航用于在所有这些方面XHTML视图之间导航或者导航到另一个域中的资源。

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui"
	xmlns:pm="https://primefaces.org/mobile">
<f:view renderKitId="PRIMEFACES_MOBILE" 
<h:head>
</h:head>
<h:body>
	<pm:page id="main">
	</pm:page>
</h:body>
</html>

您可以导航到另一个Facelets HXTML视图，也可以导航到另一个外部资源。

转场

Primefaces Mobile支持动画导航，通过将效果名称附加到结果中，您可以获得动画导航(过渡)。
可能的过渡列表是淡入，弹出，翻转，转向，流动，滑动，淡入淡出，向上滑动和向下滑动。
淡入淡出是默认的过渡，因为您可以通过不将其设置为任何值来关闭动画。

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui"
	xmlns:pm="https://primefaces.org/mobile">
<f:view renderKitId="PRIMEFACES_MOBILE" 
<h:head>
</h:head>
<h:body>
	<pm:page id="main">
         <pm:header title="Main Page"></pm:header>
         <pm:content></pm:content>
	</pm:page>
	<pm:page id="second">
         <pm:header title="Second Page"></pm:header>
         <pm:content></pm:content>
	</pm:page>
	<pm:page id="third">
         <pm:header title="Third Page"></pm:header>
         <pm:content></pm:content>
	</pm:page>
</h:body>
</html>

将pm：<< Page-Identifier >>？transition = << Transition-Value >>附加到结果中将帮助您覆盖默认的过渡淡入度值。
提供反向选项用于后退导航。
没有任何值将帮助您关闭动画功能。

客户端API导航

它也适用于使用自定义JavaScript代码进行导航。
PrimeFaces.Mobile.navigate(to，cfg);是用于在页面之间导航的表达式。

<p:button outcome="pm:second" 
<p:link outcome="pm:second"

组件

接下来的几节将讨论用于构建移动页面的所有组件。

页面基本信息

页面是在XHTML中定义内部页面的主要组件。

Tag	Page
Component Class	org.primefaces.mobile.component.page.Page
Component Type	org.primefaces.mobile.Page
Component Family	org.primefaces.mobile.component
Renderer Type	org.primefaces.mobile.component.PageRenderer
Renderer Class	org.primefaces.mobile.component.page.PageRenderer

页面属性

Name	Default	Type	Description
id	null	String	Unique identifier of the component
rendered	true	Boolean	Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding	null	Object	An el expression that maps to a server side UIComponent instance in a backing bean
title	null	String	Title text of the page.
theme	null	String	Swatch of the page.
style	null	String	Inline style of the component.
styleClass	null	String	Style class of the component.
lazy	false	Boolean	Lazy loading views are not rendered on initial page load to improve performance and instead lazily loaded on demand when there are first navigated to.

内容基本信息

内容是页面内容区域的容器组件。

Tag	Content
Component Class	org.primefaces.mobile.component.content.Content
Component Type	org.primefaces.mobile.Content
Component Family	org.primefaces.mobile.component
Renderer Type	org.primefaces.mobile.component.ContentRenderer
Renderer Class	org.primefaces.mobile.component.content.ContentRenderer

内容属性

Name	Default	Type	Description
id	null	String	Unique identifier of the component
rendered	true	Boolean	Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding	null	Object	An el expression that maps to a server side UIComponent instance in a backing bean
style	null	String	Inline style of the component.
styleClass	null	String	Style class of the component.

内容入门

以下示例显示了如何运行与Primefaces mobile相关的最简单的代码。
可以不使用pm：content组件来定义内容，但是请确保这样的用法不切实际，尤其是当您准备整理页面时。

index.xhtml

<p:commandButton value="Go to Second" action="#{bean.go}" 
public String go() {
 return "pm:second";
}

<p:button outcome="/ui/home" value="Home" 
<p:button href="https://www.primefaces.org" value="Home"

现场基本信息

字段是标签输入对的响应式布局组件。

Tag	Field
Component Class	org.primefaces.mobile.component.field.Field
Component Type	org.primefaces.mobile.Field
Component Family	org.primefaces.mobile.component
Renderer Type	org.primefaces.mobile.component.FieldRenderer
Renderer Class	org.primefaces.mobile.component.field.FieldRenderer

字段属性

Name	Default	Type	Description
id	null	String	Unique identifier of the component
rendered	true	Boolean	Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding	null	Object	An el expression that maps to a server side UIComponent instance in a backing bean

领域入门

字段用作标签和输入组件的容器。
作为响应组件，字段根据可用宽度显示其子项的最佳位置。
这次，您将看到两个示例，一个带有pm：content，另一个没有p：content。

index.xhtml

<p:button outcome="pm:second?transition=pop" 
<p:link outcome="pm:second?transition=flip&reverse=true" 
<p:button outcome="pm:second?transition=none"

index.xhtml

PrimeFaces.Mobile.navigate('#second', {
reverse: true|false,
transition: 'fade'
});

如果您是使用pm：container定义页面的，那么您会发现它更适合页面宽度，而消除pm：content则相反。
使用pm：field是为了确保显示输入和输出组件对的顺序正确。

标头基本信息

标头是页面顶部区域的容器组件。

Tag	Header
Component Class	org.primefaces.mobile.component.header.Header
Component Type	org.primefaces.mobile.Header
Component Family	org.primefaces.mobile.component.Header
Renderer Type	org.primefaces.mobile.component.HeaderRenderer
Renderer Class	org.primefaces.mobile.component.header.HeaderRenderer

标头属性

Name	Default	Type	Description
id	null	String	Unique identifier of the component
rendered	true	Boolean	Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding	null	Object	An el expression that maps to a server side UIComponent instance in a backing bean
title	null	String	Title text of the header.
fixed	false	Boolean	Positions the header as fixed on scroll.
theme	null	String	Swatch of the component.
style	null	String	Inline style of the component.
styleClass	null	String	Style class of the component.

页脚基本信息

页脚是页面底部的容器组件。

Tag	Footer
Component Class	org.primefaces.mobile.component.footer.Footer
Component Type	org.primefaces.mobile.Footer
Component Family	org.primefaces.mobile.component
Renderer Type	org.primefaces.mobile.component.FooterRenderer
Renderer Class	org.primefaces.mobile.component.footer.FooterRenderer

页脚属性

Name	Default	Type	Description
id	null	String	Unique identifier of the component
rendered	true	Boolean	Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding	null	Object	An el expression that maps to a server side UIComponent instance in a backing bean
title	null	String	Title text of the footer.
fixed	false	Boolean	Positions the footer as fixed on scroll.
theme	null	String	Swatch of the component.
tapToggle	true	Boolean	For fixed footers, sets whether the fixed toolbar's visibility can be toggled by tapping on the page.
style	null	String	Inline style of the component.
styleClass	null	String	Style class of the component.

页眉和页脚入门

index.xhtml

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui"
	xmlns:pm="https://primefaces.org/mobile">
<f:view renderKitId="PRIMEFACES_MOBILE" 
<h:head>
</h:head>
<h:body>
	<pm:page>
		<pm:content>
			<p:outputLabel value="Hello theitroad !"></p:outputLabel>
		</pm:content>
	</pm:page>
</h:body>
</html>

InputSlider基本信息

InputSlider是具有触摸启用滑块的输入组件。

Tag	InputSlider
Component Class	org.primefaces.mobile.component.inputslider.InputSlider
Component Type	org.primefaces.mobile.InputSlider
Component Family	org.primefaces.mobile.component.
Renderer Type	org.primefaces.mobile.component.InputSliderRenderer
Renderer Class	org.primefaces.mobile.component.inputslider.InputSliderRenderer

InputSlider属性

Name	Default	Type	Description
id	null	String	Unique identifier of the component
rendered	true	Boolean	Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding	null	Object	An el expression that maps to a server side UIComponent instance in a backing bean
value	null	Object	Value of the component.
converter	null	Object	An el expression or a literal text that defines a converter for the component. When it’s an EL expression, it’s resolved to a converter instance. In case it’s a static text, it must refer to a converter id.
immediate	false	Boolean	When set true, process validations logic is executed at apply request values phase for this component.
required	false	Boolean	Marks component as required
validator	null	Object	A method binding expression that refers to a method validationg the input.
valueChangeListener	null	Object	A method binding expression that refers to a method for handling a valuechangeevent.
requiredMessage	null	String	Message to be displayed when required field validation fails.
converterMessage	null	String	Message to be displayed when conversion fails.
validatorMessage	null	String	Message to be displayed when validation fields.
minValue	0	Integer	Minimum value of the slider.
maxValue	100	Integer	Maximum value of the slider.
style	null	String	Inline style of the component.
styleClass	null	String	Style class of the component.
step	1	String	Step factor to apply on slider move.
disabled	false	Boolean	Disables or enables the slider.
label	null	String	User presentable name.
highlight	false	Boolean	Highlights the value range when enabled.

InputSlider入门

InputSlider需要一个Integer作为其值。

index.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<faces-config xmlns="https://xmlns.jcp.org/xml/ns/javaee"
	xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="https://xmlns.jcp.org/xml/ns/javaee https://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd"
	version="2.2">
<application>
	<navigation-handler>
		org.primefaces.mobile.application.MobileNavigationHandler
	</navigation-handler>
</application>
</faces-config>

RangeSlider基本信息

RangeSlider是用于双滑块创建范围选择的分组组件。
RangeSlider需要两个InputSlider作为子级，第一个滑块用于开始范围，第二个滑块用于结束范围。

Tag	RangeSlider
Component Class	org.primefaces.mobile.component.rangeslider.RangeSlider
Component Type	org.primefaces.mobile.RangeSlider
Component Family	org.primefaces.mobile.component
Renderer Type	org.primefaces.mobile.component.RangeSlider
Renderer Class	org.primefaces.mobile.component.rangeslider.RangeSlider

RangeSlider属性

Name	Default	Type	Description
id	null	String	Unique identifier of the component
rendered	true	Boolean	Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding	null	Object	An el expression that maps to a server side UIComponent instance in a backing bean
style	null	String	Inline style of the component.
styleClass	null	String	Style class of the component.
highlight	false	Boolean	Highlights the value range when enabled.

RangeSlider入门

index.xhtml

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui"
	xmlns:pm="https://primefaces.org/mobile">
<f:view renderKitId="PRIMEFACES_MOBILE" 
<h:head>
</h:head>
<h:body>
	<pm:page>
		<pm:content>
			<pm:field>
				<p:outputLabel value="Enter Username"></p:outputLabel>
				<p:inputText vaue=""></p:inputText>
			</pm:field>
			<pm:field>
				<p:outputLabel value="Enter Password"></p:outputLabel>
				<p:password vaue=""></p:password>
			</pm:field>
			<pm:field>
				<p:commandButton value="Login"></p:commandButton>
			</pm:field>
		</pm:content>
	</pm:page>
</h:body>
</html>

切换基本信息

开关是选择布尔值的输入组件。
switch的值应为布尔型属性。
如果值为假，将显示offLabel，否则将使用onLabel。

Tag	Switch
Component Class	org.primefaces.mobile.component.uiswitch.UISwitch
Component Type	org.primefaces.mobile.UISwitch
Component Family	org.primefaces.mobile.component
Renderer Type	org.primefaces.mobile.component.UISwitchRenderer
Renderer Class	org.primefaces.mobile.component.uiswitch.UISwitchRenderer

开关属性

Name	Default	Type	Description
id	null	String	Unique identifier of the component
rendered	true	Boolean	Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding	null	Object	An el expression that maps to a server side UIComponent instance in a backing bean
value	null	Object	Value of the component.
converter	null	Object	An el expression or a literal text that defines a converter for the component. When it’s an EL expression, it’s resolved to a converter instance. In case it’s a static text, it must refer to a converter id.
immediate	false	Boolean	When set true, process validations logic is executed at apply request values phase for this component.
required	false	Boolean	Marks component as required
validator	null	Object	A method binding expression that refers to a method validationg the input.
valueChangeListener	null	Object	A method binding expression that refers to a method for handling a valuechangeevent.
requiredMessage	null	String	Message to be displayed when required field validation fails.
converterMessage	null	String	Message to be displayed when conversion fails.
validatorMessage	null	String	Message to be displayed when validation fields.
onLabel	on	Integer	Minimum value of the slider.
offLabel	off	Integer	Maximum value of the slider.
label	null	String	User presentable name.
style	null	String	Inline style of the component.
styleClass	null	String	Style class of the component.
label	null	String	User presentable name.
disabled	false	Boolean	Disables or enables the switch.
onchange	false	String	Client side callback to execute on change event.

开关入门

index.xhtml

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui"
	xmlns:pm="https://primefaces.org/mobile">
<f:view renderKitId="PRIMEFACES_MOBILE" 
<h:head>
</h:head>
<h:body>
	<pm:page>

			<pm:field>
				<p:outputLabel value="Enter Username"></p:outputLabel>
				<p:inputText vaue=""></p:inputText>
			</pm:field>
			<pm:field>
				<p:outputLabel value="Enter Password"></p:outputLabel>
				<p:password vaue=""></p:password>
			</pm:field>
			<pm:field>
				<p:commandButton value="Login"></p:commandButton>
			</pm:field>

	</pm:page>
</h:body>
</html>

实施内部导航示例

以下示例显示了如何利用Primefaces的p：button和p：link组件从一个页面导航到另一页面。

index.xhtml

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui"
	xmlns:pm="https://primefaces.org/mobile">
<f:view renderKitId="PRIMEFACES_MOBILE" 
<h:head>
</h:head>
<h:body>
	<pm:page>
		<pm:header>
			<p:outputLabel value="Login Into theitroad"></p:outputLabel>
		</pm:header>
		<pm:content>
			<pm:field>
				<p:outputLabel value="Enter Username"></p:outputLabel>
				<p:inputText vaue=""></p:inputText>
			</pm:field>
			<pm:field>
				<p:outputLabel value="Enter Password"></p:outputLabel>
				<p:password vaue=""></p:password>
			</pm:field>
			<pm:field>
				<p:commandButton value="Login"></p:commandButton>
			</pm:field>
		</pm:content>
		<pm:footer>
			<p:outputLabel value="All copyrights @ reserved for theitroad.local"></p:outputLabel>
		</pm:footer>
	</pm:page>
</h:body>
</html>

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui"
	xmlns:pm="https://primefaces.org/mobile">
<f:view renderKitId="PRIMEFACES_MOBILE" 
<h:head>
</h:head>
<h:body>
	<pm:page>
		<pm:header>
			<p:outputLabel value="Login Into theitroad"></p:outputLabel>
		</pm:header>
		<pm:content>
			<pm:field>
				<p:outputLabel value="Enter Username"></p:outputLabel>
				<p:inputText vaue=""></p:inputText>
			</pm:field>
			<pm:field>
				<p:outputLabel value="Enter Password"></p:outputLabel>
				<p:password vaue=""></p:password>
			</pm:field>
			<pm:field>
				<p:commandButton value="Login"></p:commandButton>
			</pm:field>
			<pm:inputSlider></pm:inputSlider>
		</pm:content>
		<pm:footer>
			<p:outputLabel value="All copyrights @ reserved for theitroad.local"></p:outputLabel>
		</pm:footer>
	</pm:page>
</h:body>
</html>

以下是上一个示例中发生的情况的详细说明：

如果您要提交表单，则必须位于pm：content内。
提交的操作必须绑定到String返回值方法中。
导航处理程序使用此返回值来指定它将显示的下一页。
使用表达式pm：<<页面的标识符>>是确定下一个视图将位于哪个页面的有效方法。
您可以传递任何想要的值，数据或者进行验证，就像使用Primefaces core开发的任何表格一样。

实施外部导航示例

实际上，应用程序将包含不同类型的导航。
可能是同一应用程序中的另一个视图-从技术上来说是另一个facelets视图-或者可能是已在全球发布的外部资源。

index.xhtml

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui"
	xmlns:pm="https://primefaces.org/mobile">
<f:view renderKitId="PRIMEFACES_MOBILE" 
<h:head>
</h:head>
<h:body>
	<pm:page>
		<pm:header>
			<p:outputLabel value="Login Into theitroad"></p:outputLabel>
		</pm:header>
		<pm:content>
			<pm:field>
				<p:outputLabel value="Enter Username"></p:outputLabel>
				<p:inputText vaue=""></p:inputText>
			</pm:field>
			<pm:field>
				<p:outputLabel value="Enter Password"></p:outputLabel>
				<p:password vaue=""></p:password>
			</pm:field>
			<pm:field>
				<p:commandButton value="Login"></p:commandButton>
			</pm:field>
			<pm:inputSlider></pm:inputSlider>
			<pm:rangeSlider>
				<pm:inputSlider></pm:inputSlider>
				<pm:inputSlider></pm:inputSlider>
			</pm:rangeSlider>
		</pm:content>
		<pm:footer>
			<p:outputLabel value="All copyrights @ reserved for theitroad.local"></p:outputLabel>
		</pm:footer>
	</pm:page>
</h:body>
</html>

atTheSameDomainView.xhtml

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui"
	xmlns:pm="https://primefaces.org/mobile">
<f:view renderKitId="PRIMEFACES_MOBILE" 
<h:head>
</h:head>
<h:body>
	<pm:page>
		<pm:header>
			<p:outputLabel value="Login Into theitroad"></p:outputLabel>
		</pm:header>
		<pm:content>
			<pm:field>
				<p:outputLabel value="Enter Username"></p:outputLabel>
				<p:inputText vaue=""></p:inputText>
			</pm:field>
			<pm:field>
				<p:outputLabel value="Enter Password"></p:outputLabel>
				<p:password vaue=""></p:password>
			</pm:field>
			<pm:field>
				<p:commandButton value="Login"></p:commandButton>
			</pm:field>
			<pm:inputSlider></pm:inputSlider>
			<pm:rangeSlider>
				<pm:inputSlider></pm:inputSlider>
				<pm:inputSlider></pm:inputSlider>
			</pm:rangeSlider>
			<pm:switch offLabel="Off" onLabel="On"></pm:switch>
		</pm:content>
		<pm:footer>
			<p:outputLabel value="All copyrights @ reserved for theitroad.local"></p:outputLabel>
		</pm:footer>
	</pm:page>
</h:body>
</html>

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui"
	xmlns:pm="https://primefaces.org/mobile">
<f:view renderKitId="PRIMEFACES_MOBILE" 
<h:head>
</h:head>
<h:body>
	<pm:page id="login">
		<pm:header>
			<p:outputLabel value="Login Into theitroad"></p:outputLabel>
		</pm:header>
		<pm:content>
			<h:form id="loginForm">
				<pm:field>
					<p:outputLabel value="Enter Username"></p:outputLabel>
					<p:inputText id="username" value="#{mobileManagedBean.username}"></p:inputText>
				</pm:field>
				<pm:field>
					<p:outputLabel value="Enter Password"></p:outputLabel>
					<p:password id="password" value="#{mobileManagedBean.password}"></p:password>
				</pm:field>
				<p:commandButton value="Login" action="#{mobileManagedBean.login}"></p:commandButton>
			</h:form>
		</pm:content>
		<pm:footer>
			<p:outputLabel value="All copyrights @ reserved for theitroad.local"></p:outputLabel>
		</pm:footer>
	</pm:page>
	<pm:page id="success">
		<pm:content>
			<p:outputLabel value="You've logged in successfully"></p:outputLabel>
			<p:button value="Back" outcome="pm:login"></p:button>
		</pm:content>
	</pm:page>
	<pm:page id="failure">
		<pm:content>
			<p:outputLabel value="You've failed to log in"></p:outputLabel>
			<p:button value="Back" outcome="pm:login"></p:button>
		</pm:content>
	</pm:page>
</h:body>
</html>

实施过渡导航示例

这还不是全部故事，一旦导航发生，您可以通过提供某种动画形式来自定义内部导航。

index.xhtml

package com.theitroad.prime.faces.beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class MobileManagedBean {

	private String username = "";
	private String password = "";

	public String getUsername() {
		return username;
	}

	public void setUsername(String username) {
		this.username = username;
	}

	public String getPassword() {
		return password;
	}

	public void setPassword(String password) {
		this.password = password;
	}

	public String login(){
		if(this.username != null && this.username.equals("admin") &&
				this.password != null && this.password.equals("admin")){
			return "pm:success";
		}
		return "pm:failure";
	}
}

通过添加transition = << transitionType >>，您将获得动画导航。

实施客户端API导航示例

现在，让我们简短地说明一下，如何使用客户端API实现所需的导航。

index.xhtml

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui"
	xmlns:pm="https://primefaces.org/mobile">
<f:view renderKitId="PRIMEFACES_MOBILE" 
<h:head>
</h:head>
<h:body>
	<pm:page id="login">
		<pm:header>
			<p:outputLabel value="Login Into theitroad"></p:outputLabel>
		</pm:header>
		<pm:content>
			<h:form id="loginForm">
				<pm:field>
					<p:outputLabel value="Enter Username"></p:outputLabel>
					<p:inputText id="username" value="#{mobileManagedBean.username}"></p:inputText>
				</pm:field>
				<pm:field>
					<p:outputLabel value="Enter Password"></p:outputLabel>
					<p:password id="password" value="#{mobileManagedBean.password}"></p:password>
				</pm:field>
				<p:commandButton value="Login" action="#{mobileManagedBean.login}"></p:commandButton>
			</h:form>
		</pm:content>
		<pm:footer>
			<p:outputLabel value="All copyrights @ reserved for theitroad.local"></p:outputLabel>
		</pm:footer>
	</pm:page>
	<pm:page id="success">
		<pm:content>
			<p:outputLabel value="You've logged in successfully"></p:outputLabel>
			<p:button value="External Navigation - Same Domain View" outcome="/atTheSameDomainView.xhtml"></p:button>
			<p:button value="External Navigation - Different Domain View" href="https://www.theitroad.local"></p:button>
			<p:button value="Back" outcome="pm:login"></p:button>
		</pm:content>
	</pm:page>
	<pm:page id="failure">
		<pm:content>
			<p:outputLabel value="You've failed to log in"></p:outputLabel>
			<p:button value="Back" outcome="pm:login"></p:button>
		</pm:content>
	</pm:page>
</h:body>
</html>

Primefaces响应式布局– Primefaces Mobile