One way to build applications for the iPhone is to create a Web application that tries to look and behave like a native one. Currently, many Javascript libraries are being developed that try to accomplish just that. One of the big reasons for choosing this route is that developing such applications is so much easier compared to the Apple-way (learn Objective-C, build and test on the local emulator and try to get it accepted by AppleStore).
JQTouch is a jQuery plugin for mobile web development, optimized for the iPhone and iPod touch. Among the other alternatives, this one has a nice design and uses the popular jQuery framework. In this post, I am reporting about my efforts to use this library from Seaside which is a component-based Web application framework for Smalltalk. It has great support for jQuery in the sense that the developer is presented with an elegant abstraction layer to do all the fancy selection and Ajax stuff.
Single HTML
JQTouch works with a single HTML page model in which each iPhone page is represented by its own div element. JQTouch will show the div element which has the CSS class current and hides all others. This is what the body of such a page looks like.
<div id="home" class="current">;
<div id="toolbar">;
....
</div>;
<div id="search">;
...
</div>;
<div id="results">;
...
</div>;
Navigating from one page to another can be animated using effects such as slide, flip, cube and dissolve.
Ajax only
Because this single HTML page is loaded once, every interaction with the Seaside application is done using Ajax. For example, a search page typically shows a form field to enter the search pattern. Instead of a regular form submit, you have to setup the ajax request to process the form and upon success (client-side!) navigate to the results page.
- missing image /2010/01/seaside_jqtouch.png
With only a few small classes, I was able to wrap the JQTouch library (by reference only) and write some methods that makes it easy to write pages and forms. I published the Seaside extensions to the Cincom Public Repository as a bundle named JQTouch. Have a look at the examples to see how it can be used. This package requires a separate download of the JQTouch library as its assets are not included in the FileLibraryReference class. For testing JQTouch applications on your development machine, you can use iPhoney (Mac only), Safari or Chrome which all are based on the Webkit framework.
This package is written for VisualWorks with Seaside 3+. With minor changes this package should be portable to previous versions (2.8) or other platforms (Pharo,VASmalltalk).