Primefaces Responsive Layout – Primefaces Mobile

Filed Under: 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.

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.

TagPage
Component Classorg.primefaces.mobile.component.page.Page
Component Typeorg.primefaces.mobile.Page
Component Familyorg.primefaces.mobile.component
Renderer Typeorg.primefaces.mobile.component.PageRenderer
Renderer Classorg.primefaces.mobile.component.page.PageRenderer

Page Attributes

NameDefaultTypeDescription
idnullStringUnique identifier of the component
renderedtrueBooleanBoolean value to specify the rendering of the component, when set to false component will not be rendered.
bindingnullObjectAn el expression that maps to a server side UIComponent instance in a backing bean
titlenullStringTitle text of the page.
themenullStringSwatch of the page.
stylenullStringInline style of the component.
styleClassnullStringStyle class of the component.
lazyfalseBooleanLazy 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.

TagContent
Component Classorg.primefaces.mobile.component.content.Content
Component Typeorg.primefaces.mobile.Content
Component Familyorg.primefaces.mobile.component
Renderer Typeorg.primefaces.mobile.component.ContentRenderer
Renderer Classorg.primefaces.mobile.component.content.ContentRenderer

Content Attributes

NameDefaultTypeDescription
idnullStringUnique identifier of the component
renderedtrueBooleanBoolean value to specify the rendering of the component, when set to false component will not be rendered.
bindingnullObjectAn el expression that maps to a server side UIComponent instance in a backing bean
stylenullStringInline style of the component.
styleClassnullStringStyle 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 Responsive, Primefaces Mobile - Simple Content Usage

Field Basic Info

Field is a responsive layout component for label-input pairs.

TagField
Component Classorg.primefaces.mobile.component.field.Field
Component Typeorg.primefaces.mobile.Field
Component Familyorg.primefaces.mobile.component
Renderer Typeorg.primefaces.mobile.component.FieldRenderer
Renderer Classorg.primefaces.mobile.component.field.FieldRenderer

Field Attributes

NameDefaultTypeDescription
idnullStringUnique identifier of the component
renderedtrueBooleanBoolean value to specify the rendering of the component, when set to false component will not be rendered.
bindingnullObjectAn 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>

Primefaces Responsive, Primefaces Mobile - Simple Filed With 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:field>
				<p:outputLabel value="Enter Username"></p:outputLabel>
				<p:inputText vaue=""></p:inputText>
			</pm:field>
			<pm:field>
				<p:outputLabel value="Enter Password"></p:outputLabel>
				<p:password vaue=""></p:password>
			</pm:field>
			<pm:field>
				<p:commandButton value="Login"></p:commandButton>
			</pm:field>

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

Primefaces Responsive, Primefaces Mobile - Simple Filed Without Content

  • 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 Basic Info

Header is a container component for the top area of a page.

TagHeader
Component Classorg.primefaces.mobile.component.header.Header
Component Typeorg.primefaces.mobile.Header
Component Familyorg.primefaces.mobile.component.Header
Renderer Typeorg.primefaces.mobile.component.HeaderRenderer
Renderer Classorg.primefaces.mobile.component.header.HeaderRenderer

Header Attributes

NameDefaultTypeDescription
idnullStringUnique identifier of the component
renderedtrueBooleanBoolean value to specify the rendering of the component, when set to false component will not be rendered.
bindingnullObjectAn el expression that maps to a server side UIComponent instance in a backing bean
titlenullStringTitle text of the header.
fixedfalseBooleanPositions the header as fixed on scroll.
themenullStringSwatch of the component.
stylenullStringInline style of the component.
styleClassnullStringStyle class of the component.

Footer Basic Info

Footer is a container component for the bottom area of the page.

TagFooter
Component Classorg.primefaces.mobile.component.footer.Footer
Component Typeorg.primefaces.mobile.Footer
Component Familyorg.primefaces.mobile.component
Renderer Typeorg.primefaces.mobile.component.FooterRenderer
Renderer Classorg.primefaces.mobile.component.footer.FooterRenderer

Footer Attributes

NameDefaultTypeDescription
idnullStringUnique identifier of the component
renderedtrueBooleanBoolean value to specify the rendering of the component, when set to false component will not be rendered.
bindingnullObjectAn el expression that maps to a server side UIComponent instance in a backing bean
titlenullStringTitle text of the footer.
fixedfalseBooleanPositions the footer as fixed on scroll.
themenullStringSwatch of the component.
tapToggletrueBooleanFor fixed footers, sets whether the fixed toolbar’s visibility can be toggled by tapping on the page.
stylenullStringInline style of the component.
styleClassnullStringStyle class of the component.

