Get started with Dojo Mobile 1.6

And get a peek at new features coming in 1.7

Learn about Dojo Mobile, the mobile web development framework that's an extension of the Dojo toolkit. Using a practical example, learn how to include and use Dojo Mobile widgets and components in your applications. You'll see how to wrap your web application in a native application using PhoneGap. This article also offers a preview of some of the new features in the next version of the framework.

Joe Lennon, Lead Mobile Developer, Core International

Photo of Joe LennonJoe Lennon is a 24-year-old software developer from Cork, Ireland. Joe is author of the forthcoming Apress book Beginning CouchDB, and has contributed several technical articles and tutorials to IBM developerWorks. In his spare time, Joe likes to play football (soccer), tinker with gadgets, and work on his Xbox 360 gamerscore. He can be contacted via his Web site at www.joelennon.ie.



17 June 2011

Also available in Chinese Russian Japanese Spanish

Introduction

Mobile web usage is growing exponentially. As more people become comfortable with smartphones, or other mobile devices, to browse the web, there's an increasing need for mobile optimized websites and web applications. With the growing number of platforms (iOS, Android, Blackberry OS, webOS, Windows Phone, Symbian, Bada, and so on), it's difficult to develop native applications that target more than one mobile operating system.

There has been a surge in demand for mobile web application development toolkits. A few of the major JavaScript frameworks—Dojo, jQuery, and Sencha—have been quick to provide fully touch-aware frameworks. When coupled with native compilation toolkits like PhoneGap, these frameworks offer an excellent alternative to native development. Web developers can build native applications using the languages and frameworks they already know, and can deploy to numerous platforms with relative ease.

In this article, learn about Dojo Mobile, which is an extension of the Dojo Toolkit. After exploring the differences between mobile web and native applications, follow an example that shows you how to include and use Dojo Mobile widgets in your applications. You'll also learn about building native applications with PhoneGap. You can download the source code used in this article.


Mobile web versus native applications

The debate about developing a mobile application using native versus web platforms will likely continue for a good while. Each approach has advantages and disadvantages. In many cases, application requirements and personal preferences determine the approach you should choose.

Why would you write a native application instead of using the mobile web? Table 1 outlines some advantages and disadvantages of writing native applications.

Table 1. Native applications
AdvantagesDisadvantages
Code is faster, and runs directly on the device operating system without needing an intermediary browser application.Targeting different devices requires completely separate versions of the same application due to differences in the programming languages and APIs in the various platform SDKs.
Can be deployed to an application store, offering a simple and cost-effective distribution model.Deploying native applications through an application store usually requires approval from a third party, which can considerably slow down the time to market (especially if your application is rejected).
Native SDKs have tons of features specific to the device, usually complete with detailed documentation and examples.Pushing updates, even small incremental ones, requires that you go through an approval process, making it more difficult to deliver critical updates to users.

Advantages and disadvantages of mobile web applications are outlined in Table 2.

Table 2. Mobile web applications
AdvantagesDisadvantages
Write one application to target multiple platforms. No separate applications required for different devices.Applications distributed over the web for consumption by browsers do not have access to many device features that native applications do (camera, microphone, and so on), though this may change in the future.
Applications can be deployed over the web without a third-party application store for distribution.You need to provide the infrastructure for distributing your application, which can be more difficult and expensive than using an application store.
You keep all the income from your application (if you charge for it).Applications will never run as fast as their native counterparts, as they are rendered in a browser rather than executed by the operating system itself.

Fortunately, there's a middle-ground if you want to take the best of both the mobile web and native approaches. Using a platform such as PhoneGap will take your mobile web application and surround it with a native wrapper, providing JavaScript APIs that let you access the native device APIs. You can also deploy your web application as a native application to the various application stores. More details are in Native deployment with PhoneGap.


Dojo Mobile at a glance

