Archive for March, 2010

Short examples of jQTouch and chain.js

Recently, I got back on track with the RIA meetup and put together a brief overview of two jQuery libraries that I have found useful recently: jQTouch and chain.js.  I’d like to briefly recap that session here and post the code that I wrote to demonstrate how they work.  I’d like to thank and acknowledge David Kaneda and Rizqi Ahmad, the authors of these two libraries, for sharing their insightful work with the world.

Let’s begin with a quick overview:

jQTouch

  • What: A jQuery library (more like a framework actually) that provides tools that will make an HTML/JS/CSS app look and feel more like a native iphone application
  • Key Advantages
    • Provides a set of stylesheets that make extensive use of the safari-specific classes.  These enable CSS based transitions, gradients, and much more.
    • Implements a “page management” framework that allows you to construct a “multi-page” experience within a single HTML file

Chain.js

  • What: jQuery library that binds a javascript array to an HTML template.  It exists within the realm of JS template engines; however, it’s texture is a little more data-driven
  • Key Advantages
    • Abstracts the relationship between your Model and View, allowing for a cleaner client-side architecture
    • Override-able sorting and filtering of views.

And now, let’s turn our attention to three very simple example files that I’ve included that demonstrate how to use these libraries.  Please download the ZIP file here and extract it to a directory of your choice.  Then just open the HTML examples files in a browser.  They should work fine as all paths are relative.

Example 1 – Hello, jQTouch World

This file is simply a shell for holding a jQTouch application.  Its only functionality is an ability to click on the “Go Forward” link that moves the application to a second screen.  From there you can click to go back to the main homepage.

Use this example to understand how the jQTouch framework selectively displays DIV tags that sit as direct children to the main BODY tag.  The DIV with ID ‘home’ is displayed by default.  You are able to navigate to other DIVs (which are hidden by default) by clicking on an anchor tag that uses the # syntax to identify the ID of the DIV.  Notice the use of a few special classes that cause toolbars to show and buttons to render.

The documentation on these special classes is a bit thin.  I’ve resorted to simply combing the CSS files to figure out which classes are available.

Example 2 – Using Chain.js to build a dynamic list

In this example, I demonstrate how one can use Chain.js to build a simple dynamic list.  The input box on the top is used as a filter.  Typing letters in there will constrict the list to show only those names that match.

Notice how Chain.js treats the unordered list with ID friends, as a template.  Once I’ve bound “friends” to the JSON array in the file (done by calling .chain()) Chain.js examines the contents of “friends” and replicates those elements for each element in the JSON array.  Also, chain uses the class attribute of elements and interprets it as a key by which it indexes into properties of the objects in the JSON array (phew.  Sorry for the dense language).  The result is that you have a complete unordered list that is bound to client side data.

Now that your data is on the client, chain gives you some neat tools that allow you to sort and filter the list.  Try them out by uncommenting the JS lines toward the top of the file.  It should be noted that if you are dealing with lists that are several hundred elements, you must be mindful of performance – especially if you are using this library on mobile devices that have limited processing power — lest you learn the hard way (like me ?)

Example 3 – Putting it together

Now that you are an expert at examples 1 and 2, example 3 will be easy.  It just combines the two previous concepts and shows how one might use these libraries to build a rich mobile web app.  The examples demonstrates a very simple master-details type of setup.  Clearly, in the real world, having all the data on the client like this probably wouldn’t fly, but now that you understand the mechanics, you can insert your own code to call back to your server.

Using this example as a starting point, try adding back the filter box, or perhaps set up a simple grid and use chain to sort the elements in the grid.

Conclusion

jQTouch and Chain.js are wonderful little libraries that accelerate your development of RIAs.  Although neither is perfect, I heartily recommend them if you are considering constructing a RIA experience for the mobile web.