primefaces
Primefaces provides a mobile version of its library, Primefaces Mobile or (PFM). Primefaces Mobile is a UI kit to create a JSF based application with responsive design for mobile devices. Today we will create a Primefaces responsive layout using Primefaces Mobile.
Primefaces提供了其库的移动版本，即Primefaces Mobile或（PFM） 。 Primefaces Mobile是一个UI套件，用于为移动设备创建具有响应设计的基于JSF的应用程序。 今天，我们将使用Primefaces Mobile创建一个Primefaces响应式布局。
PFM is built on top of jQuery Mobile library that is a touch-optimized HTML5 UI framework, providing support for various mobile platforms.
PFM基于jQuery Mobile库构建， jQuery Mobile库是一种针对触摸优化HTML5 UI框架 ，为各种移动平台提供支持。
Primefaces响应式布局– Primefaces Mobile (Primefaces Responsive Layout – Primefaces Mobile)
This tutorial is intended to provide you a full-fledged explanations for how you could leverage Primefaces Mobile library and create responsive applications suitable for mobile devices too.
本教程旨在为您提供有关如何利用Primefaces Mobile库并创建适用于移动设备的自适应应用程序的完整说明。
Primefaces移动设置 (Primefaces Mobile Setup)
For getting started with Primefaces mobile, additional required configurations are needed. Even though we’re going to develop a responsive application, there is no need for any additional libraries because it’s already attached with the core library of Primefaces.
要开始使用Primefaces mobile，需要其他必需的配置。 即使我们将开发响应式应用程序，也不需要任何其他库，因为它已经与Primefaces的核心库连接。
Following steps are required for proper configuration of Primefaces mobile:
要正确配置Primefaces mobile，需要执行以下步骤：
- Configuration: A mobile navigation handler is necessary inside faces configuration to enable mobile navigation support.
faces-config.xml
配置：必须在面部配置中使用移动导航处理程序才能启用移动导航支持。<?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>faces-config.xml - Taglib: PFM provided mobile specific components with the following taglib.
Taglib ：PFM为移动特定组件提供了以下taglib。xmlns:pm="https://primefaces.org/mobile" - RenderKit: RenderKit is the core part of Primefaces mobile, it’s used for rendering the components against mobile environments. There are two main ways to enable Primefaces Mobile RenderKit: If you’re going to use PFM inside a single page within your application, the renderer should be defined at the page scope, but if you’re going to develop a full application that uses PFM, the renderer should be defined at the application scope. Following two samples show you how can define PFM renderer with respective to defined scopes.
RenderKit ：RenderKit是Primefaces mobile的核心部分，用于在移动环境中渲染组件。 启用Primefaces Mobile RenderKit的主要方法有两种：如果要在应用程序内的单个页面内使用PFM，则应在页面范围内定义渲染器，但如果要开发使用以下功能的完整应用程序： PFM，应在应用范围内定义渲染器。 以下两个示例向您展示了如何根据定义的范围定义PFM渲染器。<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> - You may be asking about why the view tag is closed instantly and it doesn’t include any components as a child? That’s because the facelets view doesn’t consider an f:view component as a mandatory like old JSP view. It’s just used as an indicator for which of renderers would be used at the contained view.
您可能会问为什么视图标签立即关闭并且在儿童时期不包含任何组件？ 这是因为facelets视图没有像旧的JSP视图那样将f：view组件视为强制性组件。 它仅用作指示将在包含的视图中使用哪些渲染器的指示符。<?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>
Primefaces移动页面 (Primefaces Mobile Pages)
It’s time to take a look at the how can we define a Primefaces Mobile page. A mobile page is a normal facelets XHTML file with mobile page containers defined using pm:page.
现在该看看如何定义Primefaces Mobile页面了。 移动页面是具有使用pm：page定义的移动页面容器的普通facelets XHTML文件。
index.xhtml
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="main">
</pm:page>
</h:body>
</html>- You’ve noticed existence of one single page component in the listed code above. It’s possible to define more than one page at the same view and the first defined page will be rendered automatically once the view got loaded and displayed. 您已经注意到上面列出的代码中存在一个单页组件。 可以在同一视图中定义多个页面，并且在加载并显示视图后，将自动呈现第一个定义的页面。
Let’s see another example clarifies you how can we define more than one page components:
让我们看另一个示例，它阐明了如何定义多个页面组件：
index.xhtml
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="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>导航栏 ()
As core implementation of Primefaces, PFM supports all kinds of standard navigations with the addition of a custom navigation model. In order to implement a navigation inside your PFM application you can use any type from the following navigation types:
作为Primefaces的核心实现，PFM通过添加自定义导航模型来支持各种标准导航。 为了在PFM应用程序中实现导航，可以使用以下导航类型中的任何一种：
- Internal: Internal navigation is used for navigating between all of those pages defined in a single facelets XHTML view. 内部：内部导航用于在单个facelets XHTML视图中定义的所有页面之间导航。
<p:button outcome="pm:second" />
<p:link outcome="pm:second" />- The outcome is a pm: followed with the identifier of the page component. Is also applicable to navigate as a result of action execution. 结果是pm ：，然后是页面组件的标识符。 也适用于作为操作执行结果的导航。
<p:commandButton value="Go to Second" action="#{bean.go}" />
public String go() {
return "pm:second";
}- External: External navigation is used for navigating between all of those faceltes XHTML views or into a resources that are located in another domain. 外部：外部导航用于在所有这些方面XHTML视图之间导航或导航到另一个域中的资源。
<p:button outcome="/ui/home" value="Home" />
<p:button href="https://www.primefaces.org" value="Home" />- You can navigate into another facelets HXTML view as you can navigate into another external resource. 您可以导航到另一个Facelets HXTML视图，也可以导航到另一个外部资源。
转场 (Transitions)
Primefaces Mobile has supported animated navigations, by appending the effect name to the outcome you can get animated navigation (Transitions). List of possible transitions is fade, pop, flip, turn, flow, slide, slidefade, slideup and slidedown. Fade is the default transition as you can turn off animation by setting none as a value.
Primefaces Mobile支持动画导航，通过将效果名称附加到结果中，您可以获得动画导航（过渡）。 可能的过渡列表是淡入淡出，弹出，翻转，转向，流动，滑动，淡入淡出，向上滑动和向下滑动 。 淡入淡出是默认的过渡，因为您可以通过不设置动画为值来关闭动画。
<p:button outcome="pm:second?transition=pop" />
<p:link outcome="pm:second?transition=flip&reverse=true" />
<p:button outcome="pm:second?transition=none" />- Append pm:<<Page-Identifier>>?transition=<<Transition-Value>> into your outcome will help you make overriding for the default transition Fade value. 在结果中附加pm：<< Page-Identifier >>？transition = << Transition-Value >>将有助于您覆盖默认的过渡淡入度值。
- Reverse option is provided for back navigations. 提供反向选项用于后退导航。
- None value will help you turn off animation facility. 没有值将帮助您关闭动画功能。
客户端API导航 ()
It’s also applicable to use custom JavaScript code to make a navigation. PrimeFaces.Mobile.navigate(to,cfg); is the expression used for navigating between your pages.
它也适用于使用自定义JavaScript代码进行导航。 PrimeFaces.Mobile.navigate（to，cfg）; 是用于在页面之间导航的表达式。
PrimeFaces.Mobile.navigate('#second', {
reverse: true|false,
transition: 'fade'
});组件 (Components)
Next coming sections will discuss the all components that you would use to build up your mobile pages.
接下来的几节将讨论用于构建移动页面的所有组件。
页面基本信息 (Page Basic Info)
Page is main component to define an internal page within an XHTML.
页面是在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 |
| 标签 | 页 |
|---|---|
| 组件类别 | org.primefaces.mobile.component.page.Page |
| 组件类型 | org.primefaces.mobile.Page |
| 组件族 | org.primefaces.mobile.component |
| 渲染器类型 | org.primefaces.mobile.component.PageRenderer |
| 渲染器类 | org.primefaces.mobile.component.page.PageRenderer |
页面属性 (Page Attributes)
| 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. |
| 名称 | 默认 | 类型 | 描述 |
|---|---|---|---|
| ID | 空值 | 串 | 组件的唯一标识符 |
| 呈现 | 真正 | 布尔型 | 布尔值，用于指定组件的呈现，当设置为false时将不呈现组件。 |
| 捆绑 | 空值 | 目的 | El表达式，它映射到支持Bean中的服务器端UIComponent实例 |
| 标题 | 空值 | 串 | 页面标题文本。 |
| 主题 | 空值 | 串 | 页面的色板。 |
| 样式 | 空值 | 串 | 组件的内联样式。 |
| styleClass | 空值 | 串 | 组件的样式类。 |
| 懒 | 假 | 布尔型 | 延迟加载视图不会在初始页面加载时呈现，以提高性能，而是在首次导航到时按需延迟加载。 |
内容基本信息 (Content Basic Info)
Content is a container component for the content area of a page.
内容是页面内容区域的容器组件。
| 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 |
| 标签 | 内容 |
|---|---|
| 组件类别 | org.primefaces.mobile.component.content.Content |
| 组件类型 | org.primefaces.mobile.Content |
| 组件族 | org.primefaces.mobile.component |
| 渲染器类型 | org.primefaces.mobile.component.ContentRenderer |
| 渲染器类 | org.primefaces.mobile.component.content.ContentRenderer |
内容属性 (Content Attributes)
| 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. |
| 名称 | 默认 | 类型 | 描述 |
|---|---|---|---|
| ID | 空值 | 串 | 组件的唯一标识符 |
| 呈现 | 真正 | 布尔型 | 布尔值，用于指定组件的呈现，当设置为false时将不呈现组件。 |
| 捆绑 | 空值 | 目的 | El表达式，它映射到支持Bean中的服务器端UIComponent实例 |
| 样式 | 空值 | 串 | 组件的内联样式。 |
| styleClass | 空值 | 串 | 组件的样式类。 |
内容入门 (Getting Started With Content)
Following sample shows you how can run the most simplest code related for Primefaces mobile. It’s possible to define your content without using of pm:content component, but for sure such that usage isn’t practical especially when you’re coming to arrange your page.
以下示例显示了如何运行与Primefaces mobile相关的最简单的代码。 可以在不使用pm：content组件的情况下定义您的内容，但是请确保这样的用法不切实际，尤其是在您打算布置页面时。
index.xhtml
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 JournalDev !"></p:outputLabel>
</pm:content>
</pm:page>
</h:body>
</html><?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>现场基本信息 (Field Basic Info)
Field is a responsive layout component for label-input pairs.
字段是标签输入对的响应式布局组件。
| 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 |
| 标签 | 领域 |
|---|---|
| 组件类别 | org.primefaces.mobile.component.field.Field |
| 组件类型 | org.primefaces.mobile.Field |
| 组件族 | org.primefaces.mobile.component |
| 渲染器类型 | org.primefaces.mobile.component.FieldRenderer |
| 渲染器类 | org.primefaces.mobile.component.field.FieldRenderer |
字段属性 (Field Attributes)
| 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 |
| 名称 | 默认 | 类型 | 描述 |
|---|---|---|---|
| ID | 空值 | 串 | 组件的唯一标识符 |
| 呈现 | 真正 | 布尔型 | 布尔值，用于指定组件的呈现，当设置为false时将不呈现组件。 |
| 捆绑 | 空值 | 目的 | El表达式，它映射到支持Bean中的服务器端UIComponent实例 |
领域入门 (Getting Started With Field)
Field is used as the container of a label and an input component. As a responsive component, field displays the optimal placement for its children based on available width. This time, you would see two samples, one with pm:content and the second without p:content.
字段用作标签和输入组件的容器。 作为响应组件，字段根据可用宽度显示其子项的最佳位置。 这次，您将看到两个示例，一个带有pm：content，另一个没有p：content。
index.xhtml
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>index.xhtml
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>- If you’ve defined your page using pm:container, you would notice that it’s more fit with the page width as opposite for eliminating pm:content. 如果您使用pm：container定义了页面，则会注意到页面宽度与消除pm：content相反更适合。
- Using of pm:field is to make sure that displaying pairs of input and output components is ordered nicely. 使用pm：field可以确保显示输入和输出组件对的顺序很好。
标头基本信息 (Header Basic Info)
Header is a container component for the top area of a page.
标头是页面顶部区域的容器组件。
| 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 |
| 标签 | 标头 |
|---|---|
| 组件类别 | org.primefaces.mobile.component.header.Header |
| 组件类型 | org.primefaces.mobile.Header |
| 组件族 | org.primefaces.mobile.component.Header |
| 渲染器类型 | org.primefaces.mobile.component.HeaderRenderer |
| 渲染器类 | org.primefaces.mobile.component.header.HeaderRenderer |
标头属性 (Header Attributes)
| 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. |
| 名称 | 默认 | 类型 | 描述 |
|---|---|---|---|
| ID | 空值 | 串 | 组件的唯一标识符 |
| 呈现 | 真正 | 布尔型 | 布尔值，用于指定组件的呈现，当设置为false时将不呈现组件。 |
| 捆绑 | 空值 | 目的 | El表达式，它映射到支持Bean中的服务器端UIComponent实例 |
| 标题 | 空值 | 串 | 标头的标题文本。 |
| 固定 | 假 | 布尔型 | 将页眉固定在滚动条上。 |
| 主题 | 空值 | 串 | 组件的色板。 |
| 样式 | 空值 | 串 | 组件的内联样式。 |
| styleClass | 空值 | 串 | 组件的样式类。 |
页脚基本信息 ()
Footer is a container component for the bottom area of the page.
页脚是页面底部的容器组件。
| 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 |
| 标签 | 页脚 |
|---|---|
| 组件类别 | org.primefaces.mobile.component.footer.Footer |
| 组件类型 | org.primefaces.mobile.Footer |
| 组件族 | org.primefaces.mobile.component |
| 渲染器类型 | org.primefaces.mobile.component.FooterRenderer |
| 渲染器类 | 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. |
| 名称 | 默认 | 类型 | 描述 |
|---|---|---|---|
| ID | 空值 | 串 | 组件的唯一标识符 |
| 呈现 | 真正 | 布尔型 | 布尔值，用于指定组件的呈现，当设置为false时将不呈现组件。 |
| 捆绑 | 空值 | 目的 | El表达式，它映射到支持Bean中的服务器端UIComponent实例 |
| 标题 | 空值 | 串 | 页脚的标题文本。 |
| 固定 | 假 | 布尔型 | 将页脚固定在滚动条上。 |
| 主题 | 空值 | 串 | 组件的色板。 |
| 点击切换 | 真正 | 布尔型 | 对于固定页脚，设置是否可以通过在页面上点击来切换固定工具栏的可见性。 |
| 样式 | 空值 | 串 | 组件的内联样式。 |
| styleClass | 空值 | 串 | 组件的样式类。 |
页眉和页脚入门 ()
index.xhtml
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 JournalDev"></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 Journaldev.com"></p:outputLabel>
</pm:footer>
</pm:page>
</h:body>
</html>InputSlider基本信息 (InputSlider Basic Info)
InputSlider is an input component with a touch enabled slider.
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 |
|---|---|
| 组件类别 | org.primefaces.mobile.component.inputslider.InputSlider |
| 组件类型 | org.primefaces.mobile.InputSlider |
| 组件族 | org.primefaces.mobile.component。 |
| 渲染器类型 | org.primefaces.mobile.component.InputSliderRenderer |
| 渲染器类 | org.primefaces.mobile.component.inputslider.InputSliderRenderer |
InputSlider属性 (InputSlider Attributes)
| 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. |
| 名称 | 默认 | 类型 | 描述 |
|---|---|---|---|
| ID | 空值 | 串 | 组件的唯一标识符 |
| 呈现 | 真正 | 布尔型 | 布尔值，用于指定组件的呈现，当设置为false时将不呈现组件。 |
| 捆绑 | 空值 | 目的 | El表达式，它映射到支持Bean中的服务器端UIComponent实例 |
| 值 | 空值 | 目的 | 组件的值。 |
| 转换器 | 空值 | 目的 | El表达式或文字文本，定义了组件的转换器。 当是EL表达式时，它将解析为转换器实例。 如果是静态文本，则必须引用转换器ID。 |
| 即时 | 假 | 布尔型 | 设置为true时，将在此组件的应用请求值阶段执行流程验证逻辑。 |
| 需要 | 假 | 布尔型 | 根据需要标记组件 |
| 验证器 | 空值 | 目的 | 方法绑定表达式，它引用输入的方法验证。 |
| valueChangeListener | 空值 | 目的 | 方法绑定表达式，该表达式引用用于处理valuechangeevent的方法。 |
| requiredMessage | 空值 | 串 | 必填字段验证失败时显示的消息。 |
| converterMessage | 空值 | 串 | 转换失败时显示的消息。 |
| 验证器消息 | 空值 | 串 | 验证字段时显示的消息。 |
| 最小值 | 0 | 整数 | 滑块的最小值。 |
| maxValue | 100 | 整数 | 滑块的最大值。 |
| 样式 | 空值 | 串 | 组件的内联样式。 |
| styleClass | 空值 | 串 | 组件的样式类。 |
| 步 | 1个 | 串 | 适用于滑块移动的步长因子。 |
| 残障人士 | 假 | 布尔型 | 禁用或启用滑块。 |
| 标签 | 空值 | 串 | 用户可显示的名称。 |
| 突出 | 假 | 布尔型 | 启用时突出显示值范围。 |
InputSlider入门 (Getting Started With InputSlider)
InputSlider requires an Integer as its value.
InputSlider需要一个Integer作为其值。
index.xhtml
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 JournalDev"></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 Journaldev.com"></p:outputLabel>
</pm:footer>
</pm:page>
</h:body>
</html>RangeSlider基本信息 (RangeSlider Basic Info)
RangeSlider is a grouping component for dual sliders to create a range selection. RangeSlider requires two InputSliders as children, first slider is for the start range and the second for the end.
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 |
|---|---|
| 组件类别 | org.primefaces.mobile.component.rangeslider.RangeSlider |
| 组件类型 | org.primefaces.mobile.RangeSlider |
| 组件族 | org.primefaces.mobile.component |
| 渲染器类型 | org.primefaces.mobile.component.RangeSlider |
| 渲染器类 | org.primefaces.mobile.component.rangeslider.RangeSlider |
RangeSlider属性 (RangeSlider Attributes)
| 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. |
| 名称 | 默认 | 类型 | 描述 |
|---|---|---|---|
| ID | 空值 | 串 | 组件的唯一标识符 |
| 呈现 | 真正 | 布尔型 | 布尔值，用于指定组件的呈现，当设置为false时将不呈现组件。 |
| 捆绑 | 空值 | 目的 | El表达式，它映射到支持Bean中的服务器端UIComponent实例 |
| 样式 | 空值 | 串 | 组件的内联样式。 |
| styleClass | 空值 | 串 | 组件的样式类。 |
| 突出 | 假 | 布尔型 | 启用时突出显示值范围。 |
RangeSlider入门 (Getting Started With RangeSlider)
index.xhtml
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 JournalDev"></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 Journaldev.com"></p:outputLabel>
</pm:footer>
</pm:page>
</h:body>
</html>切换基本信息 (Switch Basic Info)
Switch is an input component to select a boolean value. Value of switch should be a boolean property. If the value is false offLabel would be displayed and onLabel would be used otherwise.
开关是选择布尔值的输入组件。 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 |
| 标签 | 开关 |
|---|---|
| 组件类别 | org.primefaces.mobile.component.uiswitch.UISwitch |
| 组件类型 | org.primefaces.mobile.UISwitch |
| 组件族 | org.primefaces.mobile.component |
| 渲染器类型 | org.primefaces.mobile.component.UISwitchRenderer |
| 渲染器类 | org.primefaces.mobile.component.uiswitch.UISwitchRenderer |
开关属性 (Switch Attributes)
| 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. |
| 名称 | 默认 | 类型 | 描述 |
|---|---|---|---|
| ID | 空值 | 串 | 组件的唯一标识符 |
| 呈现 | 真正 | 布尔型 | 布尔值，用于指定组件的呈现，当设置为false时将不呈现组件。 |
| 捆绑 | 空值 | 目的 | El表达式，它映射到支持Bean中的服务器端UIComponent实例 |
| 值 | 空值 | 目的 | 组件的值。 |
| 转换器 | 空值 | 目的 | El表达式或文字文本，定义了组件的转换器。 当是EL表达式时，它将解析为转换器实例。 如果是静态文本，则必须引用转换器ID。 |
| 即时 | 假 | 布尔型 | 设置为true时，将在此组件的应用请求值阶段执行流程验证逻辑。 |
| 需要 | 假 | 布尔型 | 根据需要标记组件 |
| 验证器 | 空值 | 目的 | 方法绑定表达式，它引用输入的方法验证。 |
| valueChangeListener | 空值 | 目的 | 方法绑定表达式，该表达式引用用于处理valuechangeevent的方法。 |
| requiredMessage | 空值 | 串 | 必填字段验证失败时显示的消息。 |
| converterMessage | 空值 | 串 | 转换失败时显示的消息。 |
| 验证器消息 | 空值 | 串 | 验证字段时显示的消息。 |
| onLabel | 上 | 整数 | 滑块的最小值。 |
| 关闭标签 | 关 | 整数 | 滑块的最大值。 |
| 标签 | 空值 | 串 | 用户可显示的名称。 |
| 样式 | 空值 | 串 | 组件的内联样式。 |
| styleClass | 空值 | 串 | 组件的样式类。 |
| 标签 | 空值 | 串 | 用户可显示的名称。 |
| 残障人士 | 假 | 布尔型 | 禁用或启用开关。 |
| 不断变化 | 假 | 串 | 在更改事件上执行的客户端回调。 |
开关入门 (Getting Started With Switch)
index.xhtml
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 JournalDev"></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 Journaldev.com"></p:outputLabel>
</pm:footer>
</pm:page>
</h:body>
</html>实施内部导航示例 ()
Following example shows you how can leverage Primefaces’ p:button and p:link components to navigate from one page into another.
以下示例显示了如何利用Primefaces的p：button和p：link组件从一个页面导航到另一页面。
index.xhtml
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 JournalDev"></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 Journaldev.com"></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>package com.journaldev.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";
}
}Here’s detailed explanation for what’s happened in the previous sample:
这是上一个示例中发生的情况的详细说明：
- If you want a submission form, it’s must be located inside pm:content. 如果要提交表单，则必须位于pm：content内。
- Action submitted must be bound into a String returned value method. This returned value is used by the navigation handler to specify the next page it would display. 提交的操作必须绑定到String返回值方法中。 导航处理程序使用此返回值来指定它将显示的下一页。
- Using the expression pm:<<identifier of the page>> is the valid way to determine which page the next view will be. 使用表达式pm：<<页面的标识符>>是确定下一个视图将位于哪个页面的有效方法。
- You can pass whatever you want of values, data or do your validation like any form you’ve developed using Primefaces core. 您可以传递任何想要的值，数据或进行验证，就像使用Primefaces core开发的任何形式一样。
实施外部导航示例 ()
Practically, different types of navigations that application would contain. May be another view within the same application – Technically, another facelets view – or may be an external resource has published globally.
实际上，应用程序将包含不同类型的导航。 可能是同一应用程序中的另一个视图-从技术上来说是另一个facelets视图-或可能是已在全球发布的外部资源。
index.xhtml
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 JournalDev"></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 Journaldev.com"></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.journaldev.com"></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>atTheSameDomainView.xhtml
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 id="login">
<pm:header>
<p:outputLabel value="Login Into JournalDev"></p:outputLabel>
</pm:header>
<pm:content>
<h:form id="loginForm">
<p:outputLabel value="External Navigation - Same Domain"></p:outputLabel>
</h:form>
</pm:content>
<pm:footer>
<p:outputLabel value="All copyrights @ reserved for Journaldev.com"></p:outputLabel>
</pm:footer>
</pm:page>
</h:body>
</html>package com.journaldev.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";
}
}实施过渡导航示例 ()
That’s not all the story, your internal navigations can be customized by providing some sort of animation aspect once the navigation get happened.
这还不是全部故事，一旦导航发生，您可以通过提供某种动画形式来自定义内部导航。
index.xhtml
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 JournalDev"></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 Journaldev.com"></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.journaldev.com"></p:button>
<p:button value="Back" outcome="pm:login?transition=flow"></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?transition=pop"></p:button>
</pm:content>
</pm:page>
</h:body>
</html>By adding transition=<<transitionType>> you will get animated navigation.
通过添加transition = << transitionType >>，您将获得动画导航。
实施客户端API导航示例 ()
Now, let’s specify shortly, how can we use Client Side API for achieve the navigations required.
现在，让我们简短地说明一下，如何使用客户端API实现所需的导航。
index.xhtml
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>
<script>
function back(){
PrimeFaces.Mobile.navigate('#login',{
transition:'turn'
});
}
</script>
</h:head>
<h:body>
<pm:page id="login">
<pm:header>
<p:outputLabel value="Login Into JournalDev"></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 Journaldev.com"></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.journaldev.com"></p:button>
<p:button value="Back" outcome="pm:login?transition=flow"></p:button>
<p:button value="Back By Client Side API" onclick="back()"></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?transition=pop"></p:button>
</pm:content>
</pm:page>
</h:body>
</html>使用Opera Mobile Emulator进行现场演示 (Live Demo using Opera Mobile Emulator)
We can use Opera Mobile Emulator to check how our web application will look into mobile devices, below are some of the views of our application when viewed in Samsung Galaxy S3 using Opera Mobile Emulator.
我们可以使用Opera Mobile Emulator来检查Web应用程序在移动设备中的外观，以下是使用Opera Mobile Emulator在Samsung Galaxy S3中查看应用程序时的一些视图。
摘要 (Summary)
Primefaces Mobile is a key component of Primefaces library. Now, you have the power of developing a responsive web application as long as you have Primefaces core knowledge. We’ve introduced an excellent combination of Primefaces tutorials here, and for now, it’s the time to get deep look at how the Mobile application get developed using the same library that you are most probably familiar with. Contribute us by commenting below and find the source code below for your download purpose.
Primefaces Mobile是Primefaces库的关键组件。 现在，只要您具备Primefaces核心知识，就可以开发响应式Web应用程序。 我们在这里介绍了Primefaces教程的完美结合，现在是时候深入了解如何使用您可能最熟悉的库来开发Mobile应用程序。 通过在下面评论来为我们提供帮助，并在下面找到用于下载目的的源代码。
翻译自: https://www.journaldev.com/4023/primefaces-responsive-layout-mobile
primefaces
462
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
