Develop mobile Java EE applications using Primefaces

In this tutorial we will learn how to develop a simple Web application for Mobile devices using PrimeFaces mobile extension as JSF API.

Today mobile Web traffic is dramatically on the rise, and creating a smooth mobile experience is at the top for every Web master. In spite of slow networks, mobile users expect a more application-like experience such as smooth load experiences, fast and animated page transitions and application-centric error messages. There are several kit and libraries which can be used to develop mobile applications: we will learn how to use PrimeFaces mobile extension which is an UI kit built on the top of jQuery Mobile that can be used to create JSF applications optimized for mobile devices.

Installing PrimeFaces libs and its mobile kit is quite easy: either add to your Web application lib path the latest Community Downloads (http://primefaces.org/downloads.html):

primefaces-4.X.jar
primefaces-mobile-0.9.X.jar

If you are using Maven, all you need is adding the following dependencies to your application:

<dependency>
    <groupId>org.primefaces</groupId>
    <artifactId>primefaces</artifactId>
    <version>4.0</version>
</dependency>

<dependency>
    <groupId>org.primefaces</groupId>
    <artifactId>primefaces-mobile</artifactId>
    <version>0.9.4</version>
</dependency>

Writing your first mobile application

Writing mobile applications is not much different from ordinary application. All you need to know is that a mobile page is a simple xhtml based JSF view that can have of one or more views. A view is a screen in your layout. Each view is declared within a top-level Page container as shown by the following picture:

primefaces mobile example

Each view in turn contain a content element where you place your actual view content. That being said, you can choose two strategies for coding your mobile site: either choose a multi page approach whetre you code each view in a different .xhtml page (Good idea if you have lots of views in your application) or create a single .xhtml page which will contain all your view, like in the following example we will use just two views so we will include them in a single .xhtml file.

The following example application contains three views: the main view which is the navigation screen where you can enter other views. The forms view is a simple form which stores some Property objects in an ArrayList and a datatable view where data is rendered.

Here’s the mobile.xhtml page:

<f:view xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    xmlns:pm="http://primefaces.org/mobile" contentType="text/html"
    renderKitId="PRIMEFACES_MOBILE">

    <pm:page title="Components">


        <!-- Main View -->
        <pm:view id="main">

            <pm:header title="Mobile" swatch="b" />

            <pm:content>

                <p:panelGrid columns="2" styleClass="ui-responsive">

                    <p:outputPanel style="padding-right: 15px">
                        <h:form>
                            <p:dataList type="inset" styleClass="ui-li-custom">
                                <f:facet name="header">Menu</f:facet>
                                <f:attribute name="icon" value="false" />

                                <h:outputLink value="#forms">Form</h:outputLink>
                                <h:outputLink value="#datatable">Table</h:outputLink>

                            </p:dataList>
                        </h:form>
                    </p:outputPanel>

                </p:panelGrid>
            </pm:content>
        </pm:view>

        <!-- Forms -->
        <pm:view id="forms">
            <pm:header title="Forms">
                <f:facet name="left">
                    <p:commandButton value="Home" action="pm:main" />
                </f:facet>
            </pm:header>

            <pm:content>

                <h:form id="jsfexample">
                    <p:panelGrid columns="2">
                        <f:facet name="header">  
               This is a basic form component 
           </f:facet>
                        <h:outputLabel for="key" value="Enter key" />
                        <p:inputText id="key" value="#{manager.key}" />

                        <h:outputLabel for="value" value="Enter value" />
                        <p:inputText id="value" value="#{manager.value}" />

                        <p:commandButton action="#{manager.save}" value="Save"
                            icon="ui-icon-check" style="margin:0"
                            update="@form,:datatableform:mydata" />

                        <h:messages />
                    </p:panelGrid>

                </h:form>
            </pm:content>
        </pm:view>

      <!-- DatatableView -->
        <pm:view id="datatable">
            <pm:header title="DataTable">
                <f:facet name="left">
                    <h:outputLink value="#main">Home</h:outputLink>
                </f:facet>
            </pm:header>
            <pm:content>
                <h:form id="datatableform">
                    <p:dataTable value="#{manager.cacheList}" var="item" id="mydata"
                        rowKey="#{item.key}">
                        <p:column>
                            <f:facet name="header">Key</f:facet>
                            <h:outputText value="#{item.key}" />
                        </p:column>
                        <p:column>
                            <f:facet name="header">Value</f:facet>
                            <h:outputText value="#{item.value}" />
                        </p:column>
                    </p:dataTable>
                </h:form>
            </pm:content>
        </pm:view>

    </pm:page>

</f:view>

And now some explanation to it: at first the Renderkit: PrimeFaces  Mobile  provides  a  Mobile  Renderkit  for  some  standard  JSF  and  core  PrimeFaces Components.  In our example we are using the renderkit named “PRIMEFACES_MOBILE“.

Next, pay attention to how navigation happens between views:

<h:outputLink value="#forms">Form</h:outputLink>

Another interesting thing to notice is how to reference a component which is in another view. In our example, the Save button contained in the form view updates its own form and the datatable named “mydata” contained in the “datatableform”:

<p:commandButton action="#{manager.save}" value="Save" update="@form,:datatableform:mydata" />

In order to see how this example looks like on a mobile, you can download a mobile emulator like Opera Mobile Emulator (http://www.opera.com/it/developer/mobile-emulator) .  Let’s test it simulating a Galaxy SIII. Deploy the application on JBoss AS /Wildfly at first, then let’s enter the mobile.xhtml page:

primefaces mobile demo
Here is the form view, where we enter some data:

primefaces mobile tutorial
And finally this is the datatable view where we list the properties entered.
primefaces mobile demo

Enjoy mobile applications using Primefaces! Download the sample project from here (Just add the primefaces libraries in your WEB-INF/lib folder)

Found the article helpful? if so please follow us on Socials