Dojo Mobile @ Devoxx France

3,072 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,072
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Des possibilités avancé comme l’utilisation de CSS sprite pour les images
  • Tips hidden
  • Dojo Mobile @ Devoxx France

    1. 1. Le Web Mobile avec Dojo par Christophe Jolif @cjolif 1
    2. 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. 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. 4. Et vous ?• Experience mobile ou pas ?• JavaScript/HTML ?• Dojo ? 4
    5. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 21. Récupérer les donnéesrequire(["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. 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. 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. 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. 25. Demos 25
    26. 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: surhttps://github.com/cjolif/dojo-samples/tree/master/mobile-stock 26
    27. 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. 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. 29. Questions ? christophe.jolif@fr.ibm.com @cjolif 29

    ×