Manually Configure ICEmobile and JSF

Added by Tyler Johnson, last edited by Tyler Johnson on Jan 15, 2013  (view change)
Table of Contents

Manually Configure ICEmobile and JSF


This tutorial will demonstrate how to manually create a simple 'Hello World' ICEmobile application. We will manually configure the application by adding the required libraries instead of using an ICEmobile  IDE plugin. We will create our project using the Eclipse IDE, add in the ICEmobile and ICEfaces libraries, create our content, and deploy the sample to Tomcat 7. Here is what we will need to get started:

Create a new Dynamic Web Project in Eclipse


1. Right click within the Package Explorer and select New -> Other (if Dynamic Web Project is not a menu option).



2. Select Dynamic Web Project from web folder in the wizard.



3. Let's give our project a name, select our configuration, and create a new Runtime.

  1. Our project name will be HelloWorld.
  2. We will be creating a JSF 2.1 application so we will select JavaServer Faces v2.1 Project.
  3. Click on New Runtime



4. Select Apache Tomcat v7 as our runtime environment.



5. We need to specify our Tomcat installation directory. Navigate to the folder containing your unzipped apache-tomcat-7.0.30 download. Select Finish.



6. Our completed wizard should now look like this. Click Next.



7. There are no additional configurations required on this screen of the wizard. Click Next.



8. For the Content Directory field, change WebContent to web to maintain consistency across IDEs.



9. The very first time we create a new JSF project in Eclipse, we must download the current JSF API/Implementation jar. Click on the download icon on the right of the screen.



10. We will select the JSF 2.1 (2.1.6) version from the Oracle Corporation and click Next. We will then Accept the terms of the license agreement (screenshot not shown) and click Finish.



11. After completing the JSF library download, we should now see the following. Click Finish.



Add ICEmobile capabilities


1. After successfully creating our JSF 2.0 project, we should now have the following project structure.



2. We will now add the ICEmobile and ICEfaces libraries. ICEmobile requires the ICEfaces AJAX framework library so we will add icefaces-mobi.jar and icefaces.jar to the WEB-INF/lib folder of our project. These two jar files can be found in the icemobile download bundle in the icemobile/lib folder.



3. Let's now create our first ICEmobile page. We will right click on the web folder and select New -> File. We will name our file helloWorld.xhtml.



4. Let's paste the following markup into helloWorld.xhtml. This is a basic page containing our <html>, <head>, <body> and <form> tags. We have the xlms:mobi namespace which allows us to use the ICEmobile components on our page, we are setting the content type to UTF-8 and also using several meta tags for mobile-friendly page display settings, and the <mobi:deviceResource> will automatically deliver the correct CSS stylesheet based on the detected mobile device.


<!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:mobi="http://www.icesoft.com/icefaces/mobile/component">
<h:head>
	<title>Hello World</title>
	<mobi:deviceResource />
</h:head>

<h:body>
	<h:form>
	</h:form>
</h:body>
</html>


5. Let's add several ICEmobile layout components to our page. The mobi:panelPanel will provide header, body and footer regions to our page while the mobi:fieldSetGroup will help style our content based on the target mobile device. Please add the following markup inside of the <h:form> tag in helloWorld.xhtml.


      <mobi:pagePanel>
	  <f:facet name="header">Header</f:facet>
	  <f:facet name="body">
		<mobi:fieldsetGroup>Hello World</mobi:fieldsetGroup>
	  </f:facet>
	  <f:facet name="footer">Footer</f:facet>
      </mobi:pagePanel>


6. In addition to our page markup, we need to add our web.xml paramters. All pages with a .jsf suffix will be handled by the JSF Faces Servlet and our landing page will be index.jsp which will simply forward us to helloWorld.xhtml. The page index.jsp is used to ensure compatability with older servers that will not redirect to a non-existing page (ie. helloWorld.jsf).


<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
metadata-complete="false" version="3.0">
  <display-name>Carousel Tutorial</display-name>
  <context-param>
    <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
    <param-value>server</param-value>
  </context-param>
  <context-param>
    <param-name>javax.faces.PROJECT_STAGE</param-name>
    <param-value>Development</param-value>
  </context-param>
  <servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <multipart-config/>
  </servlet>
  <servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.jsf</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>


7. Our final step in our project creation is to create index.jsp. We will right click on our web folder and select New -> File (step 3 above). Add the following markup to index.jsp:


<html>
    <head>
    </head>
        <body>
	      <%
	      	response.sendRedirect("./helloWorld.jsf");
	      %>
       </body>
</html>


8. Let's now configure Tomcat 7. In the Servers view below our markup, click new server wizard.



9. Ensure that your screen looks like the following. Click Next.



10. Let's now deploy our JSF 2.0 ICEmobile application to Tomcat 7. Select HelloWorld and click Add and then Finish.



11. In the Servers view, right click on our newly created server instance and click Start.



12. We can now view our first ICEmobile application here http://localhost:8080/HelloWorld.
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.

© Copyright 2016 ICEsoft Technologies Canada Corp.