Dojo mobile web5-2013

© 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

© 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?

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

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

Agenda

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

Agenda

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

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

Loading Dojo (< 4ko)
<script type="text/javascript"
src="path-to-dojo/dojo/dojo.js"
data-dojo-config="parseOnLoad: true,
async: true, mblAlwaysHideAddressBar: true">
</script>

Define the application top level layout
<body style="visibility:hidden">

<div data-dojo-type="dojox/mobile/FixedSplitter"
data-dojo-props= orientation="orientation:'V'">

<div data-dojo-type="dojox/mobile/Container"
style="height:66%;overflow:hidden">
</div>

<div data-dojo-type="dojox/mobile/Pane"
style="height:10px;overflow:hidden"></div>

<div data-dojo-type="dojox/mobile/Container"
style="overflow:hidden">
</div>
</div>
</body>

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">

</ul>
</div>

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">

</ul>
</div>
</div>
<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;">

</div>
</div>
</div>

The secondary pane (2/2)
<div data-dojo-type="dojox/mobile/View"
data-dojo-props="height:'100%'"
style="overflow: hidden">
<div data-dojo-type="dojox/mobile/RoundRect“

</div>
</div>
</div>
<div data-dojo-type="dojox/mobile/PageIndicator"
data-dojo-props="fixed:'bottom'">
</div>

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>

The history view
<div data-dojo-type="dojox/mobile/RoundRect
<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>

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");
}
});

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 },
// ...
];
}
);
});

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);
});

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 ]
}
);
});

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);

Application style

<script type="text/javascript"
src="path-to-dojo/dojox/mobile/deviceTheme.js"
data-dojo-config="mblThemeFiles:
['base','PageIndicator','FixedSplitter'],
mblUserAgent: ‘ifyouwanttoforce'">
</script>

<link
href="path-to-dojo/dojox/.../DomButtonBlueCircleArrow.css"
rel="stylesheet">

<link href="demo.css" rel="stylesheet">

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

Agenda

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

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"
}
}

 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

Agenda

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…

Questions?
christophe.jolif@fr.ibm.com
@cjolif

Dojo mobile web5-2013

More Related Content

What's hot (19)

Viewers also liked (6)

Similar to Dojo mobile web5-2013 (20)

Recently uploaded (20)

Dojo mobile web5-2013