jQuery Mobile

Chapter 6. jQuery Mobile in Action

Putting this all together, we are ready to build an actual mobile application with jQuery Mobile. Let’s start with a simple mobile Twitter client: jqmTweet. jqmTweet will have the following features:

• Display the first page of tweets of the desired Twitter user in a list view

• Tapping on a tweet will display a detail page for that tweet

• The Twitter user and number of tweets to display needs to be configurable

• The application must handle errors gracefully

Application Pages

One of the best ways to approach a new jQuery Mobile application is to think of it in terms of individual pages. Because it’s so easy to create individual pages in jQuery Mobile, it often makes sense to build out all of the pages with placeholder text that you can fill in with data later. In addition to getting you up and running quickly, it also provides the potential benefit of creating an interactive prototype that you can use for demonstrations or user testing. Need to get stakeholder buy-in for the new application? Want to do some feature validation with your users? No problem, just mock out your application pages in jQuery Mobile.

For jqmTweet, the application will have a main page (with the list of tweets), a detail page (for displaying the details of an individual tweet), a configuration page (for updating the Twitter user name and number of tweets), and an error page (for error dialogs).

First off, the main page will look as shown in Example 6-1.

Example 6-1. jqmTweet main tweet ...