Le Web Mobile avec Dojo        par Christophe Jolif             @cjolif                               1
En quelques mots•   Rapide introduction à Dojo et Dojo Mobile•   Comment concrètement (on va voir du code!) construire une...
Votre serviteur•   15 ans d’expérience dans le développent de composants logiciels (Java, JSF,    HTML, CSS, SVG, Flex, Do...
Et vous ?•   Experience mobile ou pas ?•   JavaScript/HTML ?•   Dojo ?                                        4
Dojo Toolkit•   Une boîte à outils Open Source JavaScript pour construite des applications clientes Web•   Dernière versio...
Dojo Toolkit•   Parfaitement adapté aux développement d’applications professionnelles    avec le support de la globalisati...
Dojo•   Un système de déclaration de classe et de hiérarchie (multiple)•   Un chargeur de modules (AMD) et son outil de co...
Dijit•   Une librairie pour créer ses propres composants IHM•   Une palette de composants standard fournis par défaut•   T...
Dojox•   Tout ce qui est une extension à dojo ou dijit et qui est soit d’utilisation moins courante que les    composants ...
Dojo Mobile•   Un des nombreux modules de dojox : dojox/mobile•   Une librairie simple et légère pour construire des    ap...
Dojo Mobile•       Deux façons de définir votre IHM:    • e HTML en utilisant le parser mobile:      en    <button id="b" ...
Application Dojo Mobile•   Le but est de construire une application    simple affichant les cours de bourse et des    info...
Charger Dojo                  (< 4ko)<script type="text/javascript"    src="path-to-dojo/dojo/dojo.js"    data-dojo-config...
Définir l’agencement de l’application<body style="visibility:hidden;">              visibility:hidden     <!-- we split th...
Le panneau principal<div id="general"      data-dojo-type="dojox.mobile.ScrollableView“      data-dojo-props="height:inher...
Le panneau secondaire (1/2)<div id="swap1" data-dojo-type="dojox.mobile.SwapView">                                  dojox....
Le panneau secondaire (2/2)<div id="swap3" dojoType="dojox.mobile.SwapView">                            dojox.mobile.SwapV...
La vue détails<div data-dojo-type="dojox.mobile.RoundRect"     style="position:relative;" id="figures">     <table id="tbl...
La vue historique<div data-dojo-type="dojox.mobile.RoundRect      style="overflow:hidden">     <div data-dojo-type="dojox....
Charger les modules nécessaires<<script   type="text/javascript" src="src.js"></script>require(["dojo/dom", "dojo/_base/ar...
Récupérer les donnéesrequire(["dojo/_base/xhr"], function(xhr){        xhr.get({          url: "data.json",          handl...
Remplir les vues dynamiquement// go over the news for my stock and add them   arr.forEach(data.news, function(item){     v...
Le style de l’application<!-- standard dojox/mobile style for the components we use -->   <script type="text/javascript"  ...
Finaliser l’application• Utilisersource de « build » de Dojo pourincluant seulement  fichier           l’outil            ...
Demos        25
Résumé•   Nous avons vu qu’il était relativement simple de construire un application    mobile qui fonctionne sur iOS, And...
Dojo Mobile 1.8• Parmi les nouveautés mobiles: • accordéon, audio/video, badges, dialogues, grilles, nouvelles transitions...
Dojo (Mobile) 1.8•   La beta de Dojo 1.8 sera disponible d’ici quelques semaines ici:    http://download.dojotoolkit.org/•...
Questions ? christophe.jolif@fr.ibm.com           @cjolif                               29
Prochain SlideShare
Chargement dans…5
×

Dojo Mobile @ Devoxx France

3 004 vues

Publié le

Publié dans : Technologie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
3 004
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • 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

    ×