iPhone Web Applications with iUI and Ruby on Rails – Part 1

Since my last post outlining the different iPhone web apps, I’ve had a chance to play around with iUI a little more and get a successful app (for my side project, Notes/Tasks) up and running.  As there still is not a lot of documentation on using iUI, I figured I would sit and write down some of what I’ve learned.  As I’ve been developing the backend in Ruby on Rails, I figured I’d also add some tips and tricks for getting iUI to work well with dynamic content.  This article will cover the basic of creating a web application with iUI, including creating buttons, using forms and lists, and also how to integrate it with rails’ MVC framework.

Background
The app I’m using for demonstration is a side project of mine – building a web interface for a notes and tasks desktop application that synchs with an online server.  The desired functionality for the web is fairly simple: it needs restrict access to uses who have logged in, be able to display lists of notes and tasks, details for each individual note or task, edit the text of a note, mark a task as completed, and create new notes and tasks.  I’ve already written the API for the server (also in rails) so this project will focus on creating the user front end, rather than the backend application code.

iPhone Web Development Tools

I’ve been looking for an easy set of stylesheets and javascripts to create nice looking iPhone enabled web apps.  After some cursory searching, I’ve found a couple of resources, listed below, with my thoughts.

There seem to be a few toolkits out there, but nothing that has been developed into a stable version.  I think that most people bailed on the web apps when the real iPhone SDK came out in January, so there doesn’t seem to be much action.  However, I still see a big use for iPhone web apps as a prototyping tool for the real thing – at least that’s what I’m interested in.

iUI

A good start to a generic iPhone web app library.  Hasn’t been updated in a while (since November, 2007) but looks like the 0.30 version is scheduled to come out any day now.  This project has the laudable goal of making developement for the iPhone as easy as coding HTML – no knowledge of javascript or css necessary.  Sounds great, and they’ve made good progress, but I ran into quite a few problems.  First, there were quite a few rendering bugs – background images appeared all over the place, forms didn’t work, links were spotty and the text rendering looked terrible.  My guess is there hasn’t been any active development since the 2.0 firmware was realased which include updates to the WebKit rendering engine.  Also, the lack of any documentation was really frustrating.

iPhone Sample Code and Examples

This isn’t really a library, and I have a sinking suspision that it was based on the early work of the iUI folks, but is a helpful resource nonetheless.  Basically, the site provides examples of different iPhone web pages that can be used to fake the look of a real app.  I found that this site was in generally better shape than the iUI library, but was very kludgy.  Again, very little documentation didn’t help matters.  For example, the way the javascript is written removes any link functionality – <a> tags are repurposed for displaying in-page divs which gives it the sliding effect.  However, to link to an outside site, one has to add an ‘onclick’ javascript function to manually change the window.location.href url to the link you want to follow.  Very annoying.

iPhone Toolbox

This is a general resource rather than a library.  But, they provide a bunch of useful links to other sites and iPhone emulators which can be helpful.  Also, the site provides lists of cool webapps, and for you folks with hacked phones, icon sets and wallpapers.