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
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 library • 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