changes.
| | h1. 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: |
| | \\ |
| | |
| | * Any Java EE enabled IDE. This demo will use [Eclipse IDE for Java EE Developers|http://www.eclipse.org/downloads/]. |
| | * [ICEmobile|http://www.icesoft.org/downloads/icemobile-downloads.jsf] |
| | * Any supported server. This demo will use [Apache Tomcat 7.x (Binary Distribution \-> Core \-> .zip)|http://tomcat.apache.org/download-70.cgi#7.0.30]\\ |
| | |
| | h3. 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). |
| | |
| | \\ |
| | |
| | !newDynamicOther.png|align=center,width=508,height=354! |
| | |
| | \\ |
| | |
| | 2. Select *Dynamic Web Project* from *web* folder in the wizard. |
| | |
| | \\ |
| | |
| | !dynamicWebProject.png|align=center,width=451,height=481! |
| | |
| | \\ |
| | |
| | 3. Let's give our project a name, select our configuration, and create a new Runtime. |
| | |
| | |
| | # Our project name will be *HelloWorld.* |
| | # We will be creating a JSF 2.1 application so we will select *JavaServer Faces v2.1 Project*. |
| | # Click on New Runtime |
| | |
| | \\ |
| | |
| | !Screen shot 2012-09-26 at 4.16.51 PM.png|align=center,width=488,height=515! |
| | |
| | \\ |
| | |
| | 4. Select *Apache Tomcat v7* as our runtime environment. |
| | |
| | \\ |
| | |
| | !Screen shot 2012-09-26 at 4.06.18 PM.png|align=center,width=462,height=476! |
| | |
| | \\ |
| | |
| | 5. We need to specify our Tomcat installation directory. Navigate to the folder containing your unzipped apache-tomcat-7.0.30 download. Select Finish. |
| | |
| | \\ |
| | |
| | !Screen shot 2012-09-26 at 4.22.20 PM.png|align=center,width=440,height=440! |
| | |
| | \\ |
| | |
| | 6. Our completed wizard should now look like this. Click *Next*. |
| | |
| | \\ |
| | |
| | !Screen shot 2012-09-26 at 4.24.03 PM.png|align=center,width=432,height=437! |
| | |
| | \\ |
| | |
| | 7. There are no additional configurations required on this screen of the wizard. Click *Next*. |
| | |
| | \\ |
| | |
| | !Screen shot 2012-09-26 at 4.26.11 PM.png|align=center,width=434,height=425! |
| | |
| | \\ |
| | |
| | 8. For the Content Directory field, change *WebContent* to *web* to maintain consistency across IDEs. |
| | |
| | \\ |
| | |
| | !Screen shot 2012-09-26 at 4.27.41 PM.png|align=center,width=402,height=364! |
| | |
| | \\ |
| | |
| | 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. |
| | |
| | \\ |
| | |
| | !Screen shot 2012-09-26 at 4.29.41 PM.png|align=center,width=446,height=517! |
| | |
| | \\ |
| | |
| | 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*. |
| | |
| | \\ |
| | |
| | !Screen shot 2012-09-26 at 4.34.55 PM.png|align=center,width=554,height=362! |
| | |
| | \\ |
| | |
| | 11. After completing the JSF library download, we should now see the following. Click *Finish*. |
| | |
| | \\ |
| | |
| | !Screen shot 2012-09-26 at 4.36.35 PM.png|align=center,width=396,height=462! |
| | |
| | \\ |
| | |
| | h3. Add ICEmobile capabilities |
| | |
| | \\ |
| | |
| | 1. After successfully creating our JSF 2.0 project, we should now have the following project structure. |
| | |
| | \\ |
| | |
| | !Screen shot 2012-09-27 at 9.55.24 AM.png|align=center,width=295,height=329! |
| | |
| | \\ |
| | |
| | 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. |
| | |
| | \\ |
| | |
| | !Screen shot 2012-09-27 at 10.05.02 AM.png|align=center,width=601,height=339! |
| | |
| | \\ |
| | |
| | 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*. |
| | |
| | |
| | \\ |
| | |
| | !newFile.png|align=center,width=598,height=307! |
| | |
| | \\ |
| | |
| | 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:deviceStylesheet> will automatically deliver the correct CSS stylesheet based on the detected mobile device. |
| | |
| | \\ |
| | |
| | {code} |
| | <!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:deviceStylesheet /> |
| | </h:head> |
| | |
| | <h:body> |
| | <h:form> |
| | </h:form> |
| | </h:body> |
| | </html> |
| | {code} |
| | \\ |
| | |
| | 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*. |
| | |
| | \\ |
| | |
| | {code} |
| | <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> |
| | {code} |
| | \\ |
| | |
| | 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). |
| | |
| | |
| | \\ |
| | |
| | {code} |
| | <?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> |
| | {code} |
| | \\ |
| | |
| | 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: |
| | |
| | \\ |
| | |
| | {code} |
| | <html> |
| | <head> |
| | </head> |
| | <body> |
| | <% |
| | response.sendRedirect("./helloWorld.jsf"); |
| | %> |
| | </body> |
| | </html> |
| | {code} |
| | \\ |
| | |
| | 8. Let's now configure Tomcat 7. In the *Servers* view below our markup, click *new server wizard*. |
| | |
| | |
| | \\ |
| | |
| | !Screen shot 2012-09-27 at 10.21.49 AM.png|align=center! |
| | |
| | \\ |
| | |
| | 9. Ensure that your screen looks like the following. Click *Next*. |
| | |
| | \\ |
| | |
| | !Screen shot 2012-09-27 at 10.23.45 AM.png|align=center,width=497,height=537! |
| | |
| | \\ |
| | |
| | 10. Let's now deploy our JSF 2.0 ICEmobile application to Tomcat 7. Select *HelloWorld* and click *Add* and then *Finish*. |
| | |
| | \\ |
| | |
| | !Screen shot 2012-09-27 at 10.25.38 AM.png|align=center! |
| | |
| | \\ |
| | |
| | 11. In the *Servers* view, right click on our newly created server instance and click *Start*. |
| | |
| | \\ |
| | |
| | !startServer.png|align=center,width=651,height=403! |
| | |
| | \\ |
| | |
| | 12. We can now view our first ICEmobile application here *[http://_localhost_:8080/HelloWorld|http://localhost:8080/HelloWorld]*. |
| | |
| | \\ |
| | |
| | !IMG_2395.png|align=center,width=419,height=629! |
| | |
| | \\ |
| | |
| | h3. Source |
| | | |
| | ^HelloWorld.zip |
Manually Configure ICEmobile and JSF