Dojo Mobile, an extension for the Dojo Toolkit, provides a series of widgets, or components, optimized for use on a mobile device, such as a smartphone or tablet. The components are modeled on their native counterparts, and will look and feel native to those familiar with smartphone applications. The components are completely customizable using themes which, for example, let you push a different set of styles to iOS users than to Android users.

Dojo Mobile works similarly to the Dijit library of components. To use a particular type of widget in your application, you first load the relevant class using dojo.require in your application's main JavaScript block. You can then add the widget to your application either declaratively using regular HTML tags with the dojoType attribute, or programmatically using JavaScript code.

As you might expect, Dojo Mobile works deliciously on iOS and Android devices, largely due to the WebKit browsers available on these platforms. The advantage also carries over to other platforms that offer a decent WebKit browser, such as BlackBerry OS 6, HP webOS, and others. Dojo Mobile applications degrade gracefully on non-WebKit browsers, and can even be run in older desktop browsers (including Microsoft Internet Explorer). By default, only CSS3 styling is included, but a compatibility module can be added for non-WebKit browsers using a single line of code:

dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat");

Some key features of Dojo Mobile include:

  • Lightweight loading of widgets due to the Dojo Mobile parser.
  • CSS3 animations and transitions for native-like application experience on high-end iOS and Android devices.
  • Themes included for both iOS and Android look-and-feels.
  • Compatibility with non-CSS3-compatible devices and browsers.
  • Full declarative syntax allows for an easy learning curve.
  • A large suite of widgets, with even more in the upcoming Dojo Mobile 1.7.

The next section explains how to get started with Dojo Mobile by building a "Hello, World" application.


Getting started with Dojo Mobile

Getting up and running with Dojo Mobile development is very straightforward. You don't even need to download anything; you can load everything you need remotely using Google's Content Delivery Network (CDN). The basic structure of a Dojo application is outlined in Listing 1.

Listing 1. Basic structure of a Dojo Mobile HTML document
<!doctype html>
<html>
    <head>
        <meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,
user-scalable=no">
        <meta name="apple-mobie-web-app-capable" content="yes">
        <title>My Dojo Mobile App</title>
        <link rel="stylesheet"  
href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/mobile/themes
/iphone/iphone.css">
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" 
djConfig="parseOnLoad: true"></script>
        <script>
            dojo.require("dojox.mobile.parser");
            dojo.require("dojox.mobile");
            dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat");
        </script>
    </head>
    <body>
        <!-- Dojo Widgets Go Here -->
    </body>
</html>

If you save the code in Listing 1 in a file and open that file in your web browser, you should see a grey background with no content. This is hardly useful, so let's go ahead and add some content to the application. The example in this article uses non-standard Dojo Mobile classes, so you need to load them manually using dojo.require. After the line dojo.require("dojox.mobile");, add the lines shown in Listing 2.

Listing 2. Loading the Dojo Mobile classes manually
dojo.require("dojox.mobile.ScrollableView");
dojo.require("dojox.mobile.FlippableView");
dojo.require("dojox.mobile.IconContainer");

Now you can add the main code for the "Hello World" application. The examples in this article use the declarative syntax for Dojo Mobile, which means using regular HTML tags with special Dojo Mobile attributes that will be parsed at runtime. In the <body> section of your code, add the code from Listing 3.

Listing 3. Using Dojo Mobile widgets
<div dojoType="dojox.mobile.ScrollableView" selected="true">
    <h1 dojoType="dojox.mobile.Heading" fixed="top">Hello, World!</h1>
    <h2 dojoType="dojox.mobile.RoundRectCategory">First Section</h2>
    <div dojoType="dojox.mobile.RoundRect">
        This is a nice standard rounded rectangular label.
    </div>
    <h2 dojoType="dojox.mobile.RoundRectCategory">Second Section</h2>
    <ul dojoType="dojox.mobile.RoundRectList">
        <li dojoType="dojox.mobile.ListItem">List Item 1</li>
        <li dojoType="dojox.mobile.ListItem">List Item 2</li>
        <li dojoType="dojox.mobile.ListItem">List Item 3</li>
        <li dojoType="dojox.mobile.ListItem">List Item 4</li>
        <li dojoType="dojox.mobile.ListItem">List Item 5</li>
    </ul>
