Contenu connexe
Similaire à Dojo mobile web5-2013
Similaire à Dojo mobile web5-2013 (20)
Dojo mobile web5-2013
- 1. © 2013 IBM Corporation
Building Mobile Applications with the
Dojo Toolkit
Christophe Jolif, Senior Software Engineer, Dojo Toolkit Committer, IBM Dojo Lead
June 14, 2013
Web-5 Conference, 2013
Béziers, France
- 2. © 2013 IBM Corporation2
About me … and you ?
Extensive experience developing components for the Web from “DHTML” and SVG
components in the early 2000 to Ajax & Flash/Flex and Dojo lately.
Started contributing to Dojo in 2010, committer since mid-2011, leading IBM Dojo effort since
late 2011
Contributing mostly on visual components (charting), mobile & application framework
Reviewed and committed most of the 1.9 Dojo mobile work
And you?
Dojo experience?
Mobile experience?
- 3. © 2013 IBM Corporation3
Agenda
Introduction to the Dojo Toolkit
Dojo Mobile in a Nutshell
Building a Mobile Web App with Dojo Mobile
Leveraging Dojo Application Framework
Dojo Mobile Future
- 4. © 2013 IBM Corporation4
Introduction to the Dojo Toolkit
An open source JavaScript toolkit to build Web and Mobile applications
Latest stable release: 1.9
UI is built client-side, the code is totally server-side (Node.js, PHP, Java…) and data-format
(JSON, XML…) agnostic
Well suited for professional applications development with globalization, accessibility, object
oriented programming support
Three main packages:
– Dojo
• Script module (AMD) loader and build tool
• DOM query & manipulation
• JavaScript, Promises, XHR etc… utilities
• Data access abstraction (dojo/store)
– Dijit
• UI Framework
• Basic & Advanced Web-oriented components (button, tree…)
• Layout (accordion, tabs…)
– Dojox extensions to Dojo & Dijit
- 5. © 2013 IBM Corporation5
Agenda
Introduction to the Dojo Toolkit
Dojo Mobile in a Nutshell
Building a Mobile Web App with Dojo Mobile
Leveraging Dojo Application Framework
Dojo Mobile Future
- 6. © 2013 IBM Corporation6
Dojo Mobile in a Nutshell
dojox/mobile is a simple & lightweight framework that allows you to build (native-looking)
mobile Web & Hybrid applications
It comes with six predefined themes (CSS stylesheets) including WP8, Android, BlackBerry
and iOS theming:
Only the CSS changes, the code of the application stays the same across devices
The theming can either be forced or dynamically switched based on the runtime platform
with deviceTheme.js
One can build his own theme based on the Custom theme thanks to a set of LESS variables
- 7. © 2013 IBM Corporation7
Agenda
Introduction to the Dojo Toolkit
Dojo Mobile in a Nutshell
Building a Mobile Web App with Dojo Mobile
Leveraging Dojo Application Framework
Dojo Mobile Future
- 8. © 2013 IBM Corporation8
Dojo Mobile in a Nutshell
It provides views, simple widgets (buttons, lists, sliders…) and transition between views
To achieve lightness it only relies on a few Dijit classes as a simple widget framework and a
limited set of dojo core classes and comes with is own compact markup parser (<100 LOC)
Resulting application can either be run as a Web app or bundled into a container like
Cordova to run as a hybrid native application on the device
You can write your application as markup
<button id="b" data-dojo-type="dojox/mobile/Button">
My Button
</button>
Or in JavaScript
require(["dojox/mobile/Button"], function(Button){
var button = new Button({ label: "My Button" }, "b");
button.startup();
});
Or most probably leveraging markup for static part of the display and JavaScript for
dynamic parts
- 9. © 2013 IBM Corporation9
Building an App with Dojo Mobile
The aim is to build a simple application
showing stocks tickets and various
information on the stock market (similar
to iPhone application)
The code is based on Dojo 1.9
- 10. © 2013 IBM Corporation
Building an App with Dojo Mobile
Loading Dojo (< 4ko)
<script type="text/javascript"
src="path-to-dojo/dojo/dojo.js"
data-dojo-config="parseOnLoad: true,
async: true, mblAlwaysHideAddressBar: true">
</script>
- 11. © 2013 IBM Corporation
Building an App with Dojo Mobile
Define the application top level layout
<body style="visibility:hidden">
<!-- we split the view vertically -->
<div data-dojo-type="dojox/mobile/FixedSplitter"
data-dojo-props= orientation="orientation:'V'">
<!-- first pane is 66% of the total height -->
<div data-dojo-type="dojox/mobile/Container"
style="height:66%;overflow:hidden">
</div>
<!-- second pane is just 10px separation -->
<div data-dojo-type="dojox/mobile/Pane"
style="height:10px;overflow:hidden"></div>
<!-- last pane takes remaining space -->
<div data-dojo-type="dojox/mobile/Container"
style="overflow:hidden">
</div>
</div>
</body>
- 12. © 2013 IBM Corporation
Building an App with Dojo Mobile
The main pane
<div id="general"
data-dojo-type="dojox/mobile/ScrollableView"
data-dojo-props="height:'inherit'">
<ul data-dojo-type="dojox/mobile/RoundRectList"
class="list1" data-dojo-props="stateful: true">
<!-- here will go dynamically created list
items for the various stocks to monitor -->
</ul>
</div>
- 13. © 2013 IBM Corporation
Building an App with Dojo Mobile
The secondary pane (1/2)
<div id="swap1" data-dojo-type="dojox/mobile/SwapView">
<div data-dojo-type="dojox/mobile/ScrollableView"
data-dojo-props="height:'100%'">
<ul id="news" data-dojo-type="dojox/mobile/RoundRectList"
data-dojo-props="variableHeight: true">
<!-- here will go dynamically created news items -->
</ul>
</div>
</div>
<div id="swap2" data-dojo-type="dojox/mobile/SwapView">
<div data-dojo-type="dojox/mobile/View"
data-dojo-props="height:'100%'" >
style=”overflow: hidden”>
<div data-dojo-type="dojox/mobile/RoundRect“
style="position:relative;">
<!-- here will go details about the selected stock -->
</div>
</div>
</div>
- 14. © 2013 IBM Corporation
Building an App with Dojo Mobile
The secondary pane (2/2)
<div id="swap3" data-dojo-type="dojox/mobile/SwapView">
<div data-dojo-type="dojox/mobile/View"
data-dojo-props="height:'100%'"
style="overflow: hidden">
<div data-dojo-type="dojox/mobile/RoundRect“
style="overflow:hidden">
<!-- here will go history chart -->
</div>
</div>
</div>
<div data-dojo-type="dojox/mobile/PageIndicator"
data-dojo-props="fixed:'bottom'">
</div>
- 15. © 2013 IBM Corporation
Building an App with Dojo Mobile
The detailed view
<div data-dojo-type="dojox/mobile/RoundRect"
style="position:relative" id="figures">
<table id="tbl1" style="width:90%">
<tr><td>Open</td><td id="open"></td>
<td>Cap</td><td id="cap"></td></tr>
<tr><td>Max</td><td id="max"></td>
<td>Max/52w</td><td id="max52"></td></tr>
<tr><td>Min</td><td id="min"></td>
<td>Min/52w</td><td id="min52"></td></tr>
<tr><td>Vol</td><td id="vol"></td>
<td>Mean Vol</td><td id="meanvol"></td></tr>
<tr><td>PER</td><td id="per"></td>
<td>Rdt</td><td id="rdt"></td></tr>
</table>
</div>
- 16. © 2013 IBM Corporation
Building an App with Dojo Mobile
The history view
<div data-dojo-type="dojox/mobile/RoundRect
style="overflow:hidden">
<div data-dojo-type="dojox/charting/widget/Chart" id="chart"
data-dojo-props="margins:{ l: 0, r: 0, t: 0, b: 0 }"
style="height: 100px">
<div class="plot" name="gridPlot" type="Grid"
enableCache="true" renderOnAxis="false"></div>
<div class="axis" name="x" enableCache="true"
fixUpper="major" majorTickStep="1"></div>
<div class="axis" name="y" vertical="true" min="0"></div>
<div class="plot" name="default" type="Lines"></div>
<div class="series" name="data" data="0,0"></div>
</div>
</div>
- 17. © 2013 IBM Corporation
Building an App with Dojo Mobile
Loading the needed JavaScript modules (if not using full parser)
<script type="text/javascript" src="src.js"></script>
require(["dojo/dom", "dojo/_base/array",
"dojo/ready", "dijit/registry",
"dojox/mobile/ListItem", "dojox/mobile/parser", "dojox/mobile",
"dojox/mobile/FixedSplitter", "dojox/mobile/ScrollableView",
"dojox/mobile/Pane", "dojox/mobile/Container",
"dojox/mobile/SwapView", "dojox/mobile/PageIndicator",
"dojox/charting/widget/Chart", "dojox/charting/axis2d/Default",
"dojox/charting/plot2d/Lines", "dojox/charting/plot2d/Grid"],
function(dom, arr, ready, registry, ListItem){
ready(function(){
var stocks = registry.byId("stocks");
var news = registry.byId("news");
}
});
- 18. © 2013 IBM Corporation
Building an App with Dojo Mobile
Get the stocks data from the server
require(["dojo/request"], function(request){
request.get("data.json", { handleAs: "json" }).then(
function(live){
// process the JSON data
// the stocks data will be of the following form:
live = [
{ id: "stock1", title: "Stock 1",
price: 10.1, change: 10.5 },
{ id: "stock2", title: "Stock 2",
price: 15.8, change: -0.3 },
// ...
];
}
);
});
- 19. © 2013 IBM Corporation
Building an App with Dojo Mobile
Dynamically filling the main view
arr.forEach(live, function(item, i){
var li = new ListItem({
onClick: details,
moveTo: "#",
selected: i == 0,
id: item.id
});
var pos = item.change > 0;
li.labelNode.innerHTML =
"<div class='c1'>"+item.title+"</div>"+
"<div class='c2'>"+item.price+"</div>"+
"<div class='c3
"+(pos?"c3a":"c3b")+"'>"+(pos?"+":"")+item.change+"%</div>";
stocks.addChild(li);
});
- 20. © 2013 IBM Corporation
Building an App with Dojo Mobile
Get the daily data from the server
// simple xhr call, alternatively a JsonRestStore could be used
function details(){
var id = this.id;
request("data."+id+"json", { handleAs : "json" }).then(
function(data){
// process the JSON data
// the daily data will be of the following form:
data = {
news: [ { url: "http://stocknewsurl.com",
title: "first title",
subtitle: "subtitle" }, /** ... **/ ],
day: { open: 10.1, cap: 15343412, max: 10.5, min: 9.9,
max52: 93, min52: 3.5, vol: 3242,
meanvol: 3403, per: 5, rdt: 3 },
history: [ 5, 6, 7, 8, 10, 13, 18, 24, 32, 37, 45, 51 ]
}
);
});
- 21. © 2013 IBM Corporation
Building an App with Dojo Mobile
Dynamically filling the secondary views
// go over the news for my stock and add them
arr.forEach(data.news, function(item){
var li = new ListItem({
href: item.url,
hrefTarget: "_blank",
arrowClass: "mblDomButtonBlueCircleArrow"
});
li.labelNode.innerHTML = item.title+
"<div class='subtitle'>"+item.subtitle+"</div>";
news.addChild(li);
});
// go over the daily data and update them
for(var key in data.day){
dom.byId(key).innerHTML = data.day[key];
}
// go over the historical data and update the chart
registry.byId("chart").chart.updateSeries("data",
data.history);
- 22. © 2013 IBM Corporation
Building an App with Dojo Mobile
Application style
<!-- standard dojox/mobile style for the components we use -->
<script type="text/javascript"
src="path-to-dojo/dojox/mobile/deviceTheme.js"
data-dojo-config="mblThemeFiles:
['base','PageIndicator','FixedSplitter'],
mblUserAgent: ‘ifyouwanttoforce'">
</script>
<!-- additional dojox/mobile needed styles -->
<link
href="path-to-dojo/dojox/.../DomButtonBlueCircleArrow.css"
rel="stylesheet">
<!-- application specific styles -->
<link href="demo.css" rel="stylesheet">
- 23. © 2013 IBM Corporation
Building an App with Dojo Mobile
Putting it all together
You might want to use the Dojo build tool to gather your JavaScript
& CSS source file into single files to avoid unnecessary HTTP
requests when using the app as a Web application
You can also choose to bundle your JavaScript & CSS in a Cordova
container (hybrid application) to be able to deploy it just as any
native application on the device
When using Cordova you might want to look at the (yet)
experimental Dojo + Cordova project: https://github.com/ibm-
dojo/dcordova
When not deploying to the Web you might relax size code
constraints a bit and for example use Dojo full parser instead of
Dojo Mobile one, use images instead of CSS…
Fork it on github: https://github.com/cjolif/dojo-mobile-stock
- 24. © 2013 IBM Corporation24
Agenda
Introduction to the Dojo Toolkit
Dojo Mobile in a Nutshell
Building a Mobile Web App with Dojo Mobile
Leveraging Dojo Application Framework
Dojo Mobile Future
- 25. © 2013 IBM Corporation
Leveraging Dojo Application Framework
The Dojo App Framework (dojox/app) allows you to build a multi-
channel app (mobile, tablet, desktop) from a single configuration
(JSON) file for increased maintainability and reduced coding effort
You can use Dojo Mobile or Dijit or both in the application (or even
jQuery if you are from the dark side ). The UI Framework can be
used as you are accustomed to use it, just the way of defining the
application (through configuration) is changing
It contains nice features like separated templated views, easy
internationalization of the views, easy build support (you just provide
the configuration file to the build and it will bundle everything you
need for you)
You can checkout the tutorial project based on both Dojo Mobile and
Dojo App Framework on github:
https://github.com/cjolif/dojo-contacts-app
- 26. © 2013 IBM Corporation
Leveraging Dojo Application Framework
Sample Configuration File (excerpt)
"controllers": [
"dojox/app/controllers/Load",
"dojox/app/controllers/Transition",
"dojox/app/controllers/Layout",
"dojox/app/controllers/History"
],
"stores": {
"contacts": {
"type": "contactsApp/ContactsStore",
"observable": true
}
},
"views": {
"list": {
"controller": "contactsApp/list",
"template": "contactsApp/list.html",
"nls": "contactsApp/nls/list",
"has": {
"!phone": {
"constraint": "left"
}
},
"detail": {
"controller": "contactsApp/detail",
"template": "contactsApp/detail.html",
"nls": "contactsApp/nls/detail"
}
}
- 27. © 2013 IBM Corporation
Leveraging Dojo Application Framework
The templates files are just raw HTML files, that can use Dojo
Mobile widgets or any other UI framework
The controller files are just AMD JavaScript files which controllers
the view, possibily implementing the view lifecycle methods: init(),
beforeActivate()….
The nls files are just JSON files defining keys and their translations
- 28. © 2013 IBM Corporation28
Agenda
Introduction to the Dojo Toolkit
Dojo Mobile in a Nutshell
Building a Mobile Web App with Dojo Mobile
Leveraging Dojo Application Framework
Dojo Mobile Future
- 29. © 2013 IBM Corporation29
Dojo Mobile Future
The next major milestone will be Dojo 2.0 in early 2014
Dojo Toolkit will not be monolithic anymore, there will still be a Dojo Toolkit distribution but
each sub project (like Chating or Dojo Mobile) will get its own github project
While keeping compatibility was very important as part of the Dojo 1.x stream, moving to 2.0
compatibility won’t be mandate. This will be a unique opportunity to innovate, move forward
and concentrate on latest browsers (IE9+, FF24+, Chrome, Android 4.x+, iOS6+…)
Dojo Mobile will be part of this move, converging as much a possible with Dijit:
Follow our investigation work at https://github.com/ibm-dojo/dui
Multi-Channel UI
Framework
Core UI Framework
Dojo Core
Maybe:
Desktop-only
Maybe:
Mobile-only
Charts…
- 30. © 2013 IBM Corporation30
Questions?
christophe.jolif@fr.ibm.com
@cjolif