Roger is the JavaServer Faces co-specification lead.
Roger has extensively been involved with server side web technologies
and products since 1997. He started working on JavaServer Faces in
2001, as a member of the reference implementation team. He has
experience with Servlet, JSP technologies, and most recently
he has been involved with different rendering technologies for JSF.
The core MobileFaces library is currently based on the JSF 1.1 specification. The library not only makes it easier to develop mobile web applications, but it also utilizes a key extensible piece of the JSF architecture - RenderKits and Renderers. This allows the same underlying component model to render not only in HTML, but markup that is suitable for mobile devices (such as WML). Here, we'll take a look at how we can get one of the sample Mobile JSF Kit applications up and running on the GlassFish application server.
Download and unpack the Mobile Faces Source to some directory, say MobileFaces.
Go to the MobileFaces directory. Get the build.xml script and the associated build.properties file for GlassFish from here and unpack it in the MobileFaces directory. Edit the glassfish.home property in the build.properties.glassfish file to refer to your GlassFish top level directory.
Build MobileFaces from source: ant -f build.xml.glassfish build
Download and unpack the Mobile JSF Kit. After you unpack it you will see a samples directory.
Go to the HelloMobile directory under the samples directry - this will be the sample application we'll be running. Currently, the build scripts are set up to work with Tomcat. Get the build.xml script and the associated build.properties file for GlassFish from here and unpack it in the HelloMobile directory. Edit the glassfish.home property in the build.properties.glassfish file to refer to your GlassFish top level directory. Edit the mobilfaces.home property in the build.properties.glassfish file to refer to your MobileFaces directory.
Build the HelloMobile application: ant -f build.xml.glassfish build
Start the GlassFish application server (if it's not already started) and deploy the application to the GlassFish application server. The helloMobile_R1A.war file will be under the HelloMobile/dist directory. The application will be deployed as: helloMobile_R1A
Running the Application:
To test your mobile web application you can use a phone simulator with a mobile browser. Here, we will use the Openwave Phone Simulator with the Openwave Mobile Browser. The simulator uses the same browser that is embedded in real mobile phones. I believe this simulator only works on Windows - but they may have a Linux version available as well.
Download and install the Openwave Phone Simulator from here.
Start up the phone simulator. In addition to the phone simulator you will see a console window for the simulator.
Configure the phone simulator to your environment. Under Settings select Server Profiles. There you can set your network settings. I used http-direct with no proxy.
Configure the phone simulator with the appropriate User-Agent. To test the WML rendering capabilities of MobileFaces, go to Settings, then Device Settings, and change the User Agent field to: OPWV-SDK-WML.
Enter the URL https://localhost:8080/helloMobile_R1A in the phone simulator URL field and press "enter".
Now you should see the application loaded into the simulator. You can also see the page content sent in the response in the simulator console window:
Under The Hood:
The MobileFaces architecture includes a servlet filter that examines the user-agent information on the incoming request. The architecture also extends the JSF RenderKitFactory to load up RenderKits for xhtmL-MP and WML in addition to the Standard HTML RenderKit. The extensibility of the JSF architecture allows you to create additional RenderKits. Based on the user-agent it will create the appropriate RenderKit that will render the markup in the JSF Render Response Phase. MobileFaces also includes a small library of custom tags to use in your pages and these can be used along with the Standard HTML JSF tags.
It's also worth noting that there is a Mobile JSF Kit Netbeans plugin available for download at the Mobile JSF site. But that's a topic for discussion on another day..