</div>

Listing 2 defined a ScrollableView that will comprise the main application interface. The difference between a standard View class and the ScrollableView class is that the standard View will use standard browser chrome to scroll the page. The ScrollableView class has its own scrolling mechanism, which lets you fix a header and footer in your application, and scroll the content between them, like you might expect from a native application.

Inside the ScrollableView is a Heading, which is the title bar containing the text "Hello, World". By setting the attribute fixed="top" on this object, Dojo Mobile will keep the heading in place at the top of the screen and scroll the other content beneath it. The RoundRectCategory object defines a group heading for a rounded list or single item. The first of these categories is followed by a single RoundRect box with some static text in it. This is followed by another category heading and a RoundRectList object, which in turn contains a series of ListItem objects. The end result should look something like Figure 1.

Figure 1. Hello World application
Image on an iPhone showing two sections: the first with some text and the second with list items.

The next section explores the various widgets and components available in Dojo Mobile.


Widgets

Dojo Mobile comes with a wide variety of widgets that are specifically designed and optimized for mobile devices, such as smartphones and tablets. The widgets range from layout components (views) to lists, navigation bars, tab bars, buttons, and form widgets. This section shows many of the widgets in action, and includes basic code examples. Figures of screens in this section were taken on an iOS device using the iPhone theme; they will vary if you're using the Android theme.

View

View is a container widget that takes up all of the available space on the device's screen. Your application's pages may contain more than one View object, but only one of these will ever be active at any given time. The user can typically navigate between different views using toolbar buttons and tab bar buttons, with various transitions available for moving between each view. Figure 2 shows an example of an empty View.

Figure 2. An empty View object
An empty gray box

To create a View object, use the dojox.mobile.View class that's included in the Dojo base SDK. It does not need to be explicitly loaded using dojo.require. When using a View object you use the selected attribute to define whether the view should be displayed when the application is launched (the startup view). The following code is required to create the above View declaratively.

<div dojoType="dojox.mobile.View" selected="true"></div>

Alternatively, you could create the View programmatically using JavaScript. Listing 4 shows the code for creating the View in Figure 2 using this method.

Listing 4. Creating the View
var myView = new dojox.mobile.View({
    selected: true
}, "myView");
myView.startup();

Listing 4 assumes you have a block element somewhere in your HTML with the id attribute value myView. It then binds a View object to this element in the DOM.

The rest of the widget descriptions include how to use them only declaratively. Consult the Dojo API for more information on how to use Dojo Mobile widgets with the programmatic syntax.

ScrollableView

The ScrollableView widget works similarly to the View widget: it acts as a container in which you can place other widgets. The primary difference is that with ScrollableView, if your content overflows the height of the screen the user can scroll the content by touching the screen and moving their finger up or down (or left or right if you use horizontal scrolling), while keeping any header or footer objects in place. If you were to use a standard View object, the entire screen would scroll, so the header and footer would not stay in a fixed position. Figure 3 shows an example.

Figure 3. An empty ScrollableView object
An empty gray box with a scroll bar to the right.

Creating the empty ScrollableView object above is very similar to how you created the empty View object in Figure 2. The code for the empty ScrollableView is:

<div dojoType="dojox.mobile.ScrollableView" selected="true"></div>

It is recommended that you use ScrollableView only if you intend to add a fixed header or footer to your view. Otherwise, you should use the regular View class.

Unlike the regular View class, ScrollableView is not included in the base classes so it needs to be explicitly loaded using dojo.require.

FlippableView

