Before you start

To get the most from this tutorial you should be comfortable constructing web applications with HTML, JavaScript, and CSS. Additionally, the server-side code accompanying the mobile web application is written in PHP and MySQL. Familiarity with server-side programming can also help you as you follow along with this tutorial. If you are familiar with other server-side platforms such as ASP classic, ASP.Net, or Java™ Server Pages, you can find the server-side code quite easy to follow. Familiarity with jQuery is not necessary but, of course, will not hurt. In fact, this tutorial is written from the perspective of a mobile programmer looking to explore a new framework rather than from that of a jQuery professional launching into the mobile space. After completing this tutorial, you will have learned how to construct a basic jQuery Mobile application and manage data between the mobile browser and a back-end server. The application demonstrates how to perform basic record operations such as (insert, update, delete) on sales-related data. You also witness how universal your mobile web application is as you run it from multiple browsers. Last, you install shortcuts to your mobile web application to the home screen of both iPod and Android devices to demonstrate how to deploy a web application.

About this tutorial

This tutorial introduces the jQuery Mobile (JQM) framework for writing mobile web applications targeted at the mobile industry's leading browsers. JQM is used to provide intuitive and consistent user experience for web-based applications running on mobile devices such as iPhone, iPad, Android, WebOS, BlackBerry Version 6 (Torch, Playbook), and others. The tutorial begins with a high-level look at the JQM project and the relation of JQM to, and dependence on, HTML5. After a brief look at one of the many ways in which you can construct a JQM application and some of the ways in which JQM enhances fundamental web UI elements, the tutorial takes a look at a basic sales force automation requirement.

With the problem in hand, the tutorial maps out a plan to implement a solution for mobile device users, without the need for native mobile development. The completed application is demonstrated so that you can get a feel for where the tutorial will take you as you follow along and build your own application, step by step. The source files are examined, function by function, as you learn to implement the solution using JQM. The tutorial concludes with a couple of tricks on making the application easy for your users to access on their mobile devices.

Back to top

Prerequisites

To follow this tutorial, you need the following:

• Text editor—You can use any text editor you prefer. An editor with syntax highlighting might come in handy. Notepad++ is an open source editor that works well.
• JQuery Mobile links—You actually do not need to download anything. The necessary files are available through jQuery's Content Delivery Network (CDN).
• Web browser—This browser is used to view the jQuery Mobile help and documentation.
• WebKit (Safari) or Chrome Browser—These browsers support jQuery Mobile development on the desktop.
• Mobile device—You can use the iPod Touch, Android, BlackBerry Torch, or similarly capable mobile devices.
• PHP and MySQL hosting environment—This is used for the server side of the application

I created the code samples for this tutorial on a MacBook Pro with VMWare Fusion running Windows® 7. I use Notepad++ for editing the files because it has good syntax highlighting plus secure FTP for making interacting with server-based PHP files very straightforward. You can edit files in vi, but who wants to? For working with the MySQL database, I used the phpMyAdmin available with my hosting account. For testing on a physical device, I used a Nexus One running Android 2.2 and an iPod Touch running iOS 4.1.

See Resources for helpful links; download the source code for the sample application.

1 of 7 | Next

Comments

Back to top

Table of contents

• Before you start
• jQuery Mobile
• The application architecture
• Summary
• Download
• Resources
• About the author

---

1 of 7 | Next

Local resources

• IBM Innovation Center - Austin, TX
• IBM Innovation Center - Chicago, IL
• IBM Innovation Center - Dallas, TX
• IBM Innovation Center - San Mateo, CA
• IBM Innovation Center - Waltham, MA
• Technical Briefings in North America

Dig deeper into XML on developerWorks

Try IBM PureSystems. No charge.

Experience today!

---

Get started with the cloud-based trial and pattern development kit.