Mobile JSF: Using ICEmobile to rapidly build mobile applicationsThe 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 Requirements
Part 1: Device Detection and Layout
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 1If 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
Defining our layout
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:
Step 2Please 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 3Create 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 4Please 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 5Paste 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 6Paste 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 applicationSmall ViewOur small view when rendered on an iPhone, will look like the following:
![]() Large ViewOur large view in an iPad will have a left and right column like so:
![]() Source |
Part 1 - Device Detection and Layout
© Copyright 2016 ICEsoft Technologies Canada Corp.