Using the Dojo Toolkit in a WebWorks application...AMD - Asynchronous Module Definition 6 Mechanism...
Transcript of Using the Dojo Toolkit in a WebWorks application...AMD - Asynchronous Module Definition 6 Mechanism...
![Page 1: Using the Dojo Toolkit in a WebWorks application...AMD - Asynchronous Module Definition 6 Mechanism allows modules and dependencies to be loaded asynchronously Asynchronous format](https://reader034.fdocuments.in/reader034/viewer/2022050400/5f7da5e0482f5179435ea674/html5/thumbnails/1.jpg)
Using the Dojo Toolkit in a WebWorks application Michelle Mendoza
RIM Developer Relations
Dylan Schiemann
Co-founder of Dojo Toolkit & CEO of SitePen Inc.
![Page 2: Using the Dojo Toolkit in a WebWorks application...AMD - Asynchronous Module Definition 6 Mechanism allows modules and dependencies to be loaded asynchronously Asynchronous format](https://reader034.fdocuments.in/reader034/viewer/2022050400/5f7da5e0482f5179435ea674/html5/thumbnails/2.jpg)
Agenda
What is Dojo?
Using the Dojo Mobile package
Dojo Mobile Application Demos
Basic Code Walkthrough
Q&A
2
![Page 3: Using the Dojo Toolkit in a WebWorks application...AMD - Asynchronous Module Definition 6 Mechanism allows modules and dependencies to be loaded asynchronously Asynchronous format](https://reader034.fdocuments.in/reader034/viewer/2022050400/5f7da5e0482f5179435ea674/html5/thumbnails/3.jpg)
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
![Page 4: Using the Dojo Toolkit in a WebWorks application...AMD - Asynchronous Module Definition 6 Mechanism allows modules and dependencies to be loaded asynchronously Asynchronous format](https://reader034.fdocuments.in/reader034/viewer/2022050400/5f7da5e0482f5179435ea674/html5/thumbnails/4.jpg)
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
![Page 5: Using the Dojo Toolkit in a WebWorks application...AMD - Asynchronous Module Definition 6 Mechanism allows modules and dependencies to be loaded asynchronously Asynchronous format](https://reader034.fdocuments.in/reader034/viewer/2022050400/5f7da5e0482f5179435ea674/html5/thumbnails/5.jpg)
Dojo 1.8
Dojo 1.8 Improvements
Performance optimizations
New widgets added
175 sub-packages and 1400 modules
Much improved documentation
5
![Page 6: Using the Dojo Toolkit in a WebWorks application...AMD - Asynchronous Module Definition 6 Mechanism allows modules and dependencies to be loaded asynchronously Asynchronous format](https://reader034.fdocuments.in/reader034/viewer/2022050400/5f7da5e0482f5179435ea674/html5/thumbnails/6.jpg)
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
![Page 7: Using the Dojo Toolkit in a WebWorks application...AMD - Asynchronous Module Definition 6 Mechanism allows modules and dependencies to be loaded asynchronously Asynchronous format](https://reader034.fdocuments.in/reader034/viewer/2022050400/5f7da5e0482f5179435ea674/html5/thumbnails/7.jpg)
Interactive Experience
Grid displays
Dynamic charts
Various Form Controls and Form Validators
Cross Platform graphics
Mapping using OpenLayers
Animated effects
Gauges
7
![Page 8: Using the Dojo Toolkit in a WebWorks application...AMD - Asynchronous Module Definition 6 Mechanism allows modules and dependencies to be loaded asynchronously Asynchronous format](https://reader034.fdocuments.in/reader034/viewer/2022050400/5f7da5e0482f5179435ea674/html5/thumbnails/8.jpg)
Interactive Experience
Dynamic charts
Many Styles
Many Colours
8
![Page 9: Using the Dojo Toolkit in a WebWorks application...AMD - Asynchronous Module Definition 6 Mechanism allows modules and dependencies to be loaded asynchronously Asynchronous format](https://reader034.fdocuments.in/reader034/viewer/2022050400/5f7da5e0482f5179435ea674/html5/thumbnails/9.jpg)
OpenLayers Map
9
dojox.geo.openlayers
• Mapping component based on
OpenLayers library
• Open source
![Page 10: Using the Dojo Toolkit in a WebWorks application...AMD - Asynchronous Module Definition 6 Mechanism allows modules and dependencies to be loaded asynchronously Asynchronous format](https://reader034.fdocuments.in/reader034/viewer/2022050400/5f7da5e0482f5179435ea674/html5/thumbnails/10.jpg)
dojox/mobile
![Page 11: Using the Dojo Toolkit in a WebWorks application...AMD - Asynchronous Module Definition 6 Mechanism allows modules and dependencies to be loaded asynchronously Asynchronous format](https://reader034.fdocuments.in/reader034/viewer/2022050400/5f7da5e0482f5179435ea674/html5/thumbnails/11.jpg)
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
![Page 12: Using the Dojo Toolkit in a WebWorks application...AMD - Asynchronous Module Definition 6 Mechanism allows modules and dependencies to be loaded asynchronously Asynchronous format](https://reader034.fdocuments.in/reader034/viewer/2022050400/5f7da5e0482f5179435ea674/html5/thumbnails/12.jpg)
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
![Page 13: Using the Dojo Toolkit in a WebWorks application...AMD - Asynchronous Module Definition 6 Mechanism allows modules and dependencies to be loaded asynchronously Asynchronous format](https://reader034.fdocuments.in/reader034/viewer/2022050400/5f7da5e0482f5179435ea674/html5/thumbnails/13.jpg)
Accordion View
13
Accordion View
• New in 1.8
• Works with tabbed views
• Various display modes
![Page 14: Using the Dojo Toolkit in a WebWorks application...AMD - Asynchronous Module Definition 6 Mechanism allows modules and dependencies to be loaded asynchronously Asynchronous format](https://reader034.fdocuments.in/reader034/viewer/2022050400/5f7da5e0482f5179435ea674/html5/thumbnails/14.jpg)
ListItem
14
ListItem View
• Create views programmatically
• Various page loading methods
![Page 15: Using the Dojo Toolkit in a WebWorks application...AMD - Asynchronous Module Definition 6 Mechanism allows modules and dependencies to be loaded asynchronously Asynchronous format](https://reader034.fdocuments.in/reader034/viewer/2022050400/5f7da5e0482f5179435ea674/html5/thumbnails/15.jpg)
Carousel
15
Carousel View
Ideal for item selection/viewing
Grouped items
![Page 16: Using the Dojo Toolkit in a WebWorks application...AMD - Asynchronous Module Definition 6 Mechanism allows modules and dependencies to be loaded asynchronously Asynchronous format](https://reader034.fdocuments.in/reader034/viewer/2022050400/5f7da5e0482f5179435ea674/html5/thumbnails/16.jpg)
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>
![Page 17: Using the Dojo Toolkit in a WebWorks application...AMD - Asynchronous Module Definition 6 Mechanism allows modules and dependencies to be loaded asynchronously Asynchronous format](https://reader034.fdocuments.in/reader034/viewer/2022050400/5f7da5e0482f5179435ea674/html5/thumbnails/17.jpg)
Dojo App Details Code
https://github.com/blackberry/BB10-WebWorks-Samples
17
![Page 18: Using the Dojo Toolkit in a WebWorks application...AMD - Asynchronous Module Definition 6 Mechanism allows modules and dependencies to be loaded asynchronously Asynchronous format](https://reader034.fdocuments.in/reader034/viewer/2022050400/5f7da5e0482f5179435ea674/html5/thumbnails/18.jpg)
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
![Page 19: Using the Dojo Toolkit in a WebWorks application...AMD - Asynchronous Module Definition 6 Mechanism allows modules and dependencies to be loaded asynchronously Asynchronous format](https://reader034.fdocuments.in/reader034/viewer/2022050400/5f7da5e0482f5179435ea674/html5/thumbnails/19.jpg)
THANK YOU
Michelle Mendoza
RIM Developer Relations
Dylan Schiemann
Co-founder of Dojo Toolkit & CEO of SitePen Inc.
October 16, 2012