Using the Dojo Toolkit in a WebWorks application - BlackBerry ...

15 downloads 1464 Views 653KB Size Report
Using the Dojo Toolkit in a WebWorks application. Michelle Mendoza. RIM Developer Relations. Dylan Schiemann. Co-founder of Dojo Toolkit & CEO of SitePen ...
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 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 });

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