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
  • Taglib: PFM provided mobile specific components with the following taglib.
  • 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.
  • 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.

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

  • 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

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.

  • The outcome is a pm: followed with the identifier of the page component. Is also applicable to navigate as a result of action execution.

  • External: External navigation is used for navigating between all of those faceltes XHTML views or into a resources that are located in another domain.

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

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

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

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

  • 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

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

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

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

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

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

atTheSameDomainView.xhtml

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

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

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

Leave a Reply

%d bloggers like this: