Part 1 - Getting Started with Dojo Mobile
Content on the web is evolving at a rapid pace,and the path is quickly moving towards mobile devices. As with many other problems on the web,the Dojo Toolkit has the solution: Dojo Mobile. Dojo Mobile is a framework that allow you to effortlessly create cross-device-compatible mobile web applications. This is the introductory post in a series of posts exploring Dojo Mobile. Throughout the series,we will create a Dojo Mobile application called FlickrView. Before we can get to that,we'll need to learn about why and how to use Dojo Mobile.
Introduction to Dojo Mobile
Dojo Mobile is the Dojo Toolkit's answer to your mobile web application needs. It is a collection of classes has been architected to be lightweight,flexible,and extendable. Dojo Mobile has also been created to mimic the interface of the most commonly used devices: Android,iOS,BlackBerry,WindowsPhone so that your web application is seamless to your user.
Key features of Dojo Mobile include:
Complete and consistent mobile widget library (dojox/mobile) -- no need to collect widgets from multiple sources
Lightweight,minimal dependencies
Native style controls and widgets
Same functional behavior on desktop and mobile devices
Responds to both orientations as well orientation changes
CSS themes for most commonly used device
Uses CSS3-based animation where possible
Check out a few quick examples of Dojo Mobile in action:
These mobile interfaces also perform well in desktop browser clients,but take the time to use your iOS and Android-powered devices to browse each test. You'll be impressed byDojo Mobile's widgets and CSS themes!
Structuring Your Mobile Page
Consider this template to start your mobile application with:
<!DOCTYPEhtml><html> <head> <Metahttp-equiv="Content-type"content="text/html;charset=utf-8"/> <Metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/> <Metaname="apple-mobile-web-app-capable"content="yes"/> <title>YourApplicationName</title> <!--stylesheetwillgohere--> <!--dojo/javascriptwillgohere--> </head> <body> <!--applicationwillgohere--> </body></html>
Adding Dojo Mobile to your page requires:
A theme
There are multiplepredefined themes: iPhone,iPad,Android 2.x,Android Holodark,Windows Phone and a generic custom theme.Dojo bootstrap and configuration
The JavaScript to use dojo mobile.One or more views
Views will act as "pages" of your application.
Let's set up each one of these pieces separately,discussing details about each piece as we go along.
The Theme
Dojo Mobile is able todynamically apply a visual themeto your application in order to give it a native look depending on the browser user agent. To apply a native theme (that is,a theme that makes your application look like a native application on the mobile device on which it is displayed),you just need to include the following statement in your HTML pages:
<scripttype="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojox/mobile/deviceTheme.js"></script>
Dojo bootstrap and configuration
Including Dojo happens per the traditionalscripttag:
<scripttype="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
Dojo configuration can be specified like this:
<scripttype="text/javascript">
dojoConfig={async:true,parSEOnLoad:false
};</script>
async: true
Configures the loader in asynchronous mode.parSEOnLoad: false
Lets developers explicitly requiredojox/mobile/parserand callparser.parse().
Now,therequirepart:
We explicitly require
parser.parse(). The parser will analyze the dojo HTML tags (widgets) that we will define in the next part.The compatibility module
dojox/mobile/compatis required to ensure functional compatibility when the client is not WebKit-based,such as non-CSS3 desktop PC browsers.The
dojo/domReady!is a special kind of AMD module (called a loader_plugin_noticeable by the trailing ‘!’ character) and is required to ensure our function that runs the parser is called once the DOM is ready.
require(["dojox/mobile/parser","dojox/mobile/compat","dojo/domReady!"],function(parser){//nowparsethepageforwidgets
parser.parse();
});
Requiringdojox/mobile/compatis not necessary but is certainly best practice and it does not degrade the performance of mobile browsers.
Dojo Mobile template
Putting all together gives the following template for your Dojo Mobile application:
<html><head> <Metahttp-equiv="Content-type"content="text/html;charset=utf-8"/> <Metaname="viewport"content="width=device-width,user-scalable=no"/> <Metaname="apple-mobile-web-app-capable"content="yes"/> <title>YourApplicationName</title> <!--applicationstylesheetwillgohere--> <!--dynamicallyapplynativevisualthemeaccordingtothebrowseruseragent--> <scripttype="text/javascript"src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojox/mobile/deviceTheme.js"></script> <!--dojoconfigurationoptions--> <scripttype="text/javascript"> dojoConfig={async:true,parSEOnLoad:false };</script> <!--dojobootstrap--> <scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script> <!--dojoapplicationcode--> <scripttype="text/javascript"> require(["dojox/mobile/parser","dojo/domReady!" ],function(parser){//nowparsethepageforwidgets parser.parse(); });</script></head><bodystyle="visibility:hidden;"> <!--applicationwillgohere--></body></html>
Did you notice the stylevisibility=hiddenin the <body>? This will ensure the page is displayed only when all Dojo mobile widgets are rendered.
Now we can add some widgets to the page!
Creating Views and Widgets
As you've seen,there are minimal requirements to create a Dojo Mobile-ready page; adding widgets to the page is no different. Before we start creating widgets,let's review a few of the widgets Dojo Mobile provides:
View- A view is a virtual "page" within a mobile app.
ScrollableView- Allows for a header and/or footer to be anchored to the top or bottom allowing the middle content portion to be scrolled
Button- A simple button
Switch- An on/off toggling switch
Heading- A simple heading
ListItem- A basic list item
TabBar & TabBarButton- Tabbed content management
...and more!
Remember that all widgets are styled to look like the device's OS. Also remember that you will likely want to make your icons and widgets work and look like each device you intend to support.
Now that you're acquainted with some of the widgets baked into Dojo Mobile,let's create a basic view with aHeading,a fewListItems,and aSwitch:
<!--theviewor"page";selectitasthe"home"screen--><divid="settings"data-dojo-type="dojox/mobile/View"data-dojo-props="selected:true"><!--asampleheading--><h1data-dojo-type="dojox/mobile/Heading">"Homepage"View</h1><!--aroundedrectanglelistcontainer--><uldata-dojo-type="dojox/mobile/RoundRectList"> <!--listitemwithaniconcontainingaswitch--> <lidata-dojo-type="dojox/mobile/ListItem"data-dojo-props="icon:'images/icon-1.png'">AirplaneMode<!--theswitch--> <divdata-dojo-type="dojox/mobile/Switch"></div> </li> <!--listitemwithaniconthatslidesthisviewawayandthenloadsanotherpage--> <lidata-dojo-type="dojox/mobile/ListItem" data-dojo-props="icon:'images/icon-2.png',rightText:'mac'">Wi-Fi</li> <!--listitemwithaniconthatslidestoaviewcalled"general"--> <lidata-dojo-type="dojox/mobile/ListItem" data-dojo-props="icon:'images/icon-3.png',rightText:'AcmePhone',moveTo:'general'">Carrier</li></ul></div>
Note the custom attributes used within the widgets. A complete listing of custom options/attributes is available within thedojox/mobile API docsfor each widget. Note in particulardata-dojo-props="selected:true": It tells Dojo Mobile to display this view by default. Also note that the markup provides for search engine friendly content strategies!
To make this work you’ll need to require the widgets used by the application:
require([//...
"dojox/mobile/View","dojox/mobile/Heading","dojox/mobile/RoundRectList","dojox/mobile/ListItem","dojox/mobile/Switch"],function(parser){//...});
Let see the result:
Above we created one simple view. Of course most mobile applications will want more than one view so let's create theGeneralview we reference in the sample above,as well as a basicAboutview:
<!--The"General"sub-page--><divid="general"data-dojo-type="dojox/mobile/View"> <!--asampleheading--> <h1data-dojo-type="dojox/mobile/Heading"data-dojo-props="back:'Settings',moveTo:'settings'">GeneralView</h1> <!--aroundedrectanglelistcontainer--> <uldata-dojo-type="dojox/mobile/RoundRectList"> <lidata-dojo-type="dojox/mobile/ListItem"data-dojo-props="moveTo:'about'">About</li> <lidata-dojo-type="dojox/mobile/ListItem"data-dojo-props="rightText:'2h40m',moveTo:'about'">Usage</li> </ul></div><!--Andlet'saddanotherview"About"--><divid="about"data-dojo-type="dojox/mobile/View"> <!--Mainviewheading--> <h1data-dojo-type="dojox/mobile/Heading"data-dojo-props="back:'General',moveTo:'general'">About</h1> <!--subheading--> <h2data-dojo-type="dojox/mobile/RoundRectCategory">GenericMobileDevice</h2> <!--aroundedrectanglelistcontainer--> <uldata-dojo-type="dojox/mobile/RoundRectList"> <lidata-dojo-type="dojox/mobile/ListItem"data-dojo-props="rightText:'AcmePhone'">Network</li> <lidata-dojo-type="dojox/mobile/ListItem"data-dojo-props="rightText:'AcmePhone'">Line</li> <lidata-dojo-type="dojox/mobile/ListItem"data-dojo-props="rightText:'1024'">Songs</li> <lidata-dojo-type="dojox/mobile/ListItem"data-dojo-props="rightText:'10'">Videos</li> </ul></div>
As usual,you must require the new widgetdojox/mobile/RoundRectCategoryyou just declare in your HTML.
Congratulations,you've just created your first Dojo Mobile application!
Keep Going!
Now that we've covered the basics of the using Dojo Mobile,the next series of posts will focus on creating a dynamic,data-driven mobile application calledFlickrView. It will feature numerous Dojo Mobile widgets and work with Android,iOS-based,BlackBerry or WindowsPhone devices.
Download The Source
DownloadPart 1 - Getting Started with Dojo Mobile.
Resources & references
dojox/mobile deviceTheme(Reference Guide)
Themes currently available(Reference Guide)
Configuring Dojo(Tutorial)
Dojo HTML5 Data-Attribute Support(Feature)