Build iPhone, Android and iPad Applications using jQTouch

Wednesday, November 17, 2010

Before we start using jQTouch, I would love to put across a few facts about jQTouch.
jQTouch is a plugin for jQuery which means it only enhances jQuery to build smartphone applications that support swiping, and all the other touch gestures. Before you begin development with jQTouch, I would suggest you get comfortable with jQuery.
jQTouch applications are not developed like regular web applications, where in an index page will be loaded with links that lead to other pages, and each page is loaded from the server every time a visitor clicks on a link. With jQTouch, all the pages are loaded once inside the index.html and each page is represented as a seperate div element in the index page. For example, the following html code snippet (

content

) represents a page in your jQTouch application and a link to that page is as follows (link to page name). You can have as many pages as you want with all the pages having links to other pages inside the index.html file, but remember all this is stored in one single file index.html. The link clicks and navigation actions are implemented using javascript inbuilt into jQTouch. You will get to understand this as we implement twigle. Let's first get to know more about twigle. It is a twitter search application for smartphones loaded from the web. We will use jQTouch for client side development, jQuery ajax plugin for the server side communication and PHP in the backend to get the search results from the twitter Search API.
jQTouch comes with javascript files and css files with themes. This defines the look and feel of the application. You won't have to bother about the design as the plugin already comes with predefined styles and graphics from which you can use as the base and extend it further to create your own unique looks. There are two themes that come with the plugin: apple theme and jqt theme.  Just like the name implies, the apple theme looks and feels like native iPhone OS apps.
The plugin styles are predefined for the toolbar, rounded button, etc. You will discover this as we move on.
jQTouch applications are basically developed in a single file, usually index.html. It contains the html code, javascript code and the styling. Everything in your application happens inside this file which gets loaded into your smartphone once like gmail and the other google applications.

For example

"[code] 
" 
 

 
 
 
 Home Page 
 
 this is the home page 
"
[/code]"

The above html code should produce the following:

After installing and initializing the jQtouch plugin with the apple theme, you should have the following:

Notice how the

Home Page

gets styled into the iPhone or iPad toolbar's look and feel. Now, on the whole, the page looks more or less like a native i