I've been following the progress on jQuery Mobile since it was first announced. While I've taken a look at the demos, I had not yet gotten a chance to actually look at the code. This weekend I read Pete Freitag's excellent introductory blog post (Getting Starting with jQuery Mobile) where I discovered just hard darn easy it is. jQuery Mobile does almost all of it's working using simple HTML attributes. That means you can build a simple mobile ready web site without one darn lick of JavaScript - and that's incredible. I took a look at the docs, and basically, if you can write HTML, you can use the framework. As an example, here is what one basic page looks like.
<div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div><!-- /header --> <div data-role="content"> <p>Page content goes here.</p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /header --> </div><!-- /page --> </body> </html><!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> <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> <body>
Each page consists of one div with an optional header, content, and footer. This by itself will render as:
To add another page, you can just link to it. By default, AJAX is used to load the page and a default transition effect is used. And dude (and dude-ettes) - that's it! Obviously more complex sites will need some JavaScript, but if you are looking at just getting some basic content up you can be done in minutes.
With that in mind I decided to build a simple ColdFusion site that provides a view of the art gallery sample database. I began by abstracting out the jQuery Mobile page into a custom tag.
<cfparam name="attributes.header" default=""> <cfparam name="attributes.footer" default=""> <cfif thisTag.executionMode is "start"> <!DOCTYPE html> <html> <head> <title>Art Browser</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> <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> <body> <div data-role="page"> <cfif len(attributes.header)> <cfoutput> <div data-role="header"> <h1>#attributes.header#</h1> </div> </cfoutput> </cfif> <cfelse> <cfif len(attributes.footer)> <cfoutput> <div data-role="footer"> <h4>#attributes.footer#</h4> </div> </cfoutput> </cfif> </div> </body> </html> </cfif>
All I've done above is simple break the page "in half" so I can use it as a wrapper. I then built this as a home page.
<cf_layout header="Artists" footer="jQuery Mobile Demo by Raymond Camden"> <div data-role="content"> <ul data-role="listview" data-inset="true"> <cfoutput query="getArtists"> <li><a href="artist.cfm?id=#artistid#">#lastname#, #firstname#</a></li> </cfoutput> </ul> </div> </cf_layout><cfquery name="getArtists" datasource="cfartgallery"> select artistid, firstname, lastname from artists order by lastname asc </cfquery>
I felt a bit dirty putting my query in the view, but I got over it. Notice the use of data-role and data-insert. All your jQuery Mobile attributes will look like this. My next page displays the artist and his or her artwork.
<cfquery name="getArtist" datasource="cfartgallery"> select artistid, firstname, lastname, address, city, state, postalcode from artists where artistid = <cfqueryparam cfsqltype="cf_sql_integer" value="#url.id#"> </cfquery> <cfquery name="getArt" datasource="cfartgallery"> select artid, artname from art where artistid = <cfqueryparam cfsqltype="cf_sql_integer" value="#url.id#"> and mediaid is not null </cfquery> <cf_layout header="#getArtist.firstname# #getArtist.lastname#" footer="jQuery Mobile Demo by Raymond Camden"> <div data-role="content"> <cfoutput> <h2>#getArtist.firstname# #getArtist.lastName#</h2> <p> #getArtist.address#<br/> #getArtist.city#, #getArtist.state# #getArtist.postalcode# </p> </cfoutput> <ul data-role="listview" data-inset="true"> <cfoutput query="getArt"> <li><a href="art.cfm?id=#artid#">#artname#</a></li> </cfoutput> </ul> </div> </cf_layout><cfparam name="url.id" default="">
Again - no JavaScript, just HTML. Finally, here is the art page:
<cfparam name="url.id" default=""> <cfquery name="getArt" datasource="cfartgallery"> select a.artid, a.artname, a.description, a.price, a.largeimage, a.issold, m.mediatype from art a, media m where a.artid = <cfqueryparam cfsqltype="cf_sql_integer" value="#url.id#"> and a.mediaid = m.mediaid </cfquery> <cf_layout header="#getArt.artname#" footer="jQuery Mobile Demo by Raymond Camden"> <div data-role="content"> <cfoutput> <h2>#getArt.artname#</h2> <p> Price: #dollarFormat(getArt.price)# <cfif isBoolean(getArt.issold) and getArt.issold><b>Sold!</b></cfif><br/> Type: #getArt.mediatype#<br/> Description: #getArt.description# </p> <p> <img src="images/#getArt.largeImage#"> </p> </cfoutput> </div> </cf_layout>
You can see this in action by clicking the big ole demo button below. I tested it in my Android phone and it worked great. I'd love to hear from people using the Fruit Company phone too. I've only scratched the surface here and the framework itself is still in Alpha, but I'm very impressed by the direction of the framework so far.
Thanks to reader Bill King you can use the following QR code to quickly view the demo: