JSF Quick Start TutorialThis tutorial will demonstrate how to configure an ICEmobile JSF application in a matter of minutes. We will cover the exact steps required to create a simple 'Hello World' ICEmobile JSF application using the Eclipse ICEmobile plugin. Our tutorial will consist of 4 parts:
Here is what we will need to get started:
Configure the plugin
Create your first ICEmobile Application
7. The next step (not shown) requires that you accept the terms of the JSF download. 8. Our final configuration step is to create a blank ICEmobile project template. This default project will include a landing page which will direct us to either a small or large view layout (depending on device), a pre-configured web.xml and the small and large xhtml views. We cover this is the Application Review section below.
Run Application
Review ApplicationThe default template has provided us with a ready to run application. Our landing page is webContent/index.xhtml which will direct us to either a small or large view page depending on the screen size of the user's mobile device. 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. 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. <?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> Both WEB-INF/includes/views/small.xhtml and WEB-INF/includes/views/large.xhtml have identical markup and we leave it up to the user to tailor the layout for the screen size of the targeted 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:icecore="http://www.icefaces.org/icefaces/core" xmlns:mobi="http://www.icesoft.com/icefaces/mobile/component"> <h:form> <mobi:fieldsetGroup> <mobi:fieldsetRow> Small view - Welcome to ICEmobile </mobi:fieldsetRow> <mobi:fieldsetRow> The small view layout will accommodate mobile devices with smaller viewing areas such as phones. </mobi:fieldsetRow> </mobi:fieldsetGroup> </h:form> </ui:composition> Palette DemoRather than work with the xhtml source directly, the Eclipse ICEmobile plugin offers the option of using a palette to drag and drop components onto a canvas. While this is a very helpful tool for rapid prototyping, working with the source directly gives the developer ultimate control over page layout and component functionality. To use the palette:
You are now ready to being developing your ICEmobile application! |
JSF Quick Start Tutorial
© Copyright 2016 ICEsoft Technologies Canada Corp.