All Learning

Java, Java EE, Android, Python, Web Development Tutorials

Java Programming

Primefaces Responsive Layout – Primefaces Mobile With Examples [Latest]

Byadmin

Oct 24, 2022
Primefaces Responsive Layout - Primefaces Mobile With Examples

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 
    
<?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. 
    
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. 
    
<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. 
    
<?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


<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


<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>

Navigations

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.

<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.

<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.

<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.


<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.

Client Side API Navigation

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.


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.

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

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 nul
l		 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.

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

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.

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


<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>

Primefaces-Mobile-Simple-Content-Usage

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

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

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


<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

<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.

Primefaces-Mobile-Simple-Filed-With-Content-1024x195

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

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.

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

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: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>

Primefaces Responsive, Primefaces Mobile - Header & Footer

InputSlider Basic Info

InputSlider is an input component with a touch enabled slider.

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 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.

Getting Started With InputSlider

InputSlider requires an Integer as its value.

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>

Primefaces Responsive, Primefaces Mobile - InputSlider

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.

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 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.

Getting Started With 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: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>

Primefaces Responsive, Primefaces Mobile - RangeSlider

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.

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

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.

Getting Started With S
witch

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>

Primefaces Responsive, Primefaces Mobile - Switch

Implementing Internal Navigation Sample

Following example shows you how can leverage Primefaces’ p:button and p:link components to navigate from one page into another.

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";
	}
}

Primefaces Responsive, Primefaces Mobile Internal Navigation

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.

Implementing External Navigation Sample

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


<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


<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";
	}
}

Primefaces Responsive, Primefaces Mobile External Navigations

Implementing Transition Navigation Sample

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


<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>

Primefaces Responsive, Primefaces Mobile Animated Navigations

By adding transition=<<transitionType>> you will get animated navigation.

Implementing Client Side API Navigation Sample

Now, let’s specify shortly, how can we use Client Side API for achieve the navigations required.

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>

Primefaces Responsive, Primefaces Mobile - Client Side API Navigations

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.
Primefaces Responsive, Primefaces Mobile Primefaces Responsive, Primefaces Mobile 2

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.

By admin

Related Post

Java Programming

[Solved] org.hibernate.HibernateException: get is not valid without active transaction With Examples [Latest]

Oct 24, 2022 admin
Java Programming

Queue Implementation in Java using Array With Examples [Latest]

Oct 24, 2022 admin
Java Programming

Spring ActiveMQ Example (Part 2) [Latest]

Oct 24, 2022 admin

Leave a Reply

You missed

Java Programming

[Solved] org.hibernate.HibernateException: get is not valid without active transaction With Examples [Latest]

Oct 24, 2022 admin
C++ Programming

How to Generate XML from XSD in Eclipse Example [Latest]

Oct 24, 2022 admin
Java Programming

Queue Implementation in Java using Array With Examples [Latest]

Oct 24, 2022 admin
C Programming

Depth First Search (DFS) for a Graph With Examples [Latest]

Oct 24, 2022 admin
%d bloggers like this: