Professional Documents
Culture Documents
Requirements
1. Eclipse IDE 2. ICEmobile bundle
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).
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.
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
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>
Page 3
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:
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.
In the body section, add the following tags to create a page panel, with a header, body, and footer section.
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>
Page 5
Source
hello-icemobile.zip
Page 6