Upload
others
View
15
Download
0
Embed Size (px)
Citation preview
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
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
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
9
dojox.geo.openlayers
• Mapping component based on
OpenLayers library
• Open source
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
13
Accordion View
• New in 1.8
• Works with tabbed views
• Various display modes
ListItem
14
ListItem View
• Create views programmatically
• Various page loading methods
Carousel
15
Carousel View
Ideal for item selection/viewing
Grouped items
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>
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