How to develop smartphone apps with jQTouch

BANGALORE, INDIA: 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.

Also read: Loading a Maps API site in a Native Android Application

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.

Also read: AngularJS: A new way to develop web apps

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.

Click here to know more!