back

Getting started with jQuery Mobile and Adobe Dreamweaver CS5.5

by Ryan Stewart

As people continue to migrate to smartphones, it has become critical to think about how web applications will behave on those devices. And users have come to expect that mobile applications will have some default behaviors and features that can be difficult to structure and code. You may have heard of jQuery before, and in fact, you may be using it to add some basic interactivity to your websites. jQuery also has a project dedicated specifically to solving some of these mobile application development problems: jQuery Mobile. And Adobe has been working very closely with the jQuery Mobile team to make sure that Adobe Dreamweaver CS5.5 has full support for jQuery Mobile, including templates and code completion.

One of the best things about jQuery Mobile is that it makes a lot of the basic mobile paradigms easily accessible for web developers. Using typical <div> tags and links, you can build an application that uses screens, automatically provides navigation, and lets you build applications that can run on almost any mobile device.

Getting started

Dreamweaver CS5.5 includes templates for mobile starters so you can begin building right away. To use jQuery Mobile, you need to include the main JavaScript files in your application. There are a couple of ways to do this. You can either download them and place them on your server, or you can use the copies of the files that are stored on the jQuery servers. In this example, I've selected the latter option, using the jQuery Mobile (CDN) template.

The template that Dreamweaver creates has placeholders for a basic four-page mobile application, and it's structured so that all the jQuery properties are set by default (see Figure 1). Save that template in a location that's accessible via a web browser and take a look. Alternatively, you can just toggle to Dreamweaver Live View and see how it will look right from Dreamweaver.

Figure 1. The Dreamweaver template for basic mobile applications makes it easy for developers to get started fast.

Figure 1. The Dreamweaver template for basic mobile applications makes it easy for developers to get started fast.

Setting up a jQuery Mobile application

You can see from the template in Figure 1 that you already have a basic but structured list-based application. Now you need to fill it out and add more content. jQuery Mobile relies on some very basic HTML tags and then wraps the mobile UI around those. The trick is to figure out which tags do what when it runs as a mobile application.

Let's break down the first set of <div> tags to get a good glimpse of how jQuery Mobile works:

<div data-role="page" id="page">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="#page2">Page Two</a></li>
<li><a href="#page3">Page Three</a></li>
<li><a href="#page4">Page Four</a></li>
</ul>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>

Arguably the most important part of a jQuery Mobile application is the data-role attribute. The data-role attribute is what tells jQuery Mobile how this particular piece of HTML content should be rendered. You can see a few of the options in that first snippet. We have page, header, and footer. Header and footer should be pretty self-explanatory. Those will display specific content in the header or footer at the top and bottom of the application, respectively. When data-role is set to "page," that means jQuery Mobile will treat everything within that <div> tag as a separate page or screen. Because of the size limitations of mobile devices, most applications are divided into multiple screens. With jQuery Mobile, whenever you want to create a new page, you can simply wrap it in a <div> tag and set the data-role attribute to "page."

The other thing data-role does is tell the main content how to behave. Notice that in addition to the header and footer strings there is also a <div> tag with the data-role set to "content." Within that <div> tag, you can see an unordered list with the data-role set to "listview." That means that any list items in that <ul> tag will be turned into a jQuery list. Many, many mobile applications use lists as a primary user interface element, and with jQuery Mobile, it's as easy as wrapping a bunch of <li> tags in a <ul> with the data-role set to "listview."

Using jQuery Mobile with real data

jQuery Mobile applications can be powered by all sorts of back-ends, from simple XML feeds to applications built in Java, .NET, ColdFusion, PHP, and more. Let’s use PHP as an example. I've got a couple of PHP files, which connect to a database and bring back information about mountains in the United States. I'm going to use this data to create an application that lets me view the data by mountain range. I replaced the <ul> list above with a new list that is generated with some PHP code. Now my first <div> tag looks like this:

<div data-role="page" id="page">
     <div data-role="header">
          <h1>Mountain Ranges</h1>
     </div>
     <div data-role="content">
          <ul data-role="listview">
