1. Le Web Mobile avec Dojo
par Christophe Jolif
@cjolif
1

2. En quelques mots
• Rapide introduction à Dojo et Dojo Mobile
• Comment concrètement (on va voir du code!) construire une application
mobile avec Dojo, étape après étape, avec les astuces et pièges à éviter
• Qu’attendre de nouveau en Dojo (Mobile) 1.8 ?
2

3. Votre serviteur
• 15 ans d’expérience dans le développent de composants logiciels (Java, JSF,
HTML, CSS, SVG, Flex, Dojo)
• Committer Dojo, en charge de l’effort Dojo chez IBM
• A participé au portage sur mobile du module de charts de Dojo
• Je veux partager mon retour d’expérience sur Dojo mobile avec vous
• @cjolif sur twitter et github
3

4. Et vous ?
• Experience mobile ou pas ?
• JavaScript/HTML ?
• Dojo ?
4

5. Dojo Toolkit
• Une boîte à outils Open Source JavaScript pour construite des applications clientes Web
• Dernière version: 1.7.2
• Tout se passe côté client, seuls les données viennent du serveur et ce de manière agnostique
aussi bien s’agissant du type de serveur (Java, PHP …) que du format de données (JSON, XML…)
• Trois grands packages:
• dojo (chargeur, manipulation DOM, utilitaires JavaScript, …)
• dijit (bibliothèques de composant IHM et son framework)
• dojox (diverses extensions)
5

6. Dojo Toolkit
• Parfaitement adapté aux développement d’applications professionnelles
avec le support de la globalisation, de l’accessibilité, des applications
complexes et de la hiérarchie objet
• Open Source mais également fournit et supporté par IBM dans le cadre du
« Feature Pack » Web 2.0 et Mobile pour WebSphere Application Server
6

7. Dojo
• Un système de déclaration de classe et de hiérarchie (multiple)
• Un chargeur de modules (AMD) et son outil de construction d’applications
• Des utilitaires de manipulation du DOM
• Des utilitaires JavaScript qui comble les éventuelles lacunes des différents browsers par rapport à
la norme (forEach…)
• Des utilitaires de chargement asynchrone (XHR)
• Un module de gestion de données (cache, gestions des modifications…)
• D’autres utilitaires: Drag n Drop, gestion des couleurs, des événements…
7

8. Dijit
• Une librairie pour créer ses propres composants IHM
• Une palette de composants standard fournis par défaut
• Tout ce qu’il faut pour vos formulaires: boutons, listes, « spinner », «
checkbox », « toggle », « slider »…
• Des composants plus avancées: arbre, éditeur de texte, choix de date…
• Des composants de positionnement: accordéon, onglets, pile, …
8

9. Dojox
• Tout ce qui est une extension à dojo ou dijit et qui est soit d’utilisation moins courante que les
composants de base, soit encore en incubation (vérifier l’état « experimental »)
• Une API de graphique vectoriel qui abstrait Canvas, SVG et VML (GFX)
• Des composants IHM plus avancées que dans Dijit: Chart, Gauges, Wizard, Cartes, Grille de
données…
• Des implémentations de source de données (Csv, XML, JsonRest, S3, …)
• Une librairie spécifique pour les applications mobiles
• De nombreuses autres modules: programmation fonctionnelle, support mvc…
9

10. Dojo Mobile
• Un des nombreux modules de dojox : dojox/mobile
• Une librairie simple et légère pour construire des
applications Web pour mobile qui ressemblent à des
applications natives. Elle fournie des vues, des
composants simples et des transitions entre les vues
• Les feuilles de styles sont fournies pour iOS, Android et
BlackBerry
• Mais le code JavaScript et HTML reste le même
• Utilisable à travers le Web ou dans un appli native
(PhoneGap)
10

11. Dojo Mobile
• Deux façons de définir votre IHM:
• e HTML en utilisant le parser mobile:
en
<button id="b" data-dojo-type="dojox.mobile.Button">My Button</div>
• o en créant vous-même les objets JavaScript:
ou
r
require(["dojox/mobile/Button"], function(Button){
var button = new Button({ label: "My Button" }, "b");
button.startup();
});
• ou plus probablement en mélangeant les deux techniques selon selon la partie de l’IHM statique ou dynamique
• « Made in France » (ou presque): 4 contributeurs Dojo Mobile au France Lab d’IBM
11

12. Application Dojo Mobile
• Le but est de construire une application
simple affichant les cours de bourse et des
informations diverses sur les sociétés
(similaire à l’application bourse de iOS)
• Le code que nous allons voir est basé sur la
future version 1.8 de Dojo, il peut être
aisément adapté à 1.7 si besoin
12

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

14. Définir l’agencement de l’application
<body style="visibility:hidden;">
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>
1
14

15. Le panneau principal
<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'">
stateful
<!-- here will go dynamically created list items for
the various stocks to monitor -->
</ul>
</div>
1
15

16. Le panneau secondaire (1/2)
<div id="swap1" data-dojo-type="dojox.mobile.SwapView">
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" dojoType="dojox.mobile.SwapView">
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>
1
16

17. Le panneau secondaire (2/2)
<div id="swap3" dojoType="dojox.mobile.SwapView">
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 for the selected stock -->
</div>
</div>
</div>
<div data-dojo-type="dojox.mobile.PageIndicator"
dojox.mobile.PageIndicator
data-dojo-pros="fixed:'bottom'">
</div>
1
17

18. La vue détails
<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>
1
18

19. La vue historique
<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>
1
19

20. Charger les modules nécessaires
<
<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/ListItem
"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){
dom ListItem
ready(function(){
ready
var news = registry.byId("news");
registry
// ...
}
});
2
20

21. Récupérer les données
require(["dojo/_base/xhr"], function(xhr){
xhr.get({
url: "data.json",
handleAs: "json",
load: function(data){
// deal with data
}
});
// data will be of the following form:
data = {
news: [
{
url: "http://whateverurlwherethereisinfoonthisnews.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 ]
};
2
21

22. Remplir les vues dynamiquement
// 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+
labelNode
"<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.getSeries("data").update(data.history);
2
22

23. Le style de l’application
<!-- 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']">
</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">
2
23

24. Finaliser l’application
• Utilisersource de « build » de Dojo pourincluant seulement
fichier
l’outil
unique pour l’application
construire une
les modules utilisés
• Eventuellement inclure l’applicationApp Store.
PhoneGap pour la deployer via un
dans un container
24

25. Demos
25

26. Résumé
• Nous avons vu qu’il était relativement simple de construire un application
mobile qui fonctionne sur iOS, Android et BlackBerry avec JavaScript et
Dojo Mobile
• Bien entendu l’application pourrait être enrichie
• Vous pouvez récupérer le code, l’améliorer, soumettre vos améliorations
s github:
sur
https://github.com/cjolif/dojo-samples/tree/master/mobile-stock
26

27. Dojo Mobile 1.8
• Parmi les nouveautés mobiles:
• accordéon, audio/video, badges, dialogues, grilles, nouvelles transitions,
listes éditables
• Mais aussi un calendrier, de nouvelles gauges, un treemap fonctionnant
sur Web traditionnel ou mobile
27

28. Dojo (Mobile) 1.8
• La beta de Dojo 1.8 sera disponible d’ici quelques semaines ici:
http://download.dojotoolkit.org/
• La version finale est prévu pour Juin/Juillet
• N’hésitez pas donner votre avis !
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
• Allez plus loin dans le design visuel avec Maqetta:
http://maqetta.org/
28

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