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.
PFM is built on top of jQuery Mobile library that is a touch-optimized HTML5 UI framework, providing support for various mobile platforms.
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 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.
Following steps are required for proper configuration of Primefaces mobile:
- Configuration: A mobile navigation handler is necessary inside faces configuration to enable mobile navigation support.
faces-config.xml
12345678910111213<?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> - Taglib: PFM provided mobile specific components with the following taglib.
123xmlns: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.
12345678910<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.
1234567891011<?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 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.
index.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<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:
- Internal: Internal navigation is used for navigating between all of those pages defined in a single facelets XHTML view.
|
1 2 3 4 |
<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.
|
1 2 3 4 5 6 |
<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.
|
1 2 3 4 |
<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.
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.
|
1 2 3 4 5 |
<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.
- Reverse option is provided for back navigations.
- None value will help you turn off animation facility.
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.
|
1 2 3 4 5 6 |
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.
Page Attributes
Content Basic Info
Content is a container component for the content area of a page.
Content Attributes
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.
index.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?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.
Field Attributes
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.
index.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<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></code>index.xhtml |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<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.
- Using of pm:field is to make sure that displaying pairs of input and output components is ordered nicely.
Header is a container component for the top area of a page.
Footer is a container component for the bottom area of the page.
index.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<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 Basic Info
InputSlider is an input component with a touch enabled slider.
InputSlider Attributes
Getting Started With InputSlider
InputSlider requires an Integer as its value.
index.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<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 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 Attributes
Getting Started With RangeSlider
index.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<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 Attributes
Getting Started With S
witch
index.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<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.
index.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<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> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
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.
- 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.
- Using the expression pm:<<identifier of the page>> is the valid way to determine which page the next view will be.
- You can pass whatever you want of values, data or do your validation like any form you’ve developed using 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.
index.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<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> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<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.
Now, let’s specify shortly, how can we use Client Side API for achieve the navigations required.
index.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<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> |
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.
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.