JSF Quick Start Tutorial

This 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:

Configure Plugin
Create & Run ICEmobile Application
Application Review
Palette Demo (optional)

Here is what we will need to get started:

ICEmobile also offers a Netbeans IDE plugin which can be found in the ICEmobile downloads section. If you want to use an alternative Java EE IDE, you can follow our JSF Manual Configuration Tutorial.

Configure the plugin

1. In Eclipse, navigate to Help -> Install New Software.

2. Select Add to begin installing the ICEmobile Eclipse plugin.

3. Select Archive and navigate to the location of the ICEmobile Eclipse plugin zip file. You could also unzip the ICEmobile Eclipse plugin and select Local.

4. Check the ICEfaces/ICEmobile Tool Bundle checkbox to select all ICEfaces/ICEmobile modules for installation. You can expand this list by clicking the right facing arrow. Select Next.

5. The next two steps require that you review the installation details and accept the terms of the license agreement (not shown).

NOTE: You will need to click next on the following security warning. This will not harm your system in anyway.

Create your first ICEmobile Application

1. We will now begin creating our ICEmobile application. In the Eclipse menu, select New -> Dynamic Web Project.

2. We will name our Dynamic Web Project 'helloWorld', we will select Tomcat 7 as our target runtime, and we will configure this JSF application with ICEmobile.

3. No changes are required on the 'Java' screen so we can select Next.

4. No changes are required on the 'Web Module' screen so we can select Next.

5. In order to use JSF in our application, we need the JSF libraries. Eclipse does not bundle these jars so we must download them. Select the download icon on the right of the screen.

6. For this tutorial, we will select the Oracle 2.1.6 JSF implementation.

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

1. We will now run our application on Tomcat 7.x. Click the green arrow icon and select Run on Server.

2. Deploy the application on Tomcat 7.x. Ensure that the 'helloWorld' is in the configured list.

3. When first running this project in Eclipse, the application will open it in the Eclipse web browser which is not representative of a real world browser. To change this in Eclipse, select the Window menu option and then Web Browser.

Instead we will view the application using a mobile device by navigating to http://localhost:8080/helloWorld. Our application will look like the following:

Review Application

The 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 Demo

Rather 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:

1. Open WEB-INF/includes/views/small.xhtml by selecting small.xhtml and Open With -> Webpage Editor.

2. You can now drag components from the palette onto the canvas or to the source view.

JSF Quick Start Tutorial