Getting Started With Header & Footer

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.

TagInputSlider
Component Classorg.primefaces.mobile.component.inputslider.InputSlider
Component Typeorg.primefaces.mobile.InputSlider
Component Familyorg.primefaces.mobile.component.
Renderer Typeorg.primefaces.mobile.component.InputSliderRenderer
Renderer Classorg.primefaces.mobile.component.inputslider.InputSliderRenderer

InputSlider Attributes

NameDefaultTypeDescription
idnullStringUnique identifier of the component
renderedtrueBooleanBoolean value to specify the rendering of the component, when set to false component will not be rendered.
bindingnullObjectAn el expression that maps to a server side UIComponent instance in a backing bean
valuenullObjectValue of the component.
converternullObjectAn 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.
immediatefalseBooleanWhen set true, process validations logic is executed at apply request values phase for this component.
requiredfalseBooleanMarks component as required
validatornullObjectA method binding expression that refers to a method validationg the input.
valueChangeListenernullObjectA method binding expression that refers to a method for handling a valuechangeevent.
requiredMessagenullStringMessage to be displayed when required field validation fails.
converterMessagenullStringMessage to be displayed when conversion fails.
validatorMessagenullStringMessage to be displayed when validation fields.
minValue0IntegerMinimum value of the slider.
maxValue100IntegerMaximum value of the slider.
stylenullStringInline style of the component.
styleClassnullStringStyle class of the component.
step1StringStep factor to apply on slider move.
disabledfalseBooleanDisables or enables the slider.
labelnullStringUser presentable name.
highlightfalseBooleanHighlights 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.

TagRangeSlider
Component Classorg.primefaces.mobile.component.rangeslider.RangeSlider
Component Typeorg.primefaces.mobile.RangeSlider
Component Familyorg.primefaces.mobile.component
Renderer Typeorg.primefaces.mobile.component.RangeSlider
Renderer Classorg.primefaces.mobile.component.rangeslider.RangeSlider

RangeSlider Attributes

NameDefaultTypeDescription
idnullStringUnique identifier of the component
renderedtrueBooleanBoolean value to specify the rendering of the component, when set to false component will not be rendered.
bindingnullObjectAn el expression that maps to a server side UIComponent instance in a backing bean
stylenullStringInline style of the component.
styleClassnullStringStyle class of the component.
highlightfalseBooleanHighlights 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.

TagSwitch
Component Classorg.primefaces.mobile.component.uiswitch.UISwitch
Component Typeorg.primefaces.mobile.UISwitch
Component Familyorg.primefaces.mobile.component
Renderer Typeorg.primefaces.mobile.component.UISwitchRenderer
Renderer Classorg.primefaces.mobile.component.uiswitch.UISwitchRenderer

Switch Attributes

NameDefaultTypeDescription
idnullStringUnique identifier of the component
renderedtrueBooleanBoolean value to specify the rendering of the component, when set to false component will not be rendered.
bindingnullObjectAn el expression that maps to a server side UIComponent instance in a backing bean
valuenullObjectValue of the component.
converternullObjectAn 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.
immediatefalseBooleanWhen set true, process validations logic is executed at apply request values phase for this component.
requiredfalseBooleanMarks component as required
validatornullObjectA method binding expression that refers to a method validationg the input.
valueChangeListenernullObjectA method binding expression that refers to a method for handling a valuechangeevent.
requiredMessagenullStringMessage to be displayed when required field validation fails.
converterMessagenullStringMessage to be displayed when conversion fails.
validatorMessagenullStringMessage to be displayed when validation fields.
onLabelonIntegerMinimum value of the slider.
offLabeloffIntegerMaximum value of the slider.
labelnullStringUser presentable name.
stylenullStringInline style of the component.
styleClassnullStringStyle class of the component.
labelnullStringUser presentable name.
disabledfalseBooleanDisables or enables the switch.
onchangefalseStringClient side callback to execute on change event.

Getting Started With Switch

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.

Comments

  1. Nillander Alarcão says:

    how import this project? NetBeans and Eclipse

  2. Prajwal n says:

    All is useful but how to deploy in mobile could you please help me

    1. Mohammad says:

      Hi Prajwal,

      You may use Mobile Emulator.

      Regards,

  3. Fabiano says:

    Very elucidative tutorial!! Congrats!

    1. Mohammad says:

      Thanks Fabiano for your nice words.

  4. carleonis says:

    hi. I tested your project in netbeans 8.0.1 with Tomcat 7.0.42. It’s working, but the war file does not load bo container. If I run the netbeans project is in tomcat / webapp / in the root. What is happening?

  5. sath says:

    great tutorial …very useful

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages