Mobile JSF: Using ICEmobile to rapidly build mobile applications

The goal of this 4 part tutorial is to build an ICEmobile application that will allow users to take a photo using their device's camera, upload that photo to the application, and notify users of the new image upload using ICEmobile cloud push. The application will also provide screen size detection and allow navigation between views.

Part 1: Device Detection and Layout
Part 2: Camera Application
Part 3: Push Notification
Part 4: Page Navigation

Requirements

Successfully created a basic ICEmobile application using one of the following tutorials:
1. Eclise Plugin Quick Start
2. Manually configure ICEmobile
ICEmobile Container

Part 1: Device Detection and Layout

Device detection from an application developer's point of view can mean different things. ICEmobile quantifies device detection as determining the host operation system and the screen size of the calling device. ICEmobile components can use this information to create flexible layouts that can be used in a variety of scenarios. Operating system detection can be used when it is important that the mobile application matches the look and feel of the host operating system. Screen size detection can be used to determine what content can be included in either a small view such a handheld or a large view such as a tablet.

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 component supports a variety of popular mobile operating systems including small and large screen devices. For example, the iPhone and iPad themes are similar but there are subtle differences that insure that the screen real-estate is optimally used with regards to font size, margins and padding.

Step 1

If you have created your application using an ICEmobile IDE plugin, the landing page web/index.xhtml will contain the markup directly below. If not, please create web/index.xhtml in your ICEmobile project and add the following markup:

web/index.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:mobi="http://www.icesoft.com/icefaces/mobile/component">
<h:head>
	<title>ICEfaces</title>
	<mobi:deviceResource />
</h:head>
<h:body>
	<mobi:smallView>
		<ui:param name="viewSize" value="small" />
		<!--define your small view page -->
		<ui:include src="WEB-INF/includes/views/small.xhtml" />
	</mobi:smallView>
	<mobi:largeView>
		<ui:param name="viewSize" value="large" />
		<!--define your large view page -->
		<ui:include src="WEB-INF/includes/views/large.xhtml" />
	</mobi:largeView>
</h:body>
</html>

Screen Size

Gone are the days of having to code for specific browsers, but the proliferation of different screen sizes has added complexity to page layout. A handheld application (small view) can display a simple table but it will not look as expected and will compromise the user experience. HTML and CSS techniques can be used to make a small view application look better on a large view, however this does not address the issue that a larger screen can show more data than a smaller view. The bottom line is that different page layouts are warranted for different screen sizes, but at the same time we want to avoid complexity around doing multiple page designs.

Defining our layout

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.

We will start by having a small view which will allow a user to take a photo using their device's camera, upload that photo, and then have it displayed within the current view. The large view will provide the same behavior except that since we have a larger screen size, we will display all user uploaded photos on the left hand side of the screen and the camera/upload components on the right. Let's start by defining our required pages in web/index.xhtml:

camera-capture.xhtml - Provides camera and upload functionality and we will be shared between both the small and large view.
photo-display.xhtml - Used by the small view and will display the last uploaded photo.
photo-list.xhtml - Used by large view and will display all user uploaded photos.

Step 2

Please replace the existing <body> content in index.xhtml with the following:

web/index.xhtml

        <mobi:smallView>
		<ui:param name="viewSize" value="small" />
		<ui:include src="WEB-INF/includes/contents/camera-capture.xhtml" />
		<ui:include src="WEB-INF/includes/contents/photo-display.xhtml" />
	</mobi:smallView>
	<mobi:largeView>
		<ui:param name="viewSize" value="large" />
		<mobi:splitPane>
			<f:facet name="left">
				<ui:include src="WEB-INF/includes/contents/photo-list.xhtml" />
			</f:facet>
			<f:facet name="right">
				<ui:include src="WEB-INF/includes/contents/camera-capture.xhtml" />
			</f:facet>
		</mobi:splitPane>
	</mobi:largeView>

Step 3

Create a folder named contents in /web/WEB-INF/includes. Once complete, create 3 new blank files: camera-capture.xhtml, photo-display.xhtml and photo-list.xhtml.

Step 4

Please paste the following code in camera-capture.xhtml:

WEB-INF/includes/contents/camera-capture.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:icecore="http://www.icefaces.org/icefaces/core"
	xmlns:mobi="http://www.icesoft.com/icefaces/mobile/component">
	<h:form>
		<mobi:fieldsetGroup>
		     <mobi:fieldsetRow>
        		 camera-capture.xhtml
        	     </mobi:fieldsetRow>
		</mobi:fieldsetGroup>
	</h:form>
</ui:composition>

Step 5

Paste the following code into photo-display.xhtml:

WEB-INF/includes/contents/photo-display.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:icecore="http://www.icefaces.org/icefaces/core"
	xmlns:mobi="http://www.icesoft.com/icefaces/mobile/component">
	<h:form>
		<mobi:fieldsetGroup>
	             <mobi:fieldsetRow>
    			 Small view - photo-display.xhtml
    		     </mobi:fieldsetRow>
		</mobi:fieldsetGroup>
	</h:form>
</ui:composition>

Step 6

Paste the following code into photo-list.xhtml:

WEB-INF/includes/contents/photo-list.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:icecore="http://www.icefaces.org/icefaces/core"
	xmlns:mobi="http://www.icesoft.com/icefaces/mobile/component">
	<h:form>
		<mobi:fieldsetGroup>
		     <mobi:fieldsetRow>
   		           Large view - photo-list.xhtml
    		     </mobi:fieldsetRow>
		</mobi:fieldsetGroup>
	</h:form>
</ui:composition>

Run the application

Small View

Our small view when rendered on an iPhone, will look like the following:

Large View

Our large view in an iPad will have a left and right column like so:

Source

part1-layout.zip

Part 1 - Device Detection and Layout