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.
Hi, Thanks for the sample. It solved the problem I had with filtering data within a mobile app. I have one question. What would I need to do if wanted to add the person’s age along with the firstName and lastName? I want the age to be part of the filtering, but I only want it to show up on the page once the name is clicked. I don’t want the age to show up in the list of names.
Thanks!
Glad it was helpful! One way you could accomplish that is by adding a hidden SPAN tag within the LI element. if you had:
<span style="display:none" class="age"></span>
inside the the LI element, you could then grab the value when you transition to the details screen and display it there. Hope that helps!
Nice!! That totally worked! Thank you!
Hi Dante, sorry to bother you again with these questions. I’m creating a demo using your example and I’m trying to get an image to show up. I can get the images to show in the list of names, but it won’t show on the next page once the name is clicked. What should I do? I only want the image to be viewable once you get to the Details page, but it’ll only show on the list page. Thanks again and sorry if this question is ridiculous.
no worries at all!
well, i’d need to actually see the details of how you’ve implemented it, but if there is some error in the HTML, the best way to find that sort of thing is to use Firebug.
if you haven’t used firebug before, i highly recommend that you get it. it will make finding errors much simpler.
If you’re still having trouble, feel free to post some code here or, just email me at dante dot cassanego at gmail dot com.
Good For Newbie !
Try This One
==============================
jQT.Floaty
@import “jqtouch.min.css”;
@import “theme.min.css”;
var jQT = new $.jQTouch({
icon: ‘jqtouch.png’,
addGlossToIcon: false,
startupScreen: ‘jqt_startup.png’,
statusBar: ‘black’,
preloadImages: [
'img/back_button.png',
'img/back_button_clicked.png',
'img/button_clicked.png',
'img/grayButton.png',
'img/whiteButton.png',
'img/loading.gif'
]
});
iDemo
Blog
Twitter
Rss
About
Contact
Photo
Video
Calender
New Page
Back
[Fruit Name]
What applications get approved by Apple?
Reasons why Apple rejects iPhone applications.
Back
[Fruit Name]
Obama appeals to Iranian people in Internet video (AP)
Thousands of BA flights canceled as crew on strike (AP)
Back
[Fruit Name]
Recently, Apple has notified iPhone application developers that they have raised the standards for approval into the App Store. Simply put, they are requiring Apps to contain sufficient amounts of content to appeal to a broad audience. They will not be accepting Apps that are solely intended for an individual blogger with a small audience or a company attempting to create an App used entirely as a promotional tool (yellow-like apps).
Reasons why Apple rejects an application:
View this post in browser.
Back
[Fruit Name]
AP – In a fresh appeal directly to the Iranian people, President Barack Obama says in an online video that the United States wants more educational and cultural exchanges for their students and better access to the Internet to give them a more hopeful future.
Back
[Fruit Name]
Next
Back
Video
Hi there,
I had been digging into chain.js and working on creating some webpages that would simulate iPhone native app behavior but had noticed some issues when it comes to chaining which can be observed in your examples as well.
I added some simple code for profiling to example #3 and each successive click and following attempt to show ‘friend details’ required more computing time which on an iPhone device becomes significant after as few as 10 repeats. Not to mention the obvious fact that the example uses very small amount of data, which if increased would make the iPhone device hardly responsive in 2 clicks…
In your case a simple change in the handler function ‘friendclick’ would suffice:
where-
$(“#thedetails”).item(“replace”, {firstName:first, lastName:last}).chain();
change to-
$(“#thedetails”).item(“replace”, {firstName:first, lastName:last});
Since you have chained this item earlier in the code, the calling of ‘chain’ method here is redundant at best.
I was just looking for some more examples and practices on using chain.js because I still have some more unresolved issues in my code and stumbled upon your code so I thought I’d try and help.
Hi Stan, thanks! You’re absolutely right on all counts. Removing the redundant call to chain will help. However, I’d like to emphasize that for large lists, this is definitely not the right solution. This example is really just a trivial starter that gets one working in chain and jQTouch. If you have a list of 50, 100, 500, you probably want to take a different approach than build the list in javascript. the iphone just doesn’t execute the JS that fast.
True, JS isn’t very fast, DOM manipulation appears to be slower and I might very well be on the way of using an alternate approach. We’ll see.
Hey again,
Just to make a quick follow-up:
I decided against using chainJS for the templates I needed as it appeared to be quite an overkill in my situation bringing a lot of drawbacks concerning the speed and responsiveness of the iPhone.
With a small enhancement (a few custom events) of the much lighter jsRepeater framework I achieved the functionality I needed and gained increase in speed by some 10-fold with the examples I used.
Hi Dante-
Thanks for the information. One question I have is it possible to trigger the display of another screen after a timed event? I just don’t see much information out there on the web.
Thanks-
Gary
Hi Gary – Although i haven’t done this myself, I am sure that it is possible (it is software after all
). I just took a quick look at the source code – it looks like what you want to do is figure out a way to call the ‘liveTap’ method. You’ll need to examine the source for that method and reverse engineer exactly what to pass into it since it is expecting a tap event rather than a timer; however, this shouldn’t be too hard. Good luck!
Thanks Dante.
I ended up using the goTo() that is triggered after the pageAnimationEnd event fires
-gary