Wednesday, November 30, 2011

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>



No comments:

Post a Comment

PF