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:

Browse all dojox/mobile Tests (1.10.4)

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:

      head>   

Adding Dojo Mobile to your page requires:

• A theme
  There are mult iple predefined themes: iPhone, iPad, Android 2.x, Android Holodark, BlackBerry, 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.

< h4 id="the-theme" style="margin-bottom:0px;font-family:Lato, sans-serif;color:rgb(34,34,34);white-space:normal;background-color:rgb( 255,255,255);">The Theme

Dojo Mobile is able to dynamically apply a visual theme to 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:

Dojo bootstrap and configuration

Inclu ding Dojo happens per the traditionalscript tag:

Dojo configuration can be specified like this:

• async: true
  Configures the loader in asynchronous mode.

• parseOnLoad: false
  Lets developers explicitly requiredojox/mobile/parser and call parser.parse().

Now, therequire part:

• We explicitly require dojox/mobile/parser and call parser.parse(). The parser will analyze the dojo HTML tags (widgets) that we will define in the next part.

• The compatibility moduledojox/mobile/compat is 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){ / Now parse the page for widgets parser.parse();});

Requiringdojox/mobile/compat is not necessary but is certainly best practice and it does not degrade the performance of mobile browsers.

< h4 id="dojo-mobile-template" style="margin-bottom:0px;font-family:Lato, sans-serif;color:rgb(34,34,34);white-space:normal;background-color: rgb(255,255,255);">Dojo Mobile template

Putting all together gives the following template for your Dojo Mobile application:

           will go here-->

Did you notice the stylevisibility=hidden in the ? 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 strong>- 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

• Switc h– An on/off toggling switch

• Heading– A simple heading

• < p>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< /strong>, a fewListItems, and a Switch:

  
"Homepage"View
 
 
Airplane Mode 
 Wi-Fi  
Carrier