JSF Primefaces mobile Integration

Today I created my first mobile web application using Primefaces mobile and also integration with existing primefaces JSF application and it took me less than 15 minutes to setup and run the application in Weblogic 10.3.5. I have used the same managed bean for both desktop web and mobile web browsers and it  works great thanks to primefaces team powerd by JQuery mobile for awesome JSF components and detailed user guide.

There were few lessons learned during integration.

1. Read JQuery mobile documentation it helps you during page creation. 
2. If you are new to primefaces make sure you understand primefaces AJAX implementation.
3. Read primefaces user guide (core & mobile) and and review the examples closely in the guide.
4. Apply special focus while reading about <p:commandLink>. Feels silly?
5. Follow mobile page design principals.

Update (04/11):

• Setup the Render Kit Id as PRIMEFACES_MOBILE for parent <f:view> then you do not need to pass the request parameter with the URL  "?javax.faces.RenderKitId=PRIMEFACES_MOBILE" or you do not need to setup the default-render-kit-id in faces-config.xml
• To make use of JQuery mini forms you can set mini="true" to the page element . Note needs primefaces mobile version 0.9.2
• Add filter to dataList by adding the attribute filter
• Fixed Header & Footer
• Example code to create RSS reader Github 

Ex:


<f:view xmlns="http://www.w3.org/1999/xhtml"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:p="http://primefaces.org/ui"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:pm="http://primefaces.org/mobile"
        contentType="text/html" renderKitId="PRIMEFACES_MOBILE">
    <pm:page title="Mobile Home" mini="true">
        <!-- Page content goes here -->
        <pm:view id="main">
            <pm:header title="Fixed Header" swatch="b" fixed="true"/>
            <pm:content>
                <p:dataList>
                    <f:attribute name="filter" value="true" />
                    <h:outputText value="Barcelona" />
                    <h:outputText value="Istanbul" />
                    <h:outputText value="New York" />
                    <h:outputText value="Paris" />
                </p:dataList>
            </pm:content>

          <pm:footer fixed="true" style="text-align: center; font-size: 10px">
                <h:outputText value="Fixed Footer"/>
            </pm:footer>

        </pm:view>
    </pm:page>
</f:view>

EL 2.2 and Weblogic 10.3.5

EL 2.2 has some nice features where in you can pass objects to the methods to perform some actions. This feature has nice advantage when you combine with JSF 2.0 however it will not work with JSF 1.2. If you are using JEE6 server EL 2.2 is supported out of box and for any that do not then you have to copy the el-api-2.2 and el-impl-2.2 jar files to web application class path (WEB-INF/lib) and add below context parameter to web.xml and it should work. For weblogic to support we have to add weblogic.xml file as well.

1. Copy the el-api-2.2 and el-impl-2.2 jar to web application class path (WEB-INF/lib). Below is the POM if you are using maven


 <!-- EL Dependencies -->
        <dependency>
            <groupId>javax.el</groupId>
            <artifactId>el-api</artifactId>
            <version>2.2</version>
        </dependency>
        <dependency>
            <groupId>org.glassfish.web</groupId>
            <artifactId>el-impl</artifactId>
            <version>2.2</version>
        </dependency>

2. Add below context param to web.xml


   <context-param>
        <param-name>com.sun.faces.expressionFactory</param-name>
        <param-value>com.sun.el.ExpressionFactoryImpl</param-value>
    </context-param>

3. Add weblogic.xml below WEB-INF

<?xml version='1.0' encoding='UTF-8'?>
<weblogic-web-app xmlns="http://xmlns.oracle.com/weblogic/weblogic-web-app"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.oracle.com/weblogic/weblogic-web-app http://xmlns.oracle.com/weblogic/weblogic-web-app/1.0/weblogic-web-app.xsd">
    <weblogic-version>10.3.4</weblogic-version>
    <context-root>demo</context-root>
    <container-descriptor>
        <prefer-application-packages>
            <package-name>com.sun.el.*</package-name>
            <package-name>javax.el.*</package-name>
        </prefer-application-packages>
    </container-descriptor>
</weblogic-web-app>

Now you can pass objects form JSF to actions directly.  Ex is  below


<h:form>
        <h:dataTable value="#{userManager.users}" var="user">
            <h:column>#{user.id}</h:column>
            <h:column>#{user.name}</h:column>
            <h:column>#{user.email}</h:column>
            <h:column><h:commandButton value="Edit" action="#{userManager.edit(user)}" /></h:column>
        </h:dataTable>
    </h:form>

And you Managed bean will have edit method


public void edit(User user) {
        this.user = user;
        this.edit = true;
    }

That's it happy coding :-)