The FlippableView widget, which will be changed to SwapView in version 1.7, lets you create a container object that can be swapped with other FlippableView objects by swiping the screen left or right. The order of the views will depend on the order in which they are located in the code. Figure 4 shows a FlippableView widget.

Figure 4. FlippableView widget
A box with text and a green arrow on top of it pointing to the right.

If you want to create a sample FlippableView with two views, you can use the code in Listing 5. If you are using Dojo 1.7, change the FlippableView references to SwapView.

Listing 5. Creating a FlippablView with two views
<div dojoType="dojox.mobile.FlippableView" selected="true">View 1</div>
<div dojoType="dojox.mobile.FlippableView">View 2</div>

FlippableView is not included in the base classes, so it needs to be loaded manually using dojo.require.

Heading

The Heading widget lets you create a navigation bar that will appear at the very top of your application. Heading objects usually have a title. You can also add navigational elements to them, such as Back buttons or toolbar buttons, to provide an easy means of navigating around your application.

If you use a Heading in conjunction with a ScrollableView container, the Heading widget will stay fixed at the top of the application while the rest of the application will scroll. You can keep your navigation available to users at all times. Figure 5 shows an example of a Heading object complete with a title, Back button, and toolbar button.

Figure 5. Sample Heading widget
Header bar with the words My App as well as back and edit buttons.

The code to create the Heading widget in Figure 5 is shown in Listing 6.

Listing 6. Creating the Heading widget
<h1 dojoType="dojox.mobile.Heading" label="My App" back="Back"   
  moveTo="back">
    <div dojoType="dojox.mobile.ToolBarButton" label="Edit"
      class="mblColorBlue" style="width:25px;float:right">
    </div>
</h1>

You might have noticed that the Back button is actually defined in the Heading element itself. The back attribute defines the text that should be displayed in the button. The moveTo attribute should contain the ID of the View object that should become active when the user taps the Back button. You could also use a transition attribute to define the transition effect that should be used when navigating to another view in this way. The default is slide, but other options include fade, flip, and none.

You can define additional navigation buttons using ToolBarButton widgets. If you wanted a button that was not styled like a Back button on the left, or if you wanted to display a button on the right, you simply add a ToolBarButton object inside the Heading element.

RoundRect

The RoundRect class lets you create a simple rounded-corner container in which you can place static HTML or other Dojo Mobile widgets. An example of the RoundRect widget is shown in Figure 6.

Figure 6. Using the RoundRect container
A frame with the text this is a simple roundrect object with some content in it.

To create the RoundRect object in Figure 6 you can use the syntax shown in Listing 7.

Listing 7. Creating the RoundRect object
<div dojoType="dojox.mobile.RoundRect" shadow="true">
    This is a simple RoundRect object with some content in it.
</div>

The RoundRect class is very straightforward. It accepts a single property, shadow, which is set to false by default. This property simply defines whether the container should have a drop shadow.

RoundRectCategory and RoundRectList

When presenting data on a mobile device, lists are very important. The vertical tabular structures let you present a series of different list items. The items can be used to display information, for navigation purposes, or various other uses. Dojo Mobile lets you create two types of lists, both of which have an associated category widget. The RoundRectList creates a list that has a gap on either side of it, with rounded corners on the first and last list item. Figure 7 shows a RoundRectCategory and RoundRectList as viewed on an iPhone.

Figure 7. RoundRectList
A list heading and three list items.

The example defined a RoundRectCategory with the label "List Heading", and a RoundRectList object with three ListItem objects within it. Listing 8 shows the code required to create this set of widgets.

Listing 8. Create the RoundRectCategory and RoundRectList widgets
<h2 dojoType="dojox.mobile.RoundRectCategory">List Heading</h2>
<ul dojoType="dojox.mobile.RoundRectList">
    <li dojoType="dojox.mobile.ListItem">List Item 1</li>
    <li dojoType="dojox.mobile.ListItem">List Item 2</li>
    <li dojoType="dojox.mobile.ListItem">List Item 3</li>
