Dojo Toolkit

Overview

The Dojo Toolkit is a JavaScript toolkit for creating cross-platform JavaScript/AJAX applications. It contains a rich collection of lightweight and independent modules. The toolkit enables you to use its lightweight solution for DOM manipulation and AJAX services by allowing you to choose only the modules you need for your application. It also allows you to create complex JavaScript classes with multiple inheritance.

Benefits of using the Dojo Mobile module

Dojo Mobile is a lightweight module that contains widgets (also known as components) for developing mobile apps. The widgets contain HTML, CSS, and JavaScript code, and you can use them to make your applications robust and user friendly. The widgets in the Dojo Mobile module enable you to display grids, charts, forms, and data that are optimized for viewing and interaction on a mobile device. Some of the widgets available in the Dojo Mobile module include:
  • Date/time picker
  • Accordion views
  • Pop up menu with icons
  • TabBar views
  • Image/content carousel
  • Transition effects

Using modules from other packages

DojoX package

You are not limited to using only the widgets in the Dojo Mobile module of the DojoX package. There are many widgets in other modules of the DojoX package that you can use (for example, widgets for dynamic charts, enhanced grid displays, cross-platform graphics, mapping using OpenLayers, and so on).

Dijit package

You can also add functionality from the Dijit package. The Dijit package includes an extensive library of UI controls and other useful widgets that are not available in the Dojo Mobile module, such as a color palette or a calendar. While the widgets in Dojo Mobile are specifically tailored for mobile devices, you might still want to explore the widgets available in Dijit. As of version 1.8, most widgets in Dijit support mobile device events such as touch and gesture events.

There are plenty of GUI widgets in the DojoX package and there are other packages, such as dgrid ( http://dgrid.io/ ), which offer a high-performance grid that works on mobile and desktop browsers.

Using Dojo in BlackBerry WebWorks apps

Using the AMD module loader

Asynchronous Module Definition (AMD) is an API for defining reusable modules that you can load asynchronously in your application. Using asynchronous loading of AMD modules in your application reduces application load time by up to ten times when compared to synchronous loading of modules, making it suitable for mobile applications.

To use asynchronous loading of AMD modules, set the "async" property of the Dojo Toolkit to true. It switches Dojo into baseless Dojo (async mode or AMD mode). With baseless Dojo, your application loads the module loader first, so that you can pick only the modules that you need in your application. This keeps your BlackBerry WebWorks application lightweight. Include the following code in your BlackBerry WebWorks application's index.html file to use the AMD module loader:

<script data-dojo-config="async:true" 
src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/dojo.js"></script>

While you can include the Dojo loader using a protocol-less URL in desktop applications, in a BlackBerry WebWorks application, you must include the “http” or “https” protocol identifier to properly locate the external resource. If you do not specify a protocol, the location that is local to your BlackBerry WebWorks application becomes the location of the resource by default.

Due to the large number of modules that the Dojo Toolkit provides and the dependencies of some of the modules, it is suggested that you call the Dojo loader from an online resource. This also means that your application will require an active Internet connection.

With the AMD module format, module identifiers look like paths (for example: dojox/mobile). Without AMD, the syntax looks like object references (for example: dojox.mobile).

Using the mobile parser

It is suggested that you explicitly include dojox/mobile/parser and call parser.parse() in your application. The mobile parser is significantly more lightweight compared to the base parser, which results in a faster loading time. The mobile parser parses your application's pages once the DOM and initial dependencies have been loaded, and it converts all widgets that you created declaratively to enable them to work with the Dojo Toolkit.

Resources to help you get started

Code sample

The following code shows how to structure the modules and the AMD syntax:
require([

"dojox/mobile/parser", /* This mobile app uses 
                       declarative programming with 
                       fast mobile parser. (Optional) */

"dojox/mobile", /* This is a mobile app. (Required) */

"dojox/mobile/deviceTheme" /* Detects the device’s OS and  
                           formats styles accordingly. 
                           [we can use this to automatically 
                           detect the BlackBerry device] 
                           (Optional) */

], 
function(parser, mobile, compat)
{   
    parser.parse(); /* Parse the page for widgets 
                    and instantiate them. */
});

Sample application

Visit the WebWorks-Samples repository on GitHub and check out the DojoAppDetails sample. It's a sample application that displays the application's details by retrieving the details from the application's configuration file (config.xml).

Packaging, testing, and debugging

Once your sample application is ready, you can package, test, and debug using the the BlackBerry WebWorks SDK. You can run your application on a BlackBerry simulator or a device.

Last modified: 2014-10-09



Got questions about leaving a comment? Get answers from our Disqus FAQ.

comments powered by Disqus