JSF Primefaces Mobile RSS Reader

This is a simple example of Primefaces Mobile RSS Reader similar to How to Build an RSS Reader with jQuery Mobile. For this example I have used Maven 3.0,  Primefaces 3.2, Primefaces Mobile 0.9.2 versions also I have used primefaces FeedReader component and this component has a dependency on  Rome API.

The source code is available for download @ Github and TODO is upload the example in GAE

At very high level the main page has 3 views and I am highlighting the important notable items on the page.

1. View main will Display the List of available Feeds
2. View feedsView Displays the first 10 feed content from the selected feed from main view
3. View newFeed is for adding new feed it will display a FORM to add new feed and after adding it will display the updated list.

<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="PF RSS Reader" mini="true">
        <!-- Page content goes here -->
        <f:facet name="meta">
            <meta name="apple-mobile-web-app-capabel" content="yes" />
        </f:facet>
        <!-- Main Page to List all Feeds -->
        <pm:view id="main">
            <pm:header title="Rss Feeds" swatch="b" fixed="true">
                <f:facet name="right"><h:outputLink value="#newFeed?reverse=true">Add Feed</h:outputLink></f:facet>
            </pm:header>
            <pm:content>
                <h:form id="listFeedNames">
                    <p:dataList value="#{mobileTestController.rssFeedsList}" var="feed" type="inset">
                        <f:attribute name="filter" value="true" />
                        <p:column>
                            <p:commandLink value="#{feed.title}" update=":viewFeed" action="#{mobileTestController.viewSelectedFeed(feed)}"/>
                        </p:column>
                    </p:dataList>
                </h:form>
            </pm:content>
            <pm:footer fixed="true" style="text-align: center; font-size: 10px">
                <h:outputText value="Fixed Footer" style="text-align: center"/>
            </pm:footer>
        </pm:view>
        <!-- List Feed Results -->
        <pm:view id="feedsView">
            <pm:header title="View Feed" swatch="b" fixed="true">
                <f:facet name="left"><p:button value="Home" icon="home" href="#main?reverse=true"/></f:facet>
                <f:facet name="right"><h:outputLink value="#newFeed?reverse=true">Add Feed</h:outputLink></f:facet>
            </pm:header>
            <pm:content>
                <h:form id="viewFeed">
                    <p:feedReader value="#{mobileTestController.selectedFeed}" var="feed" size="10">
                        <h:outputText value="#{feed.title}" style="font-weight: bold"/>
                        <br />
                        <h:outputText value="#{feed.description.value}" escape="false"/>
                        <p:separator />
                    </p:feedReader>
                </h:form>
            </pm:content>
        </pm:view>
        <!-- Add New Feed Form -->
        <pm:view id="newFeed">
            <pm:header title="Add New Feed" swatch="b" fixed="true">
                <f:facet name="left"><p:button value="Home" icon="home" href="#main?reverse=true"/></f:facet>
            </pm:header>
            <pm:content>
                <h:form>
                    <p:inputText id="feed_name" label="Title:" value="#{mobileTestController.rssFeed.title}"/>
                    <p:inputText id="feed_rss" label="Rss URL:" value="#{mobileTestController.rssFeed.rssUrl}"/>
                    <p:commandButton value="Save" action="#{mobileTestController.addNewFeed}" update="@form,:listFeedNames" icon="check" />
                </h:form>
            </pm:content>
        </pm:view>
    </pm:page>
</f:view>

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>