</ul>

EdgeToEdgeCategory and EdgeToEdgeList

EdgeToEdgeList is RoundRectList's close sibling. EdgeToEdgeList can be used in virtually the exact same manner, but instead it creates lists that run the entire width of the View. Figure 8 shows an example.

Figure 8. EdgeToEdgeList
A list heading and three list items running the entire width of the screen.

The code for EdgeToEdgeList is almost identical to the previous example, except references to RoundRect are replaced with EdgeToEdge, as shown in Listing 9.

Listing 9. Creating the EdgeToEdge widget
<h2 dojoType="dojox.mobile.EdgeToEdgeCategory">List Heading</h2>
<ul dojoType="dojox.mobile.EdgeToEdgeList">
    <li dojoType="dojox.mobile.ListItem">List Item 1</li>
    <li dojoType="dojox.mobile.ListItem">List Item 2</li>
    <li dojoType="dojox.mobile.ListItem">List Item 3</li>
</ul>

The lists above are typically used when displaying lists of people, and the people would generally be grouped by the first letter of their surname.

IconContainer

The IconContainer widget lets you define a series of icons that can each open a separate container when tapped. IconItem objects can either slide out a container that is nested inside of the IconItem itself (on the same view), or it can actually move the active View to the one with a given ID. Figure 9 shows an IconContainer with three icons.

Figure 9. Sample IconContainer
Screen showing three boxes, each containing the 'core' logo.

To create the IconContainer above, use the code shown in Listing 10.

Listing 10. Creating the IconContainer widget
<ul dojoType="dojox.mobile.IconContainer">
    <li dojoType="dojox.mobile.IconItem" label="Icon 1" 
      icon="appicon.png" moveTo="view1"></li>
    <li dojoType="dojox.mobile.IconItem" label="Icon 2" 
      icon="appicon.png" moveTo="view2"></li>
    <li dojoType="dojox.mobile.IconItem" label="Icon 3"     
      icon="appicon.png" moveTo="view3"></li>
</ul>

The IconContainer class itself is not included in _base.js, so you must explicitly load it with dojo.require. The same does not hold true for IconItem, however, so do not try to load it manually or you'll get errors when you try to run your application.

There are many more details to these particular widgets, but they are outside the scope of this article. See Resources for links to more extensive coverage in the Dojo Mobile Showcase and API.

Button

The Button class lets you create a simple button object. You can then create code to handle events such as "click" on this widget using dojo.connect. Figure 10 shows an example of a Button.

Figure 10. Button widget
A button with the words 'click me'.

The code to create this button is as straightforward as the button itself, as shown in Listing 11.

Listing 11. Creating the Button widget
<button dojoType="dojox.mobile.Button" btnClass="mblBlueButton" 
style="width: 100px">Click me!</button>

You can create new button styles of your own using CSS and assigning a class name to the button using the btnClass attribute.

Switch

The Switch object is a toggle control that lets you switch the value of the object between two properties. By default, these are ON or OFF. To change the value of the switch, you either tap on the value you wish to change to, or slide the switch across to the target value. Figure 11 shows an example of a Switch widget with two switches: one in the OFF position and another in the ON position.

Figure 11. Switch example
A Switch object example

The following code creates a Switch object.

<div dojoType="dojox.mobile.Switch" value="off"></div>

The Switch widget accepts two additional properties, leftLabel and rightLabel, which let you define the values that should be displayed in the on and off states, respectively. The labels are ON and OFF by default. When the value of the Switch has been changed, the onStateChanged event will be fired. You can bind to this event using dojo.connect.

TabBar

The TabBar widget is used to swap View objects in and out in your application by making views active or inactive when a TabBarButton is tapped. A TabBar widget can use an iconBase attribute to define an image sprite, allowing different icons to be displayed in each TabBarButton. This works well when using a TabBar as a navigation component at the bottom of your application, as shown in Figure 12.

