This is the last part of a three parts jQuery Mobile Tutorial. For introduction to the Tutorial please refer to Part I.

The Tutorial walks you through a process of building an application which will allow you to maintain a list of your favorite websites and share sites from the list with other mobile users through QR codes. In Part II we implemented functionality to display QR codes for sites from a static, hardcoded list. In this part we will add ability to maintain the list of sites.

3.1 List storage

Before we start adding and deleting list items we need to have a mechanism to store a list. We will use HTML5 local storage.

Let’s start by adding a function to retrieve a list from the local storage. It will also initialize the list using defaults if a list cannot be found in the local storage.

You can of course use your preferred sites to initialize the list.

Now we can use the list to update cotent of the Home page:

Next we have to modify pagebeforechange event handler to catch requests to display the Home page in addition to the previously implemented code handling QR Code page display requests:

Finally we have to make sure that the Home page is properly populated when loaded for the first time.

This replicates functionality developed in Part II except that the site list is now pulled from the local storage instead of being hardcoded.

3.2 Adding sites

To be able to add a site, first we will create an additional page with a form to capture a site url.

Next we will add a a link to the Add URL page on the Home page header.

We will also have to capture the form submit event and save a newly entered url in the local storage.

3.3 Deleting sites

List management would not be complete without an ability to delete items from the list. We will start by adding Delete buttons to the list items on the Home page. Let’s modify the showUrlList function.

We are using a split button list. You can find out more about jQuery Mobile list capabilities here.

Clicking on a Delete button will open up a Delete URL dialog box. We need to add the dialog box to the html file.

Dialog box buttons are positioned using a layout grid.

The dialog box has to be dynamically populated with a site url. We need to modify pagebeforechange event handler to capture requests to display the dialog box.  We also need to write a function to update content of the dialog box.

Finally we need to capture the dialog box submit requests and remove a site from the local storage.

Complete source code is shown below:

We also made a small addition to the css file to center display of a url, and make look of Cancel and Delete button consistent in the Delete URL dialog box.

This completes the Tutorial. We built a simple but fully functional web application utilizing many features of jQuery Mobile framework. You can access the application on your mobile phone at http://rtekie.herokuapp.com/shareqr3.3.html. Sample screen shots are shown below:

You can find more tutorials and other resources at http://jquerymobile.com/resources/.
What do you think about this tutorial?

Advertisements