Mobilize Your RIA in 10 Minutes

Added by Brad Kroeger, last edited by Brad Kroeger on Jan 17, 2013  (view change)
Table of Contents

Mobilize Your RIA in 10 Minutes


In this tutorial we will create a mobile page for an existing web application. We will add ICEmobile to an ICEfaces application and see how ICEmobile identifies the nature of the device accessing the page and delivers the "best" version for that device. This is referred to as "Adaptive Web Design".

The existing web application we will work with is called "Tracker". This application is used to track scores (or results) for different types (such as game scores and monthly sales). The application has three pages - home, type and game.

Tracker application desktop pages: Home, Golf Type, Golf Game


Steps to Mobilize Your RIA:

  1. Add ICEmobile
  2. Redirect Mobile Browsers to Mobile Pages
  3. Add Mobile Page
  4. Add Mobile Navigation Rules (if necessary)

    Sample Small View (Phone) Content

  5. Small View Home Page


Add ICEmobile

Download the ICEmobile bundle from http://www.icesoft.org/java/downloads/icemobile-downloads.jsf. Add icefaces-mobi.jar to your existing ICEfaces application.

Redirect Mobile Browsers to Mobile Pages

The entry point to our application is index.jsp as configured in web.xml: 

	<welcome-file-list>
	  <welcome-file>index.jsp</welcome-file>
	</welcome-file-list>


The current content of index.jsp: 

<%
    response.sendRedirect("desktop/home.jsf");
%>


Add code to detect mobile browsers and redirect to mobile pages, when necessary: 

<%@ page import="org.icemobile.util.ClientDescriptor" %>
<%
    org.icemobile.util.ClientDescriptor client = ClientDescriptor.getInstance(request);
    if(!client.isDesktopBrowser()){
        response.sendRedirect("mobile/m_home.jsf");
    }else{
        response.sendRedirect("desktop/home.jsf");
    }
%>


Add Mobile Page

Content of our mobile home page m_home.jsf:

<!DOCTYPE html >

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:mobi="http://www.icesoft.com/icefaces/mobile/component">

<f:view contentType="text/html">

    <h:head>
        <title>#{msgs['title']} #{title}</title>
        <mobi:deviceResource />
    </h:head>
	
    <h:body>
        <mobi:smallView>
            <ui:param name="viewSize" value="small" />
            <ui:include src="/WEB-INF/mobile/includes/small/m_s_home.xhtml" />
        </mobi:smallView>
        <mobi:largeView>
            <ui:param name="viewSize" value="large" />
            <ui:include src="/WEB-INF/mobile/includes/large/m_l_home.xhtml" />
        </mobi:largeView>
    </h:body>

</f:view>
</html>


The <mobi: deviceResource/> component will render the necessary head resources for a device, including the device-specific meta tags, the CSS stylesheets for the device theme, and required javascript.

The <mobi:smallView> and <mobi:largeView> components can be used to define view specific content. The <mobi:smallView> content will be rendered for smaller devices such as phones, while content nested within <mobi:largeView> will be rendered for devices such as tablets. This technique combined with the Facelets tag hander <ui:include/> can build highly reusable and customizable views.

It is a best practice to avoid using the more resource intensive ace: components in mobile pages - we try to limit ourselves to stock JSF h: tags and the ICEmobile mobi: tags. Also note the use of html 5 which is widely supported in mobile browsers.

Add Mobile Navigation Rules (if necessary)

If your current ICEfaces application has multiple pages with navigation rules, you can easily re-use existing navigation rules and outcomes by adding a mobile version of each navigation rule in faces-config.xml:

Existing navigation rule:

    <!-- NAVIGATE TO HOME PAGE -->
	<navigation-rule>
	  <from-view-id>/desktop/*</from-view-id>
	  <navigation-case>
	    <from-outcome>home_page</from-outcome>
	    <to-view-id>/desktop/home.xhtml</to-view-id>
	    <redirect include-view-params="true"/>    
	  </navigation-case>
	</navigation-rule>


Add a mobile version of the navigation rule: 

    <!-- NAVIGATE TO MOBILE HOME PAGE -->
    <navigation-rule>
      <from-view-id>/mobile/*</from-view-id>
      <navigation-case>
        <from-outcome>home_page</from-outcome>
        <to-view-id>/mobile/m_home.xhtml</to-view-id>
        <redirect include-view-params="true"/>    
      </navigation-case>
    </navigation-rule>


Small View Home Page

The steps up to this point have 'Mobilized' our application. Now, when we access the application with a mobile device, the application will automatically redirect us to the mobile home page which in turn, includes either small size (phone) or large size (tablet) content.

Below you see the small mobile home page content. This page is using ICEmobile mobi: tags to render the exact same backing bean logic used for the desktop page, formatted for a mobile device. 

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:mobi="http://www.icesoft.com/icefaces/mobile/component">

<mobi:pagePanel>

    <f:facet name="header">
        <h:outputText rendered="#{not appUserBean.loggedIn}"
                      value="#{msgs['trackerSignIn']}"
                      style="font-size: 1em;" />
        <h:outputText rendered="#{appUserBean.loggedIn}"
                      value="#{msgs['title']}"
                      style="font-size: 1em;" />
    </f:facet>

    <f:facet name="body">
	<mobi:fieldsetGroup>
	    <mobi:fieldsetRow style="padding-bottom:10px;">        
	        #{msgs['intro']}
	    </mobi:fieldsetRow>
	</mobi:fieldsetGroup>
	
	<mobi:outputList>
	    <mobi:outputListItem group="true">#{msgs['types']}</mobi:outputListItem>
	    <mobi:outputListItems value="#{homeBackingBean.types}" 
	                          var="type" >
	        <h:link value="#{type.name}"
	                outcome="#{type.name}"
	                includeViewParams="true">
	            <f:param name="entityId" value="#{type.typeId}" />
                    <p>
                        #{type.summary}
                    </p>
	        </h:link>

	    </mobi:outputListItems>
	</mobi:outputList>
    </f:facet>

   <f:facet name="footer">
       <h:outputText rendered="#{appUserBean.loggedIn}"
                     value="#{msgs['welcome']} #{appUserBean.appUser.name}"
                     style="font-size: 0.8em;" />
   </f:facet>

</mobi:pagePanel>

</ui:composition>


The mobi:pagePanel component is used to facilitate a small view (phone) layout with 'header' 'body' and 'footer' regions. The mobi: components will automatically give us the look and feel of native mobile applications and will adjust the layout of the page to match the screen real estate.

When the large view (tablet) content is created, it will provide the same behavior except with a larger screen size available, we can choose to use different components.

After performing these steps, when localhost:8080/Tracker/ is visited by a handheld mobile browser, the index.jsp page will redirect us to the mobile home page shown below. The desktop and mobile home pages use the exact same backing bean logic. There has been no need to touch our java code when creating the mobile page.

You can see that applications developed with ICEmobile look and feel like native mobile applications - ICEmobile's automatic device detection and theming adjusts the look and feel to match the device type (in this case, an ipod touch).

Tracker desktop home page and mobile home page:
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.

© Copyright 2016 ICEsoft Technologies Canada Corp.