Figure 12. TabBar with icons
TabBar with album and calendar icons

Or, you can use the TabBar component and a barType attribute of segmentedControl. It creates a tab bar that usually works best when placed near the top of the application, beneath the main Heading widget. Figure 13 shows an example of this type of TabBar in action.

Figure 13. TabBar with barType of segmentedControl
TabBar with Album and Events text instead of icons.

The code to create the TabBar in Figure 13 is shown in Listing 12.

Listing 12. Creating the TabBar widget
<ul dojoType="dojox.mobile.TabBar" barType="segmentedControl">
    <li dojoType="dojox.mobile.TabBarButton" moveTo="view1" 
      selected="true">Albums</li>
    <li dojoType="dojox.mobile.TabBarButton" 
      moveTo="view2">Events</li>
</ul>

The TabBarButton class has a variety of configuration options that let you customize the appearance of your buttons. You can specify: the position of icons, what icons should be used, transitions to use when changing views, callback functions to be fired when the transition has completed, and much more. See the Dojo API for more information.


Native deployment with PhoneGap

Deploying applications over the mobile web is increasingly popular. As mobile browsers improve and HTML5 evolves, the mobile web is becoming a stronger distribution option for mobile applications. However, there are many cases where you'll want to deploy your application natively to the relevant platform application stores. Rather than develop several different applications using each platform's native SDK, you can wrap your mobile web application up in a native package using PhoneGap.

PhoneGap is an open source project that's free to use in any application, whether it is distributed under a free, commercial, open source, or hybrid license. PhoneGap itself is distributed under the MIT and BSD open source licenses. You can choose whichever best suits your situation.

PhoneGap includes SDKs for building native applications for six platforms: iOS, Android, Blackberry, webOS, Windows Mobile, and Symbian. The instructions on getting started with PhoneGap vary from platform to platform. This section shows how easy it is to deploy to iOS. See Resources to find out how to use another platform.

Let's create a really basic Dojo application that runs natively on an iOS device using PhoneGap. To build native iOS applications you need a Mac with OS X 10.6 Snow Leopard and Xcode. You can download Xcode from Apple's Developer Center or from the Mac App Store. Be sure to download the iOS SDK or you won't be able to build iOS applications.

Assuming you have Xcode and the iOS SDK installed:

  1. Download the latest version of PhoneGap, which is distributed as a zip file.
  2. Extract and open the iOS directory inside the file. You should see a single package named PhoneGapLibInstaller.pkg.
  3. Launch the PhoneGapLibInstaller.pkg to install PhoneGap into Xcode.
  4. When the installer has finished, launch Xcode and create a new project.
  5. From the project type groups on the left, select PhoneGap under the User Templates group, as shown in Figure 14, then select PhoneGap-based Application on the right.
  6. Click Choose, and give your project a name (the example is called "HelloNative").
Figure 14. Creating a PhoneGap project in Xcode
Screen with three sections: 1 on the left and 2 horizontal on the right along with cancel and choose buttons.

In the Groups & Files section of Xcode, usually on the left side of the window, expand the "www" folder and open the index.html file. The code in this file should look something like the code in Listing 13.

Listing 13. Default PhoneGap iOS index.html file
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <!-- Change this if you want to allow scaling -->
    <meta name="viewport" content="width=default-width; user-scalable=no" />

    <meta http-equiv="Content-type" content="text/html; charset=utf-8">

    <title>HelloNative</title>
    
    <!-- iPad/iPhone specific css below, add after your main css >
    <link rel="stylesheet" media="only screen and (max-device-width: 1024px)" 
href="ipad.css" type="text/css" />        
    <link rel="stylesheet" media="only screen and (max-device-width: 480px)" 
href="iphone.css" type="text/css" />        
    -->
    <!-- If you application is targeting iOS BEFORE 4.0 you MUST put json2.js 
