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”, , 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

 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

6 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

dojox.geo.openlayers • Mapping component based on OpenLayers • Open source

9 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

Accordion View • New in 1.8 • Works with tabbed views • Various display modes

13 ListItem

ListItem View • Create views programmatically • Various page loading methods

14 Carousel

Carousel View  Ideal for item selection/viewing  Grouped items

15 Including the Dojo Loader

16 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