Dojo mobile web5-2013

1,383 views

Published on

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

  • Be the first to like this

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

No notes for slide

Dojo mobile web5-2013

  1. 1. © 2013 IBM CorporationBuilding Mobile Applications with theDojo ToolkitChristophe Jolif, Senior Software Engineer, Dojo Toolkit Committer, IBM Dojo LeadJune 14, 2013Web-5 Conference, 2013Béziers, France
  2. 2. © 2013 IBM Corporation2About me … and you ? Extensive experience developing components for the Web from “DHTML” and SVGcomponents 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 sincelate 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. 3. © 2013 IBM Corporation3Agenda 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. 4. © 2013 IBM Corporation4Introduction 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, objectoriented 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. 5. © 2013 IBM Corporation5Agenda 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. 6. © 2013 IBM Corporation6Dojo 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, BlackBerryand 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 platformwith deviceTheme.js One can build his own theme based on the Custom theme thanks to a set of LESS variables
  7. 7. © 2013 IBM Corporation7Agenda 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. 8. © 2013 IBM Corporation8Dojo 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 alimited 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 likeCordova 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 JavaScriptrequire(["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 fordynamic parts
  9. 9. © 2013 IBM Corporation9Building an App with Dojo Mobile The aim is to build a simple applicationshowing stocks tickets and variousinformation on the stock market (similarto iPhone application) The code is based on Dojo 1.9
  10. 10. © 2013 IBM CorporationBuilding an App with Dojo MobileLoading Dojo (< 4ko)<script type="text/javascript"src="path-to-dojo/dojo/dojo.js"data-dojo-config="parseOnLoad: true,async: true, mblAlwaysHideAddressBar: true"></script>
  11. 11. © 2013 IBM CorporationBuilding an App with Dojo MobileDefine 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. 12. © 2013 IBM CorporationBuilding an App with Dojo MobileThe 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 listitems for the various stocks to monitor --></ul></div>
  13. 13. © 2013 IBM CorporationBuilding an App with Dojo MobileThe 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. 14. © 2013 IBM CorporationBuilding an App with Dojo MobileThe 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. 15. © 2013 IBM CorporationBuilding an App with Dojo MobileThe 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. 16. © 2013 IBM CorporationBuilding an App with Dojo MobileThe history view<div data-dojo-type="dojox/mobile/RoundRectstyle="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. 17. © 2013 IBM CorporationBuilding an App with Dojo MobileLoading 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. 18. © 2013 IBM CorporationBuilding an App with Dojo MobileGet the stocks data from the serverrequire(["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. 19. © 2013 IBM CorporationBuilding an App with Dojo MobileDynamically filling the main viewarr.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. 20. © 2013 IBM CorporationBuilding an App with Dojo MobileGet the daily data from the server// simple xhr call, alternatively a JsonRestStore could be usedfunction 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. 21. © 2013 IBM CorporationBuilding an App with Dojo MobileDynamically filling the secondary views// go over the news for my stock and add themarr.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 themfor(var key in data.day){dom.byId(key).innerHTML = data.day[key];}// go over the historical data and update the chartregistry.byId("chart").chart.updateSeries("data",data.history);
  22. 22. © 2013 IBM CorporationBuilding an App with Dojo MobileApplication 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 --><linkhref="path-to-dojo/dojox/.../DomButtonBlueCircleArrow.css"rel="stylesheet"><!-- application specific styles --><link href="demo.css" rel="stylesheet">
  23. 23. © 2013 IBM CorporationBuilding an App with Dojo MobilePutting 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 HTTPrequests when using the app as a Web application You can also choose to bundle your JavaScript & CSS in a Cordovacontainer (hybrid application) to be able to deploy it just as anynative 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 codeconstraints a bit and for example use Dojo full parser instead ofDojo Mobile one, use images instead of CSS… Fork it on github: https://github.com/cjolif/dojo-mobile-stock
  24. 24. © 2013 IBM Corporation24Agenda 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. 25. © 2013 IBM CorporationLeveraging 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 evenjQuery if you are from the dark side ). The UI Framework can beused as you are accustomed to use it, just the way of defining theapplication (through configuration) is changing It contains nice features like separated templated views, easyinternationalization of the views, easy build support (you just providethe configuration file to the build and it will bundle everything youneed for you) You can checkout the tutorial project based on both Dojo Mobile andDojo App Framework on github:https://github.com/cjolif/dojo-contacts-app
  26. 26. © 2013 IBM CorporationLeveraging Dojo Application FrameworkSample 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. 27. © 2013 IBM CorporationLeveraging Dojo Application Framework The templates files are just raw HTML files, that can use DojoMobile widgets or any other UI framework The controller files are just AMD JavaScript files which controllersthe view, possibily implementing the view lifecycle methods: init(),beforeActivate()…. The nls files are just JSON files defining keys and their translations
  28. 28. © 2013 IBM Corporation28Agenda 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. 29. © 2013 IBM Corporation29Dojo 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 buteach 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.0compatibility won’t be mandate. This will be a unique opportunity to innovate, move forwardand 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/duiMulti-Channel UIFrameworkCore UI FrameworkDojo CoreMaybe:Desktop-onlyMaybe:Mobile-onlyCharts…
  30. 30. © 2013 IBM Corporation30Questions?christophe.jolif@fr.ibm.com@cjolif

×