Archive for January 8th, 2008

Develop compelling iphone applications with JSF + Facelets + Seam

Tuesday, January 8th, 2008

I recently had the pleasure to write an iphone application using JSF + Facelets + Seam. It is mostly a smooth experience but there are also some gotchas I'd like to share with the Seam community.

Okay, first things first, what is an "iphone application", you ask? The iphone SDK has not been released yet! Well, I am referring to a web application that simulates iphone's native look-and-feel via JavaScript and special Safari markups. In particular, I am using the iui library. It works great on an iphone (or even in a desktop browser -- try the official iui demo here)!

So, what are the issues using the iui library with JSF + Facelets + Seam?

The first and biggest issue is that iui and Safari expects the page to be in text/html while Facelets + Seam renders text/xhtml. For some obscure reason (a bug in Safari as Firefox does not display the same issue), this really messes up the navigation. To fix that, you can put the page content inside a pair of <f:view> tags to set the content type properly. Your page will look something like this:

PLAIN TEXT
XML:
  1. <html xmlns="http://www.w3.org/1999/xhtml"
  2.       xmlns:s="http://jboss.com/products/seam/taglib"
  3.       xmlns:h="http://java.sun.com/jsf/html"
  4.       xmlns:f="http://java.sun.com/jsf/core"
  5.       xmlns:ui="http://java.sun.com/jsf/facelets">
  6. <f:view contentType="text/html">
  7.    
  8.     <head>
  9.         <title>Your Title</title>
  10.         <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
  11.         <link href="iui/iui.css" rel="stylesheet" type="text/css"/>
  12.         <script type="application/x-javascript" src="iui/iui.js"></script>
  13.     </head>
  14.  
  15.     <body>
  16.         <!-- ul and div elements as required by iui -->
  17.     </body>
  18.  
  19. </f:view>
  20. </html>

Notice that the viewport meta data is very useful in iphone development. By default, iphone displays the "thumbnail view" of most web pages when the page is loaded. The words on the page are unreadable in the thumbnail mode. The user is expected to zoom in to read via finger gestures. That works for most large web pages designed for deskto browsers. But you do not want this if your site is optimized for the iphone -- you want the site to display as it is from start up. The viewport element allows you to specify the zooming behavior for this page.

The second issue is that when iui loads pages, it tries to load page fragments via Ajax to provide nice page transition visual effects, as well as nice navigation buttons. To do that some of your dynamic web pages must be provided without the <html> or <body> tags. The facelets <ui:composition> is ideal for this. Here is how one of my pages look like

PLAIN TEXT
XML:
  1. <ui:composition xmlns="http://www.w3.org/1999/xhtml"
  2.                 xmlns:ui="http://java.sun.com/jsf/facelets"
  3.                 xmlns:h="http://java.sun.com/jsf/html"
  4.                 xmlns:f="http://java.sun.com/jsf/core"
  5.                 xmlns:s="http://jboss.com/products/seam/taglib">
  6.    
  7.     <ul id="#{siteSearchAction.tag}" title="#{siteSearchAction.tag}">
  8.         <ui:repeat value="#{siteSearchAction.sitesByTag}" var="site">
  9.             <li><a href="view.html?siteId=#{site.id}" target="_self">#{site.name}</a></li>
  10.         </ui:repeat>
  11.     </ul>
  12.  
  13. </ui:composition>

When the user clicks a link to this page, the dynamically generated <ul> list will be rendered according to iui stylesheet, with all the bells and whistles of the "wait" animation and "sliding door" page transition in effect.

Anyway, aside from those two issues, developing for the iphone is really a breeze. What is the application I am writing? Well, you will know in a few days! Subscribe to this blog via SMS! :)

Posted in java, mobile | 5 Comments »