In conjunction with the jQuery conference in Boston, John Resig announced and released the highly anticipated jQuery Mobile. Though currently in an alpha state, the framework is fantastic.
Today, we’ll dive in, and build a simple Tuts+ RSS reader, using PHP and jQuery Mobile. When we’re finished, you’ll have the ability to add this simple project to your iPhone or Android phone with the click of a button, as well as the skills to build your web apps!
Step 1: Outline the Project
It’s always helpful to first outline what you want your project to do/achieve.
- Display a list of every Tuts+ site, along with its square logo
- Display the feed for each site, when clicked on
- Create a basic *article* stylesheet for rendering each posting
- Create an Apple-touch icon for the users who add the “app” to their phone
- Use YQL to retrieve the desired RSS feed
- Implement a basic form of “text file” caching every three hours
Step 2: Begin
The next step is to begin creating our project. Go ahead and make a new folder — name it how you wish — and add a new header.php file. *Note that this project uses PHP. If you’re not familiar with this language, feel free to skip the PHP parts! Within this file, we’ll reference jQuery mobile, its stylesheet, and any other assets that we require. If only to stay organized, I’ve placed my header.php file within an includes/ folder.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title> Tuts+ </title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> <link rel="apple-touch-icon" href="img/tutsTouchIcon.png" /> <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> </head>
There are a handful of things worth noting here.
- An HTML5 doctype is required. But you should be using that anyways!
- The
X-UA-Compatibletag forces IE to use it most current rendering engine - We need to reference jQuery Mobile’s stylesheet. You can use their CDN, and save on bandwidth!
- If you want to designate an icon for when users add your webpage to their iPhone (or Android) home screen, add a
linktag, with arelattribute ofapple-touch-icon. - We’re referencing the most recent version of jQuery: 1.4.3
- Finally, we’re loading the jQuery mobile script file (currently in Alpha 1)
The Basic Structure
The jQuery Mobile framework can be activated by applying unique data-* attributes to your code. The basic structure for most sites will look similar to:
<!-- Let's include the header file that we created above -->
<?php include('includes/header.php'); ?>
<body>
<div data-role="page">
<header data-role="header">
</header>
<div data-role="content">
</div>
<footer data-role="footer">
</footer>
</div>
</body>
</html>
Add the code above to a new index.php file, within the root of your project.
We have to tell jQuery about our project. For example, try not to think of each file as a page. Technically, you can create multiple pages at a time, by adding additional wrapping data-role="page" attributes. These are referred to as inner pages.
Further, the framework has specific settings and stylings in place for the header, main content area, and footer. To inform jQuery Mobile about the locations of these elements, we add the following attributes.
-
data-role="header" -
data-role="content" -
data-role="footer"