<?php
include_once('PeakService.php');

$peak_service = new PeaksService();

$range_array = $peak_service->getDistinctRanges();

foreach ($range_array as $row)
{
     echo "<li><a href='#".ereg_replace(' ','',$row[range_name])."'>".$row[range_name]."</a></li>";    
}    
?>
          </ul>         
     </div>
     <div data-role="footer">
          <h4>by ryan@adobe.com</h4>
     </div>
</div>

Not much has changed. I simply modified some of the text in the header and footer and then used some PHP code to loop through a database result and create my list based on this. If you run the application, you'll see that everything is almost exactly the same, but I have a lot more list items.

Moving between pages in jQuery Mobile

If you look at the code above, you'll notice that I created a bunch of hash links with the name of the mountain range. In jQuery Mobile, page-to-page links use the ID name of the section to transition between pages. In this example, if I were to click South Washington Cascades, it would look for a <div> with the data-role set to "page" and an ID of "SouthWashingtonCascades." Let's set that up:

<?php
foreach ($range_array as $row)
{
     echo '<div data-role="page" id="'.ereg_replace(' ','',$row[range_name]).'">';
     echo '<div data-role="header"><h1>'.$row[range_name].'</h1></div>';
     echo '<div data-role="content">';
     echo '<ul data-role="listview">';
     $peak_array = $peak_service->getPeakByRangeName($row[range_name]);
    
     foreach ($peak_array as $row)
     {
          echo "<li>".$row->name."</li>";    
     }         
     echo'</ul>';
     echo '</div>';
     echo '<div data-role="footer"><h4>ryan@adobe.com</h4></div>';
     echo '</div>';
}
?>

You may have to read between the echo commands a bit, but what is happening is that I'm looping through that array of mountain ranges and then generating a page for each range that is populated with a list of mountains in that range. If you take a look at the final source code, you'll see that I have a lot of <div> tags, but when you view it in the browser, you'll see jQuery Mobile has organized everything very nicely.

Getting a bit fancier

This is a good start, but let's add a couple of small touches to make this application a little more useful. First, a list of mountains is nice, but it doesn't provide much extra information. It would be helpful to add the elevation, so we can see what the elevation of each peak is. To do that, I just have to add that data with a specific class: il-li-aside. I just modify the echo command with the <li> tags to this:

echo "<li>".$row->name."<p class='ui-li-aside'><strong>Elevation:</strong> ".$row->elevation."</p></li>";

Now take a look at Figure 2. It's starting to look a bit more polished.

Figure 2. This jQuery Mobile application offers information about U.S. mountain ranges.

Figure 2. This jQuery Mobile application offers information about U.S. mountain ranges.

The other thing that might be helpful is a way to manage the original list. jQuery Mobile comes with some nice built-in components that make something like this easy. We'll add a search bar to the top of our main list that will automatically filter as the user types. It turns out this is ridiculously easy. I just go back up to the <ul> tag in the first code we looked at and add data-filter="true" to it:

  <ul data-role="listview" data-filter="true">

Now refresh the page, and you'll see that you can start typing. If you type "Cascade," it will filter all the ranges that have Cascade in the title.

Conclusion

I hope this article demonstrates how easy it is to put together complex, functional mobile applications with HTML and JavaScript with jQuery Mobile. Not only does jQuery Mobile take care of a lot of the pain of managing pages and screens, but it also makes things like customizing and adding widgets such as a search bar easy.

I encourage you to take a look at the jQuery Mobile site. In particular, check out the documentation, which is set up as an actual jQuery Mobile application and does a great job of showing what's possible with the framework. You can also check out Scott Fegette's article in the January 2011 issue of the Edge where he provides an overview of the integration between Dreamweaver and jQuery Mobile.

 

‹ Back


Ryan Stewart is a platform evangelist for Adobe and has been doing Flex development for almost five years after starting out as a ColdFusion developer. He focuses on Adobe's platform technologies, including Flex, Adobe AIR, and Flash Catalyst.