Develop compelling iphone applications with JSF + Facelets + Seam
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:
-
<html xmlns="http://www.w3.org/1999/xhtml"
-
xmlns:s="http://jboss.com/products/seam/taglib"
-
xmlns:h="http://java.sun.com/jsf/html"
-
xmlns:f="http://java.sun.com/jsf/core"
-
xmlns:ui="http://java.sun.com/jsf/facelets">
-
<f:view contentType="text/html">
-
-
<head>
-
<title>Your Title</title>
-
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
-
<link href="iui/iui.css" rel="stylesheet" type="text/css"/>
-
<script type="application/x-javascript" src="iui/iui.js"></script>
-
</head>
-
-
<body>
-
<!-- ul and div elements as required by iui -->
-
</body>
-
-
</f:view>
-
</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
-
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
-
xmlns:ui="http://java.sun.com/jsf/facelets"
-
xmlns:h="http://java.sun.com/jsf/html"
-
xmlns:f="http://java.sun.com/jsf/core"
-
xmlns:s="http://jboss.com/products/seam/taglib">
-
-
<ul id="#{siteSearchAction.tag}" title="#{siteSearchAction.tag}">
-
<ui:repeat value="#{siteSearchAction.sitesByTag}" var="site">
-
<li><a href="view.html?siteId=#{site.id}" target="_self">#{site.name}</a></li>
-
</ui:repeat>
-
</ul>
-
-
</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! 
January 8th, 2008 at 4:21 pm
[...] Michael Yuan has a quick article about using Seam to program web apps for the iPhone in Seam. [...]
March 26th, 2008 at 5:52 pm
Dear Michael,
I don’t know, if this is the right place to ask you some questions about Seam in the context of mobile application development…
The reason i’m asking you this, is because of your great expertise in both area’s.
I’m a student at a high school in the Netherlands and a reader of your good book (JBoss Seam: Simplicity and Power Beyond Java).
As a study project, we are investigating for a bank, what Java frameworks are the best candidates to reimplement the presentation tier for there mobile application. (currently written in Struts/Stxx/XSLT/Spring/SOAP/JMS).
The requirements are as follows:
- defacto standard / big community
- short learning curve
- device capability recognition / transparency
- support for separation of roles (java developer vs page designer)
So far we can oversee, we think that a combination of JSF / Ericsson MobileFaces would be a good choice:
JSF because:
- it’s primarily a Sun specification, so available on every JavaEE server.
- Sophisticated life-cycle , event model and component model
- Big community of component vendors and possibility to create own custom components
- Other technologies relies on it or extends it
- Support for several render technologies and possibility to create own custom renderers
Ericsson MobileFaces because:
- specially written to enhance development of mobile applications
- relies on JSF and supports sizing depending on device capabilities
- makes it possible to plug-in a device recognition repository such as WURFL
My questions to you are:
- Is JBoss Seam a good consideration in the context of a ‘stateless’ mobile application, and what are the benefits? (there is no use of EJB3 or persistence).
- Are you aware of ideas from JBoss to further extend the Seam framework with interesting things for mobile development?
Please if you have better advises, considerations, directions lets us know, specially for technologies for device recognition and screen adaptation.
Thanks, in advance!
Mohamed
April 16th, 2008 at 12:32 pm
Mohamed,
1. Yes, Seam in general simplifies things a lot in JSF development. For starters, it makes it very easy to write RESTful pages that are accessibled via GET URLs — I think that is a pretty important feature for mobile as people like to text mobile web links around in SMS.
2. I do not know any specific mobile initiative inside JBoss. But this is an open source project and you are welcome to contribute!
cheers
Michael
June 13th, 2008 at 7:26 am
It’s great at least that apple has opened up the iPhone to allow developers to build stuff for it. Glad apple understands open source.
June 28th, 2008 at 12:26 am
Sounds like a good app. Can’t wait to see how it turns out. For latess news on the iPhone and other information check out this site http://www.iphonenewsvault.com. I found this site very useful.