Skip to main content

MobileFaces, Mobile JSF Kit and GlassFish

Posted by rogerk on June 28, 2007 at 2:06 PM PDT

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.



Prerequisites:

  1. A working build environment with ant,
    at least JDK 5,
    and GlassFish.
    I've recently run MobileFaces and the Mobile JSF Kit on the GlassFish v2 B52 Promoted Build.

Setup:

  1. Download and unpack the Mobile Faces Source to some directory, say MobileFaces.
  2. 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.
  3. Build MobileFaces from source: ant -f build.xml.glassfish build
  4. Download and unpack the Mobile JSF Kit. After you unpack it you will see a samples directory.
  5. 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.
  6. Build the HelloMobile application: ant -f build.xml.glassfish build
  7. 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.

  1. Download and install the Openwave Phone Simulator from here.
  2. Start up the phone simulator. In addition to the phone simulator you will see a console window for the simulator.
  3. phone-simulator.GIF simulator-console.GIF
  4. 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.
  5. 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.
  6. Enter the URL http://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:

phone-simulator-1.GIF simulator-console-1.GIF


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.



Resources:


GlassFish Application Server

MobileFaces

Mobile JSF Kit

JavaServer Faces




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..

Related Topics >>

Comments

 Hi We maintain a JSF 2.0 version of mobile JSF with ...

Hi

We maintain a JSF 2.0 version of mobile JSF with WML and XHTML MP renderkits here github.com/omarbenhamid/JSF-4-Mobile, we plan to add HTML 5 support later on ...