Using the Dojo Toolkit in a WebWorks application Michelle Mendoza

RIM Developer Relations

Dylan Schiemann

Co-founder of Dojo Toolkit & CEO of SitePen Inc.

Agenda

What is Dojo?

Using the Dojo Mobile package

Dojo Mobile Application Demos

Basic Code Walkthrough

Q&A

2

Dojo Toolkit

Build sophisticated Web apps

http://dojotoolkit.org/

Supports multiple browsers

Enables rapid development

Philosophy:

Push the limits (SVG, WebGL, HTML5)

Define & adopt defacto standards

Developer productivity & tools

Open, free & liberally licensed

Toolkit Components

Dojo – also known as “core”, AJAX, DOM manipulation, class-like programming, events

Dijit – extensive set of UI components known as widgets

DojoX – collection of packages and modules built upon Dojo core and Dijit

dojox/mobile

dojox/gfx

dojox/charting and many more

Util – utility scripts

Create optimized builds

DOH: Dojo Objective Harness 4

Dojo 1.8

Dojo 1.8 Improvements

Performance optimizations

New widgets added

175 sub-packages and 1400 modules

Much improved documentation

5

AMD - Asynchronous Module Definition

6

Mechanism allows modules and dependencies to be loaded asynchronously

Asynchronous format reduces app loading time

Better performance, easier code handling

Only load the modules you require

Dojo has a lightweight AMD loader of < 4kb

Reduce page load time by up to 10x

Interactive Experience

Grid displays

Dynamic charts

Various Form Controls and Form Validators

Cross Platform graphics

Mapping using OpenLayers

Animated effects

Gauges

7

Interactive Experience

Dynamic charts

Many Styles

Many Colours

8

OpenLayers Map

9

dojox.geo.openlayers

• Mapping component based on

OpenLayers library

• Open source

dojox/mobile

dojox/mobile

User interface optimized for mobile

Device specific UI controls and themes

Touch and gesture events

Transition effects

Business-friendly (charts, grids, gauges, etc)

Other common mobile features

11

Mobile Features

Accordion Views

TabBar Views

Image/content Carousel

Slideshow Gallery

Transition Effects

Pop up Menu with Icons

Many more

Mobile tests: http://download.dojotoolkit.org/release-1.8.0/dojo-release-1.8.0/dojox/mobile/tests/

or use: http://bit.ly/P6BVpc 12

Accordion View

13

Accordion View

• New in 1.8

• Works with tabbed views

• Various display modes

ListItem

14

ListItem View

• Create views programmatically

• Various page loading methods

Carousel

15

Carousel View

Ideal for item selection/viewing

Grouped items

Including the Dojo Loader

<script data-dojo-config="async:true"

src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/dojo.js"></script>

16

<script>

require([

"dojo/parser", // used to parse the page for widgets

"dojox/mobile", // mobile application

"dojox/mobile/deviceTheme"], // loads appropriate theme based on user agent*

function(parser) {

parser.parse(); // Parse the page for widgets and get them instantiated

});

</script>

Dojo App Details Code

https://github.com/blackberry/BB10-WebWorks-Samples

17

Resources

developer.blackberry.com/html5/

@BlackBerryDev

Dojo Tutorials and Documentation

http://dojotoolkit.org/documentation/

Hello Dojo!

http://dojotoolkit.org/documentation/tutorials/1.8/hello_dojo/

Reference guide

http://dojotoolkit.org/reference-guide/1.8/

demos.dojotoolkit.org

dojotoolkit.org

@dojo 18

THANK YOU

Michelle Mendoza

RIM Developer Relations

Dylan Schiemann

Co-founder of Dojo Toolkit & CEO of SitePen Inc.

October 16, 2012