Josh's Dev Blog - Java, Jakarta EE, Jython, Oracle, and More...: August 2014

Introduction

If you have developed an application that utilizes PrimeFaces, or if you are planning to develop a web application for use on desktop and mobile devices, then consider PrimeFaces Mobile for your mobile implementation. This blog post will cover some basics to help you get started developing a mobile interface for an existing PrimeFaces application. However, the same procedures can be applied to an application that is being written from scratch. This article is a precursor to an article that I am currently writing for OTN, which will cover the PrimeFaces Mobile API in more detail. That article will be published later this year.

Getting in the Mobile Mindset

One of the most important pieces of a mobile project is getting into the mobile mindset. While you may have a set of components that you are comfortable using on standard web applications, these components may not provide the best experience when transferred to the smaller screen. For that reason, you need to think about how your user is going to be interacting with your application on the small screen, and provide them with the most convenient user interface as possible. Some things to consider are the amount of text that you will want your users to be typing. If they are on a small device, it may be cumbersome to type lots of text, so we will want to provide them with easy to use components, allowing them to type as little as possible, and even selecting from lists instead. We also need to consider real estate (no not the housing market). Adding a menu to the top or bottom of the screen may not be beneficial to the user if they do not have enough screen left to easily navigate an application.

These are just a couple of the issues tat are presented when developing applications for a mobile device. PrimeFaces Mobile is well suited to assist in these areas since it is built upon one of the leading mobile HTML5 based UI frameworks. PrimeFaces Mobile consists of many UI components that can enable users to be highly productive on a mobile device. If you take a look at the PrimeFaces Showcase, you can see many of these mobile components in action. This enables you to get an idea of how these components look, and how they react for the user. It is recommended to visit the PrimeFaces mobile showcase on a mobile device such as a smartphone or tablet gain the best understanding of how they'll react.

Creating a Mobile Root

Now that you have a basic understanding of some mobile design concepts, let's take a look at how easy it is to get started creating mobile views using PrimeFaces mobile. Before PrimeFaces 5, mobile was a separate download that needed to be included in your project. Now it is easier than ever to get going with PrimeFaces Mobile, as it is packaged as part of PrimeFaces 5. This makes it easy to build enterprise web applications on PrimeFaces for the standard browser, and then build separate views for use on mobile devices, oftentimes utilizing the same back-end business methods for each. I recommend creating a view that is dedicated as a starting point or "root" for mobile device users. I also recommend creating a separate MobileNavigationController class to handle navigation throughout the mobile views, as needed. We can utilize the mobile root view to set the hook for using the MobileNavigationController vs. the standard web application navigation.

For the purposes of this article, let's simply call our mobile root mobileRoot.xhtml. In this case, mobleRoot.xhtml may look something like the following:

<html xmlns:f="http://xmlns.jcp.org/jsf/core"

      xmlns:h="http://xmlns.jcp.org/jsf/html"

      xmlns:p="http://primefaces.org/ui"

      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"

      xmlns="http://www.w3.org/1999/xhtml">


    <f:metadata>
        <f:viewaction action="#{mobileNavigationController.doMobile()}" id="useMobile">
    </f:viewaction>

    </f:metadata>

    <h:head>
        <h:outputscript library="js" name="addtohomescreen.js">
        <h:outputstylesheet library="css" name="addtohomescreen.css">
        <script>
            addToHomescreen();
        </script>
    </h:outputstylesheet></h:outputscript></h:head>
    <h:body>

    </h:body>
</html>

