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

In Part I we developed simple static pages which form a foundation of the application we are building. In this part, we will start adding dynamic functionality.

The application will allow you to maintain a list of your favorite websites and share sites from the list with other mobile users through QR codes.

2.1 Adding a list

Let’s continue by adding a list of sites to the Home page. jQuery Mobile has a very strong list view capability. In Part III we will add ability to maintain the site list. For now let’s use a static, hardcoded list. Let’s start by replacing content area of the Home page with this:


<div data-role="content">
<ul data-role="listview">
<li><a href="#qrcode">ctoinsights.wordpress.com</a></li>
<li><a href="#qrcode">www.book-current.com</a></li>
</ul>
</div>

view raw

shareqr2.1.1.html

hosted with ❤ by GitHub

Feel free to use any websites you like instead of the two included above.

Next we will add a page which will display QR code of a site:


<div data-role="page" id="qrcode">
<div data-role="header" data-theme="b" data-position="fixed">
<a href="#home" data-icon="home" data-iconpos="notext">Home</a>
<h1>QR Code</h1>
<a href="#home" data-icon="arrow-l" data-rel="back">Back</a>
</div>
<div data-role="content">
</div>
<div data-role="footer" class="ui-bar" data-theme="b" data-position="fixed" data-id="footer">
<a href="#about" data-icon="info">About</a>
</div>
</div>

view raw

shareqr2.1.2.html

hosted with ❤ by GitHub

At this point navigation between the Home page and QR Code page should be working. We are ready to start adding dynamic functionality.

2.2 Your first dynamic page

We will pass a site to be displayed on the QR Code page as a url parmeter. Let’s make one more change to the content of the Home page:


<div data-role="content">
<ul data-role="listview">
<li><a href="#qrcode?url=http%3A%2F%2Fctoinsights.wordpress.com">ctoinsights.wordpress.com</a></li>
<li><a href="#qrcode?url=http%3A%2F%2Fwww.book-current.com">www.book-current.com</a></li>
</ul>
</div>

view raw

shareqr2.2.1.html

hosted with ❤ by GitHub

Parameters are encoded. In Part III we will handle encoding in the application code. For now, since we are hardcoding the site list, we are manually encoding the url parameters.

jQuery Mobile by default ignores url parameters. To handle them we need to start writing JavaScript code.

jQuery Mobile offers a number of custom events. One of them is pagebeforechange event. It can be used to capture requests to display the QR Code page and dynamically inject page content before presenting it to the user. Documented JavaScript code is shown below:


// Listen for any attempts to call changePage().
$(document).bind("pagebeforechange", function(e, data) {
// We only want to handle changePage() calls where the caller is asking to load a page by URL.
if (typeof data.toPage === "string") {
// We only want to handle #qrcode url.
var u = $.mobile.path.parseUrl(data.toPage);
var qrcode = /^#qrcode/;
if (u.hash.search(qrcode) !== -1) {
// Display QR code for the selected URL.
showQRCode(u, data.options);
e.preventDefault();
}
}
});
// Load the QR Code for a specific url passed in as a parameter.
// Generate markup for the page, and then make that page the current active page.
function showQRCode(urlObj, options) {
// Get the url parameter
var qrUrl = decodeURIComponent(urlObj.hash.replace(/.*url=/, ""));
// The page we use to display QR code is already in the DOM.
// The id of the page we are going to write the content into is specified in the hash before the '?'.
var pageSelector = urlObj.hash.replace(/\?.*$/, "");
if (qrUrl) {
// Get the page we are going to write content into.
var $page = $(pageSelector);
// Get the header for the page.
var $header = $page.children(":jqmData(role=header)");
// Find the h1 element in the header and inject the hostname from the url.
$header.find("h1").html(getHostname(qrUrl));
// Get the content area element for the page.
var $content = $page.children(":jqmData(role=content)");
// The markup we are going to inject into the content area of the page.
var markup = "<img class='center' src=https://chart.googleapis.com/chart?chs=200×200&cht=qr&chl=" + qrUrl + " alt=" + qrUrl + " />";
// Inject the QR code markup into the content element.
$content.html(markup);
// Make sure the url displayed in the the browser's location field includes parameters
options.dataUrl = urlObj.href;
// Now call changePage() and tell it to switch to the page we just modified.
$.mobile.changePage($page, options);
}
}
// Extract hostname from a url.
function getHostname(url) {
return decodeURIComponent(url).replace(/.*\/\//, "").replace(/\/.*$/, "");
}

view raw

shareqr2.2.js

hosted with ❤ by GitHub

We are using Google Chart API to display the QR code. Please also note the use of :jqmData selectors. Here is a paragraph from the jQuery Mobile Documentation explaining the selectors:

“When finding elements by their jQuery Mobile data attribute, please use the custom selector :jqmData(), as it automatically incorporates namespaced data attributes into the lookup when they are in use. For example, instead of calling $("div[data-role='page']"), you should use $("div:jqmData(role='page')"), which internally maps to $("div[data-"+ $.mobile.ns +"role='page']") without forcing you to concatenate a namespace into your selectors manually.”

To find out more about dynamically injected pages please click here.

Complete HTML code to be used in conjunction with the JavaScript code we have just covered is shown below:


<!DOCTYPE html>
<html>
<head>
<title>Share QR</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css&quot; />
<link rel="stylesheet" href="shareqr2.2.css" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script&gt;
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script&gt;
<script src="shareqr2.2.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-theme="b" data-position="fixed">
<a href="#home" data-icon="home" data-iconpos="notext">Home</a>
<h1>Share QR</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="#qrcode?url=http%3A%2F%2Fctoinsights.wordpress.com">ctoinsights.wordpress.com</a></li>
<li><a href="#qrcode?url=http%3A%2F%2Fwww.book-current.com">www.book-current.com</a></li>
</ul>
</div>
<div data-role="footer" class="ui-bar" data-theme="b" data-position="fixed" data-id="footer">
<a href="#about" data-icon="info">About</a>
</div>
</div>
<div data-role="page" id="qrcode">
<div data-role="header" data-theme="b" data-position="fixed">
<a href="#home" data-icon="home" data-iconpos="notext">Home</a>
<h1>QR Code</h1>
<a href="#home" data-icon="arrow-l" data-rel="back">Back</a>
</div>
<div data-role="content">
</div>
<div data-role="footer" class="ui-bar" data-theme="b" data-position="fixed" data-id="footer">
<a href="#about" data-icon="info">About</a>
</div>
</div>
<div data-role="page" id="about">
<div data-role="header" data-theme="b" data-position="fixed">
<a href="#home" data-icon="home" data-iconpos="notext">Home</a>
<h1>About</h1>
<a href="#home" data-icon="arrow-l" data-rel="back">Back</a>
</div>
<div data-role="content">
<p>Share your favorite URLs with other mobile phone users through QR codes.</p>
</div>
<div data-role="footer" class="ui-bar" data-theme="b" data-position="fixed" data-id="footer">
<a href="#about" data-icon="info">About</a>
</div>
</div>
</body>
</html>

view raw

shareqr2.2.html

hosted with ❤ by GitHub

We also added a small css file to center display of the QR code.


img.center {
display: block;
margin-left: auto;
margin-right: auto;
}

view raw

shareqr2.2.css

hosted with ❤ by GitHub

This completes Part II of the Tutorial. You can access work in progress application on your mobile phone at http://rtekie.herokuapp.com/shareqr2.2.html. Screen shots are shown below:

In Part III we will add site list management capabilities and complete the application.

software development

, , , , , , ,

January 3, 2012

7 Comments