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