In the view above, a JSF viewAction is used to initiate the MobileNavigationController doMobile() method, which sets the mobile UI into motion. From this point, the navigation can take the user to the primary movile view of the application, and it can also set any other necessary configurations. The addtohomescreen.js script (http://cubiq.org/add-to-home-screen) can be also be used to supply a nice button to recommend mobile device users to add the mobile application to their homescreen for a more rich experience. I will address some additional custom configurations for full screen web applications in a future post or the upcoming OTN article.

Creating a Simple Mobile View

Once we've provided our users with a clear path to access the mobile views, we need to ensure that the PrimeFaces mobile render kit is being used to display the mobile views. To flag a view for use with PrimeFaces Mobile, supply the "renderKitId" attribute in the <f:view> tag of your view, and apply PRIMEFACES_MOBILE as the value.

<f:view renderKitId="PRIMEFACES_MOBILE">

Another requirement or building a PrimeFaces Mobile view is to add the mobile namespace (xmlns:pm="http://primefaces.org/mobile"), as it will be used for each of the PrimeFaces Mobile specific components. It is also a good idea to include the JSF passthrough (xmlns:pt="http://xmlns.jcp.org/jsf/passthrough") namespace, as we may wish to make use of some HTML5-specific features.

A mobile page consists of a header, content, and a footer. Each mobile page is enclosed within the <pm:page> tag. A mobile view can consist of a single page enclosed in <pm:page>, or multiple pages, each with their own identifiers. In this example, we will create two views that constitute two mobile pages, the second page is accessed via a link on the first page. It is possible to utilize Facelets templates to build an entire mobile application solution, but in this example we will create each view separately. It is also possible to develop using the "single page" application strategy that is currently quite popular...we will cover more on that in the OTN article.

The PrimeFaces Mobile example in this post and also the upcoming OTN article builds upon the Acme Pools example that was used in my "PrimeFaces in the Enterprise" article for OTN (http://www.oracle.com/technetwork/articles/java/java-primefaces-2191907.html). In the full web version, the root view includes a listing of Acme Pool customers in a table view (Figure 1). We would like to transform this view (and the others) to work better on a mobile device, and also allow selection of each row, which will take us to more information on the selected customer.

Figure 1: Standard Acme Pools View

For the purposes of this post, we will work with the initial customer view to convert it into a mobile view. The view will contain a list of customers, and if you select a particular row in the view, then more information on the selected customer will be displayed. To display a table using PrimeFaces mobile, you must make use of the DataList component, which provides a convenient "clickable" link or button for each row of data. The DataList differs from a DataTable in that there are no columns in a DataList, but rather, there is one group of related data for each row of data. The group of data should be wrapped with a clickable link, which will then provide navigation for the user to the second view displaying more details on the selected item. The following code is used to develop the mobile UI for the customer data list.

Listing 1: Mobile View (mobile/index.xhtml)

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:pm="http://primefaces.org/mobile"
      xmlns:pt="http://xmlns.jcp.org/jsf/passthrough">
    <f:view renderKitId="PRIMEFACES_MOBILE">
        <h:head></h:head>
        <h:body>
            <pm:page id="customerListing">
                <pm:header>
                    Acme Pools
                </pm:header>
                <pm:content>
                    <h:form id="indexForm">
                        <p:panel header="Acme Pools Customer Listing">
                            <p:dataList id="datalist"

                                 value="#{customerController.items}"
                                 var="item"    
                                 paginator="true"
                                 pt:data-role="listview" pt:data-filter="true"
                                 rows="10"
                                 rowsPerPageTemplate="10,20,30,40,50"
                                        >
                                
                                <p:commandLink

                                   action="#{customerController.loadCustomer}">
                                  <f:param name="customer" value="#{item.customerId}"/>
                                    <h:panelGroup>

                                    <h:outputText value="#{item.customerId} - #{item.name}"/>

                                    <br/>
                                    <h:outputText value="#{item.email}"/>


                                    </h:panelGroup>
                                </p:commandLink>
                            </p:dataList>
                        </p:panel>
                    </h:form>
                </pm:content>
                <pm:footer>
                    Author: Josh Juneau
                </pm:footer>
            </pm:page>
 
        </h:body>
    </f:view>
</html>

As you can see, we flag the view for PrimeFaces Mobile use via the specification in the <f:view> tag. We then create a <pm:page>, and inside of the page we have sections for <pm:header>, <pm:content>, and <pm:footer>. The main content consists of a PrimeFaces mobile DataList that displays customer data, and the data is wrapped in a p:commandLink component. When the link is clicked, the #{customerController.loadCustomer} method is invoked, passing the ID of the selected customer. Note that the DataList component uses passthrough attributes to specify the data-role and data-filter HTML5 attributes. These are used to provide the user with a more rich experience. The filter makes it easy for the user to begin typing a value into a filter textbox, and have the list shortened to contain only the records that contain the typed text. The resulting view looks like Figure 2.

Figure 2: Mobile View

The code in Listing 2 contains the implementation for loadCustomer(). The customer ID is passed to the find() method of the EJB, which then returns the selected customer data.

Listing 2: CustomerController loadCustomer()

    public String loadCustomer() {

        Map requestMap = FacesContext.getCurrentInstance().

                getExternalContext().getRequestParameterMap();

        String customer = (String) requestMap.get("customer");

        selected = ejbFacade.find(Integer.valueOf(customer));

        return "customerInfo";

}

When a customer is selected in the DataList, the loadCustomer() method is invoked, and it results in the navigation to our second mobile view, customerInfo.xhtml (Figure 3). The second mobile view basically displays customer details, and provides a link to go back to the DataList of customers. The code for customerInfo looks like that in Listing 3.

Listing 3: customerInfo.xhtml View

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:pm="http://primefaces.org/mobile">
    <f:view renderKitId="PRIMEFACES_MOBILE">
        <h:head></h:head>
        <h:body>
           
            <pm:page id="customerInfo">
                <pm:header>
                    Acme Pools
                </pm:header>
                <pm:content>
                    <h:form>
                        <p:panel header="Acme Pools Customer Information">
                           
                            #{customerController.selected.name}
                            <br/>
                            #{customerController.selected.addressline1}
                            <br/>
                            #{customerController.selected.addressline2}
                            <br/>
                            #{customerController.selected.phone}
                            
                        </p:panel>
                    <p:commandLink action="index?transition=slide" value="Go Back"/>
                    </h:form>
                </pm:content>
                <pm:footer>
                    Author: Josh Juneau
                </pm:footer>
            </pm:page>
        </h:body>
    </f:view>
</html>

As you can see, the customerInfo view contains the same structure as the original mobile view. There are no special mobile components added, but as you can see from Figure 3, the standard PrimeFaces panel is styled to display nicely on the mobile device.

Figure 3: Mobile View Selection

Conclusion

That wraps it up for this brief look into using PrimeFaces mobile. As you can see, it is easy to develop a mobile interface for your applications. The PrimeFaces mobile suite also includes custom frameworks for navigation, events, and more, making it easy to provide a nice mobile experience. For instance, the events framework includes some swipe events, as well as taphold. It is even possible to hook into the JQuery Mobile framework to provide even more mobile events to your application.

The PrimeFaces mobile navigation framework consists of transitions, which ultimately provide your application with a smoother feel. For instance, one can provide a transition of "slide" to a button navigation, which will result in a UI view that slides into focus when the button is clicked. All of this can be tested using the PrimeFaces Showcase.

For more information on these and other important features of PrimeFaces mobile, please watch for my upcoming OTN article.

Resources

PrimeFaces Showcase: http://www.primefaces.org/showcase/mobile/

JQuery Mobile: http://jquerymobile.com/

The Chicago Coder Conference was held on Friday, August 5th. The conference venue was a sleek downtown facility on Wacker Drive. There were breakfast bagels and great coffee to start the day, along with some good networking opportunity. The keynote began at 8:30 am, where JUG member Scott Kramer spoke about the events of the day, and introduced the keynote speakers. The keynote included two speakers, each of which were executives from Chicago based companies. The cars.com executive got into some technical detail covering Hadoop, and how it works, which was quite interesting.

The sessions I attended were led by excellent speakers. Oracle’s own John Clingan spoke to Java EE 7 and Java EE 8 in his first session. His talk detailed how Java EE has evolved over the years, and he discussed some of the ideas for the future of Java EE. Those ideas encompassed a JSON-B API, incremental enhancements to many of the other APIs, continued focus on HTML5, more focus on the cloud, and some key enhancements to Java EE security. Some of the security concepts looked quite interesting, as it may be possible in the future to utilize annotation based security, rather than configuration.

Next, I attended a session by Davinder Kohli entitled “Unclouding the Cloud”. In this session, we learned the inner workings of several private and public cloud infrastructures. He and his colleague then gave a demo of OpenStack, which was interesting, as we learned how easy it was to start and deploy new WordPress sites.

The lunch was great…good food and more great networking. I then gave a talk on Java EE 7 entitled “Java EE 7 Recipes”. The talk was well received, and I had quite a few people come and ask questions after the session. I learned that many people are still not very familiar with the new Java EE, but they remember how difficult J2EE was in the past. I will be giving a similar presentation at JavaOne...what would you like for me to cover??

The next session was an excellent presentation by Simon Maple entitled “Guide to JVM Languages”. In this session, he demoed Java 8 lambdas, functional interfaces, and default methods in a live-coding demonstration. He then covered how to use some similar features in Groovy, Scala, Kotlin, Ceylon, and Xtend. This session was great, as Simon is an excellent speaker who involved the audience throughout the session. We were able to compare each of the different languages, and learn a bit about each one. The overall concept was that the JVM has many great languages…we should try to learn a few of them.

The last session I attended was presented by John Clingan, and it was covering Project Avatar. Avatar.js is meant to be a node.js solution for the JVM. In fact, most node.js applications can now be run on the JVM using Avatar.js. John talked to the reasons why Oracle wanted to develop this solution, and why it was important for the community. Node.js users could port their applications, and make use of all Java libraries since they are on the JVM with Avatar.js. Many of the Java EE APIs are being wrapped in JavaScript so that they are accessible to clients using 100% JavaScript. Oracle knows that Knockout JS and Angular JS are leading the way in single page application frameworks…and they want to enable easy development against Java EE and other JVM technologies for these front end technologies.

Overall, this was an excellent conference. Kudos go out to the Chicago Java Users Group, and the Illinois Java Users Group for doing such a great job. Big thanks to Scott Kramer for nudging me to submit a presentation for this conference…it was a great time.

Josh's Dev Blog - Java, Jakarta EE, Jython, Oracle, and More...

Thursday, August 28, 2014

JavaOne 2014 Sessions

Friday, August 22, 2014

Getting Started with PrimeFaces Mobile

Saturday, August 02, 2014

Chicago Coder Conference Trip Report