from http://www.JSON.org/json2.js into your www directory and include it here -->
    <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
    <script type="text/javascript" charset="utf-8">


    // If you want to prevent dragging, uncomment this section
    /*
    function preventBehavior(e) 
    { 
      e.preventDefault(); 
    };
    document.addEventListener("touchmove", preventBehavior, false);
    */
    
    function onBodyLoad()
    {
        document.addEventListener("deviceready",onDeviceReady,false);
    }
    
  /* When this function is called, PhoneGap has been initialized and is ready to roll */
    function onDeviceReady()
    {
        // do your thing!
    }
    
    </script>
  </head>
  <body onload="onBodyLoad()">
      
  </body>
</html>

At this point, you're going to build into this native application the same functions that the "Hello, World" application provided. The first step is to actually include Dojo itself. Find the following line in index.html:

<script type="text/javascript" charset="utf-8"  src="phonegap.js"></script>

Beneath this line, add the lines from Listing 14.

Listing 14. Including Dojo
<link rel="stylesheet"
 href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/mobile/themes
 /iphone/iphone.css">
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" 
djConfig="parseOnLoad: true"></script>

The code in Listing 14 loads Dojo's CSS and JavaScript files from the Google CDN. Of course, in a real world application you should include a local copy of Dojo if you are deploying mobile web applications natively using PhoneGap. Otherwise, if the user is offline, they won't be able to use your application. Your application will also run much faster if Dojo is available locally on the device.

Find the JavaScript function onDeviceReady, and beneath the comment "do your thing!" add the code in Listing 15.

Listing 15. Loading the Dojo Mobile parser
dojo.require("dojox.mobile.parser");
dojo.require("dojox.mobile");
dojo.require("dojox.mobile.ScrollableView");

The code in Listing 15 loads the Dojo Mobile parser and base class, as well as the ScrollableView container widget. You don't need the compatibility layer in this case, as the target device is iOS, which definitely uses WebKit. The last bit of code you need to add is the widgets themselves. Add the code in Listing 16 between the opening and closing <body> elements in index.html.

Listing 16. Adding the widgets
<div dojoType="dojox.mobile.ScrollableView" selected="true">
    <h1 dojoType="dojox.mobile.Heading" fixed="top">Hello, World!</h1>
    <h2 dojoType="dojox.mobile.RoundRectCategory">First Section</h2>
    <div dojoType="dojox.mobile.RoundRect">
        This is a nice standard rounded rectangular label.
    </div>
    <h2 dojoType="dojox.mobile.RoundRectCategory">Second Section</h2>
    <ul dojoType="dojox.mobile.RoundRectList">
        <li dojoType="dojox.mobile.ListItem">List Item 1</li>
        <li dojoType="dojox.mobile.ListItem">List Item 2</li>
        <li dojoType="dojox.mobile.ListItem">List Item 3</li>
        <li dojoType="dojox.mobile.ListItem">List Item 4</li>
        <li dojoType="dojox.mobile.ListItem">List Item 5</li>
    </ul>
</div>

Save the index.html file (File -> Save), and ensure that the Overview toolbar option in the top left of Xcode is set to a Simulator target. You can now launch the application using Build and Run (Build -> Build and Run). Xcode will do its thing for a moment before launching the iOS Simulator application. After a few moments, your first native Dojo application should start. You might notice the lack of a Safari toolbar at the bottom of the screen, and that your application is taking up the entire device screen, as shown in Figure 15.

Figure 15. Native Dojo Hello World application
The hello world title with first section text, and list items in the second section.

If you exit the application by selecting Home on the simulated iPhone, your application is sitting on the device's home screen, with the default PhoneGap application icon and the name HelloNative, as shown in Figure 16.

Figure 16. Native application icon on iPhone home screen
Native app icon on iPhone home screen

If you open another application (such as Safari or Contacts) in the simulator, and double-tap the Home button, the iOS Multi-tasking menu will open. Once again, you'll see your application's icon displayed, allowing you to quickly and easily switch between other applications and your own.

