The advent of Android and the smartphone market has opened up the mobile application development avenue for the developers. Today, the focus of organizations is towards providing interface for their existing web applications onto the mobile phones, and that too not just for iPhone but for other platforms as well without having to develop their interfaces differently for each platform. With jQTouch, developers can now build smartphone interfaces for their existing web applications by simply transforming the Document Object Model (DOM) structure of their web application into an interface that appears and feels like native iPhone or Android application.

jQTouch is a jQuery plugin with native animations, automatic navigation and themes for building smartphone applications that support touch gestures. It provides applications to run in full-screen mode with custom icons and startup screens. In this article, you'll learn how easily you can design the UI for an existing web application to be accessed from smartphones.

Getting started

The approach for developing applications in jQTouch is very simple. The steps are:

• For every screen of our web app, create a separate div element and assign it a unique ID. A div element is a popular HTML element heavily used for laying out web pages. A div also helps in defining a division or section of an HTML document.
• l Create an unordered list in the home screen div element. Then, in each list item, place an anchor tag with an href that links to other divs (screens) of the application.

jQTouch will hide all the divs except the home screen, and render our Home Screen list items with attractive gradients. Tapping a list item causes the home screen to slide off and the linked div element to slide on. Hence, by using jQTouch, we can easily create and format the various screens of our web app and apply animated transitions between them. It should be noted that jQTouch takes any direct descendent in the section and converts it into a full-screen panel that can be animated in either direction.

We will make three screens for our Book Store: a Home page, a Books page, and a Contact Us page. The three pages are represented by three div elements that are assigned the unique ids home, books and contactus respectively. Each div element that is a direct descendant of the body section will become a panel in the application. The two panels, books and contactus, additionally contain paragraph elements for displaying information on their respective pages.

Our three screens are shown in Figures 1(a), 1(b), and 1 (c). And we will be calling these three main div elements as panels from now on. Each panel will also contain a toolbar for displaying the panel title and navigation buttons. The complete code of the application is shown below:

The first thing we do in the above code is linking the CSS and JavaScript files by adding references to the jQTouch stylesheet and themes. The style rules in the jqtouch.css file are used for handling animations, orientations, and so on. Also, we add references to the appropriate JavaScript files-jquery.1.3.2.min.js and jqtouch.js. Remember that jQTouch requires, and is bundled with, its own copy of jQuery (though we can link another copy if desired). For the application to work, the reference to jQuery must be added before the reference to jQTouch.

As far as themes are concerned, jQTouch requires one basic theme to make page transitions work and provide iPhone native screens. jQTouch provides two themes:

We can also create our own custom themes either by building them from scratch or by modifying existing jQTouch themes.

After linking the CSS and Javascript files, we need to initialize the jQTouch object, as shown here:

This function initializes a jQTouch object and assigns it to variable jQT. The variable jQT is then used to manipulate jQTouch with JavaScript through its functions. We can also specify certain optional property values while initializing the jQTouch object, enabling us to customize the behavior of our web application. We will examine these properties later in this article.

As we said earlier, all the screens of a web application are represented by individual div elements. All panels have toolbars, which are divs of class toolbar. The toolbar is displayed at the top of the every panel and appears as in the traditional iPhone format. A toolbar always contains an h1 element that represents the title of the panel and two optional buttons, one of which can be a back button. The back button appears on the left side of the toolbar and is used for navigating to the previous page.

We have added buttons with button and back class names in the toolbar of both the Books and Contact Us pages. The href on the back button is set to #, which will navigate to the previous panel. We can, of course, navigate to a panel with a specific ID instead, by setting the href to point at it. For example, if the href of the back button is set to #home, we will always be sent to home. The two list items (li) in the home panel have hyperlinks pointing to books and contactus, which means that when these list items are selected, we will jump to the panel of the respective id.

We want the home page to display navigation links to the Book and Contact Us pages. To display such navigation links, we use an unordered list. We can add simple classes to the

elements to change their style, for example, edgetoedge or rounded:

Each item within an unordered list contains a hyperlink that navigates to the designated application panel. We may optionally apply the arrow class to the list items, which will display an arrow to the right of the item. The icon tells the user that there is an additional web page (screen) to be viewed.

Whenever we navigate to a new page, two animations occur: The new page animates in and the old page animates out. When we select a back button, reverse animation takes place. When a list item is selected, the default animation makes it appear as if the new page is sliding in from the right side of the screen. We can move to another web page by applying any of the eight different animation effects: slide, slideup, dissolve, fade, flip, pop, swap, and cube. Each visited screen is inserted into the page history, and we can navigate back to any previous page of the history by using the back button.

When the code is executed, the first panel, home, appears. The panel title is Book Store, which is followed by two list items, Books and Contact Us. When the Books list item is clicked, we jump to the books panel. The title of the target panel is Books and there's a Back button on the toolbar. The books panel information appears below the toolbar. If we select the Back button, we will return to the home panel. Similarly, when Contact Us is selected, we jump to the contactus panel.

Applying the Apple theme

Our first round of coding used the jqt theme, which is fairly dark. Let's see how our page looks when the theme is changed to apple. This is simple to do-we just need to replace the word jqt with apple in the line that adds reference to the jQTouch theme. Thus:

is replaced by:

Now our application will appear in the apple theme.