Lately, I’ve been exploring a lot of work on the mobile platform, investigating some popular toolkits and UI libraries to see what can be accomplished.
A quick glance at the competition in this space, reveals a lot of interesting libraries. Because of my JQuery background, the first toolkit I gravitated towards is JQuery Mobile. I’ve been using since the early beta days, but recently the JQM team have announced the official 1.0 release.
The JQuery Mobile Approach
I’ve noticed that the mobile toolkits that are out there, take one of two approaches: they either work with existing page markup, or they take the opposite approach and work entirely within javascript. If you’re coming from a background of “typical” web application development, then I think you’ll find that working with JQuery Mobile is an easy fit.
JQuery Mobile operates by working with your page markup to convert / translate it into a “native looking” mobile application. You still use regular HTML5 markup, then JQM will rest on top of this to create the mobile-friendly app.
The basic page – Hello World
We’re just getting introduced to JQM, so let’s create a “Hello World” app. The common HTML5 application approach is to define all of our layout / pages within a single index.html.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="MobileOptimized" content="width" > <meta name="HandheldFriendly" content="true" > <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="default" />
I don’t want to get into too many details on the META tags I’m using here at this time. I’ll go through them in the next post where I can provide more details. For getting this Hello World to work, the most important one is the viewport.
After META – load the CSS and javascript
After defining our META keyworks, we want to link to our JQM css and load up our JQuery and JQuery Mobile script libraries. The order of execution here is fairly important, as noted in the JQM documentation.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
Note: according to the JQM team, the 1.0 release is tailored / geared towards the use of JQuery 1.6.4. The JQM team haven’t had time to work with the newer 1.7 release, so keep that in mind if you should need some support from the community.
Next comes the Page markup
Finally now that we’ve loaded up our required CSS and Javascript library files, we can define the markup for our first application.
JQM relies on the use of the data-role keyword to define how a page should behave within JQM.
Our landing “page” for the mobile application is defined in the markup with data-role=”page”. If you have a multi-page application (as most mobile apps are), then JQM will automatically try to use the very first page as the landing content for the app.
<body> <div id="home" data-role="page">
Now that we have our “page” defined in the markup, JQM allows us to seperate the structure into 3 sections: the header, the content and the footer. The Header section is our banner area at the top of our page. More often than not, this contains either a descriptive word or two for the page, or even some navigational elements such as buttons. For this basic app, we will just display Hello World.
<div data-role="header"> <h4>Hello World</h4> </div>
Next we have our Content section of our page. Obviously, this contains whatever we want our application to do / show to the user; eg. the “meat and potatoes”.
<div data-role="content"> <p>Hi, this is the landing page of our mobile application! This is in our content section.</p> </div>
Finally in our Footer section of the page, we can again either display some navigational elements for the app, site taglines, etc. In this case, we’ll keep it simple and just display a basic copyright notice.
<div data-role="footer"> copyright 2011 erikyuzwa.com </div> </div> </body> </html>
And that’s all it takes to get started with JQuery Mobile 1.0. Enjoy!
See it in action
Point your mobile browser to http://www.erikyuzwa.com/demos/jqm1.0/hello-world/ or aim your QR Code reader:
About wazoo
[...] http://www.erikyuzwa.com/mobile/your-first-mobile-application-using-jquery-mobile-1-0-hello-world/ [...]