The process for deploying to other platforms is typically as simple as outlined here, although there might be some tweaking required to get your application working on Android. All the information you need is available on the PhoneGap web site.


New features in Dojo Mobile 1.7

There are a series of improvements planned for Dojo Mobile version 1.7, which should be available in the not-too-distant future. Improvements include:

  • A new module, dojox.mobile.deviceTheme, which automatically detects the mobile device being used and loads the appropriate Dojo Mobile theme accordingly.
  • A new theme specifically designed for Blackberry devices.
  • A new widget, Carousel, that lets you display a series of scrollable images. Navigation controls in the header provide an alternative means of traversing through groups of images. Figure 17 shows an example of a carousel.
    Figure 17. Carousel widget
    Carousel widget in action -- the iphone calendar function
  • A new widget, SpinWheel, which mimics the pop spinner UI component typically found on a native iPhone application. An example is shown in Figure 18.
    Figure 18. SpinWheel/DatePicker widget in action
    Carousel widget in action -- the iphone calendar function
  • Different flavors of the SpinWheel component, including a SpinWheelDatePicker, SpinWheelTimePicker, and one that you can configure yourself using SpinWheelSlot objects.
  • Data-driven versions of the RoundRectList and EdgeToEdgeList widgets, named RoundRectDataList and EdgeToEdgeDataList.
  • Improved support for CSS3 transitions and animations.
  • The Button class has been removed from the base mobile framework and will need to be explicitly loaded using dojo.require("dojox.mobile.Button");
  • The FlippableView widget has been renamed SwapView.

WebSphere Application Server Feature Pack for Web 2.0 and Mobile V1.1.0

The WebSphere Application Server Feature Pack for Web 2.0 and Mobile V1.1.0 includes the IBM Dojo 1.7 Toolkit, which has all the Dojo 1.6 features highlighted in this article as well as many more features available only in the IBM Dojo 1.7 Toolkit. The Feature Pack also provides new mobile and rich Internet application (RIA) building blocks and a Dojo-based diagram component. Alongside accompanying Rational tools, this Feature Pack will greatly facilitate the creation of rich web and mobile applications. It will be straightforward for WebSphere applications developed originally for desktop browsers to be easily adapted and deployed to mobile devices.

There are also some separate, related Dojo projects that can be used in dojox.mobile applications in the latest version:

  • Data-bound forms, complete with auto-form generation using JSON models.
  • An OpenLayers Map widget to complement the Google Maps widget from the previous version.
  • A series of mobile-friendly charts and gauges that don't require any browser plug-ins.
  • An improved touch event layer, allowing more precise responsiveness to the user's touch.

Closer to the release of Dojo Mobile 1.7, there will likely be an official announcement with details about all of the new features and changes you can expect.


Conclusion

Web applications are fast becoming a reasonable and powerful alternative to native mobile application development. In this article, you learned how mobile HTML5 frameworks such as Dojo Mobile can add value to the process, abstracting the tedious work of designing UI components and widgets specifically for mobile devices. Dojo Mobile even provides different themes for different types of devices.

After you've built your mobile web application, you can then take advantage of the fantastic PhoneGap SDKs to deploy your application natively to multiple target platforms. You can even leverage the native device features, such as the camera and microphone. The future of the mobile web is not only bright—it's already here.


Acknowledgements

Thank you to Christopher Mitchell, Lizet Ernand, Todd Kaplinger, and Yoshiroh Kamiyama from the IBM WebSphere Application Server Feature Pack for Web 2.0 and Mobile V1.1.0 team for their review and contributions to this article.


Download

DescriptionNameSize
Article source codedojomobile.source.zip3KB

Resources

Learn

Get products and technologies

Discuss

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into Web development on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Web development, Mobile development
ArticleID=681177
ArticleTitle=Get started with Dojo Mobile 1.6
publish-date=06172011