You are on page 1of 6

ICEmobile : JSP Quick Start Tutorial

This page last changed on Jan 15, 2013 by tyler.johnson.

JSP Quick Start Tutorial


This tutorial explains the steps required to configure a basic ICEmobile JSP application. This tutorial will cover the bare essentials of a JSP skeleton project. Spring MVC integration, form handling, and Ajax techniques will be covered in a future tutorial. For this tutorial we will be using the Eclipse IDE but other IDEs such as NetBeans or IntelliJ Idea with JSP support will do. There are no additional IDE plugins required for this tutorial.

Requirements
1. Eclipse IDE 2. ICEmobile bundle

Step 1: Create the Eclipse project


Our first step is to create a new Dynamic Web Project in Eclipse. In the Eclipse menu, select File > New > Dynamic Web Project:

NOTE: If you do not see a menu item for Dynamic Web Project, select Other... > Web > Dynamic Web Project In the Dynamic Web Project dialog, specify the project name, server to deploy to and servlet version. For this example, we've specified 'hello-icemobile' for the project name, Tomcat 7 for the target server, and Servlet 3.0 for the Servlet/Dynamic Web Module version (Servlet 2.5 or Servlet 3.0 are supported).

Document generated by Confluence on Mar 28, 2014 10:25

Page 1

Click Next until you reach the Web Module dialog. Make sure that you've checked 'Generate web.xml deployment descriptor'. Then click Finish.

Step 2: Add the necessary jars


Document generated by Confluence on Mar 28, 2014 10:25 Page 2

Add the following jars to the /WebContent/WEB-INF/lib directory in the project. These jars can be found in the /lib and /samples/icemobilespring/lib directories in the ICEmobile bundle. icemobile-jsp.jar jstl-api-1.2.jar jstl-impl-1.2.jar

Step 3: Update the web.xml


The following parameter configures ICEmobile to run in either Development or Production modes.

<context-param> <param-name>org.icemobile.project.stage</param-name> <param-value>production</param-value> </context-param>

JSTL Taglib detection IDE's such as Eclipse can have difficulties with detecting a JSP taglib in the project. In the event that Eclipse shows an error that the JSTL C library cannot be found, the following addition to the web.xml should help resolve the issue:

<jsp-config>

Document generated by Confluence on Mar 28, 2014 10:25

Page 3

<taglib> <taglib-uri>http://java.sun.com/jsp/jstl/core</taglib-uri> <taglib-location>/META-INF/c.tld</taglib-location> </taglib> </jsp-config>

Step 4: Create your first ICEmobile page!


We will now create our first page. Right-click on the WebContent folder in the project, and select New > JSP file.

Name the file index.jsp and click Finish. When the page loads in the Eclipse editor, clear the contents so that we can work from scratch. Add the core JSTL and ICEmobile taglib declarations.

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%@ taglib uri="http://www.icemobile.org/tags" prefix="mobi" %>

Add the HTML 5 DocType and HTML head and body tags:

<!DOCTYPE html> <html> <head> </head> <body> </body>

Document generated by Confluence on Mar 28, 2014 10:25

Page 4

</html>

Add the following to the <head> section of index.xhtml. Lastly we're using the <mobi:deviceResource to detect and automatically adapt to the current browser or mobile device. The deviceResource tag will automatically render the recommended meta tags for mobile devices, the device-specific CSS and Javascript files.

<title>Hello ICEmobile!</title> <mobi:deviceResource/>

In the body section, add the following tags to create a page panel, with a header, body, and footer section.

<mobi:pagePanel> <mobi:pagePanelHeader>Hello ICEmobile!</mobi:pagePanelHeader> <mobi:pagePanelBody> </mobi:pagePanelBody> <mobi:pagePanelFooter>Footer</mobi:pagePanelFooter> </mobi:pagePanel>

For the body content, we'll use a <mobi:fieldSetGroup> with 3 example rows, <mobi:fieldSetRow>.

<mobi:pagePanelBody> <mobi:fieldsetGroup style="margin:5px;"> <mobi:fieldsetRow>Item 1</mobi:fieldsetRow> <mobi:fieldsetRow>Item 2</mobi:fieldsetRow> <mobi:fieldsetRow>Item 3</mobi:fieldsetRow> </mobi:fieldsetGroup> </mobi:pagePanelBody>

Step 6: Run the project


Let's test out the application. Deploy the application to a server (Tomcat in this tutorial), navigate to the application in a browser and you should see the following:

Document generated by Confluence on Mar 28, 2014 10:25

Page 5

Source
hello-icemobile.zip

For additional assistance, please contact product.support@icesoft.com.

Document generated by Confluence on Mar 28, 2014 10:25

Page 6