SlideShare une entreprise Scribd logo
1  sur  30
© 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?
© 2013 IBM Corporation3
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
© 2013 IBM Corporation4
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
© 2013 IBM Corporation5
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
© 2013 IBM Corporation6
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
© 2013 IBM Corporation7
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
© 2013 IBM Corporation8
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
© 2013 IBM Corporation9
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
© 2013 IBM Corporation
Building an App with Dojo Mobile
Loading Dojo (< 4ko)
<script type="text/javascript"
src="path-to-dojo/dojo/dojo.js"
data-dojo-config="parseOnLoad: true,
async: true, mblAlwaysHideAddressBar: true">
</script>
© 2013 IBM Corporation
Building an App with Dojo Mobile
Define 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>
© 2013 IBM Corporation
Building an App with Dojo Mobile
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">
<!-- here will go dynamically created list
items for the various stocks to monitor -->
</ul>
</div>
© 2013 IBM Corporation
Building an App with Dojo Mobile
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">
<!-- 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>
© 2013 IBM Corporation
Building an App with Dojo Mobile
The 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>
© 2013 IBM Corporation
Building an App with Dojo Mobile
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>
© 2013 IBM Corporation
Building an App with Dojo Mobile
The history view
<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>
© 2013 IBM Corporation
Building an App with Dojo Mobile
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");
}
});
© 2013 IBM Corporation
Building an App with Dojo Mobile
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 },
// ...
];
}
);
});
© 2013 IBM Corporation
Building an App with Dojo Mobile
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);
});
© 2013 IBM Corporation
Building an App with Dojo Mobile
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 ]
}
);
});
© 2013 IBM Corporation
Building an App with Dojo Mobile
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);
© 2013 IBM Corporation
Building an App with Dojo Mobile
Application 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 -->
<link
href="path-to-dojo/dojox/.../DomButtonBlueCircleArrow.css"
rel="stylesheet">
<!-- application specific styles -->
<link href="demo.css" rel="stylesheet">
© 2013 IBM Corporation
Building an App with Dojo Mobile
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
© 2013 IBM Corporation24
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
© 2013 IBM Corporation
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
© 2013 IBM Corporation
Leveraging Dojo Application Framework
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"
}
}
© 2013 IBM Corporation
Leveraging Dojo Application Framework
 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
© 2013 IBM Corporation28
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
© 2013 IBM Corporation29
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…
© 2013 IBM Corporation30
Questions?
christophe.jolif@fr.ibm.com
@cjolif

Contenu connexe

Tendances

Open social gadgets in ibm connections
Open social gadgets in ibm connectionsOpen social gadgets in ibm connections
Open social gadgets in ibm connectionsVincent Burckhardt
 
Introduction to j query mobile framework
Introduction to j query mobile frameworkIntroduction to j query mobile framework
Introduction to j query mobile frameworkShreerang Patwardhan
 
Ria2010 workshop dev mobile
Ria2010 workshop dev mobileRia2010 workshop dev mobile
Ria2010 workshop dev mobileMichael Chaize
 
Fatc - Productivity by Design
Fatc - Productivity by DesignFatc - Productivity by Design
Fatc - Productivity by DesignMichael Chaize
 
JAX2010 Flex Java technical session: interactive dashboard
JAX2010 Flex Java technical session: interactive dashboardJAX2010 Flex Java technical session: interactive dashboard
JAX2010 Flex Java technical session: interactive dashboardMichael Chaize
 
Netbiscuits @ SXSW Interactive: Android ≠ Android: Lessons Creating a JS Fram...
Netbiscuits @ SXSW Interactive: Android ≠ Android: Lessons Creating a JS Fram...Netbiscuits @ SXSW Interactive: Android ≠ Android: Lessons Creating a JS Fram...
Netbiscuits @ SXSW Interactive: Android ≠ Android: Lessons Creating a JS Fram...dbarkoe
 
Adobe flash platform java
Adobe flash platform javaAdobe flash platform java
Adobe flash platform javaMichael Chaize
 
Ria2010 - keynote - Evolution des RIA d'Entreprise
Ria2010 - keynote - Evolution des RIA d'EntrepriseRia2010 - keynote - Evolution des RIA d'Entreprise
Ria2010 - keynote - Evolution des RIA d'EntrepriseMichael Chaize
 
QUAL360 Survelytics Mobile User Guide
QUAL360 Survelytics Mobile User GuideQUAL360 Survelytics Mobile User Guide
QUAL360 Survelytics Mobile User Guideekiglobal
 
Best practices for Flash applications on mobile devices
Best practices for Flash applications on mobile devicesBest practices for Flash applications on mobile devices
Best practices for Flash applications on mobile devicesMichael Chaize
 
Adobe flex at jax london 2011
Adobe flex at  jax london 2011Adobe flex at  jax london 2011
Adobe flex at jax london 2011Michael Chaize
 
Oop2012 mobile workshops
Oop2012 mobile workshopsOop2012 mobile workshops
Oop2012 mobile workshopsMichael Chaize
 
Triffort - iOS Application Portfolio
Triffort - iOS Application PortfolioTriffort - iOS Application Portfolio
Triffort - iOS Application PortfolioMohd Azam
 
Over the air 2.5 - Adobe AIR for Android
Over the air 2.5 - Adobe AIR for AndroidOver the air 2.5 - Adobe AIR for Android
Over the air 2.5 - Adobe AIR for AndroidMichael Chaize
 
Xplatform mobile development
Xplatform mobile developmentXplatform mobile development
Xplatform mobile developmentMichael Chaize
 

Tendances (19)

Jax2010 adobe lcds
Jax2010 adobe lcdsJax2010 adobe lcds
Jax2010 adobe lcds
 
Portlet factory 101
Portlet factory 101Portlet factory 101
Portlet factory 101
 
Open social gadgets in ibm connections
Open social gadgets in ibm connectionsOpen social gadgets in ibm connections
Open social gadgets in ibm connections
 
Flex mobile for JUG
Flex mobile for JUGFlex mobile for JUG
Flex mobile for JUG
 
Introduction to j query mobile framework
Introduction to j query mobile frameworkIntroduction to j query mobile framework
Introduction to j query mobile framework
 
Ria2010 workshop dev mobile
Ria2010 workshop dev mobileRia2010 workshop dev mobile
Ria2010 workshop dev mobile
 
Fatc - Productivity by Design
Fatc - Productivity by DesignFatc - Productivity by Design
Fatc - Productivity by Design
 
JAX2010 Flex Java technical session: interactive dashboard
JAX2010 Flex Java technical session: interactive dashboardJAX2010 Flex Java technical session: interactive dashboard
JAX2010 Flex Java technical session: interactive dashboard
 
Jax2001 adobe keynote
Jax2001 adobe keynoteJax2001 adobe keynote
Jax2001 adobe keynote
 
Netbiscuits @ SXSW Interactive: Android ≠ Android: Lessons Creating a JS Fram...
Netbiscuits @ SXSW Interactive: Android ≠ Android: Lessons Creating a JS Fram...Netbiscuits @ SXSW Interactive: Android ≠ Android: Lessons Creating a JS Fram...
Netbiscuits @ SXSW Interactive: Android ≠ Android: Lessons Creating a JS Fram...
 
Adobe flash platform java
Adobe flash platform javaAdobe flash platform java
Adobe flash platform java
 
Ria2010 - keynote - Evolution des RIA d'Entreprise
Ria2010 - keynote - Evolution des RIA d'EntrepriseRia2010 - keynote - Evolution des RIA d'Entreprise
Ria2010 - keynote - Evolution des RIA d'Entreprise
 
QUAL360 Survelytics Mobile User Guide
QUAL360 Survelytics Mobile User GuideQUAL360 Survelytics Mobile User Guide
QUAL360 Survelytics Mobile User Guide
 
Best practices for Flash applications on mobile devices
Best practices for Flash applications on mobile devicesBest practices for Flash applications on mobile devices
Best practices for Flash applications on mobile devices
 
Adobe flex at jax london 2011
Adobe flex at  jax london 2011Adobe flex at  jax london 2011
Adobe flex at jax london 2011
 
Oop2012 mobile workshops
Oop2012 mobile workshopsOop2012 mobile workshops
Oop2012 mobile workshops
 
Triffort - iOS Application Portfolio
Triffort - iOS Application PortfolioTriffort - iOS Application Portfolio
Triffort - iOS Application Portfolio
 
Over the air 2.5 - Adobe AIR for Android
Over the air 2.5 - Adobe AIR for AndroidOver the air 2.5 - Adobe AIR for Android
Over the air 2.5 - Adobe AIR for Android
 
Xplatform mobile development
Xplatform mobile developmentXplatform mobile development
Xplatform mobile development
 

En vedette

Design Pattern presentation
Design Pattern presentationDesign Pattern presentation
Design Pattern presentationhoanhtran
 
Rich internet application development using the dojo toolkit
Rich internet application development using the dojo toolkitRich internet application development using the dojo toolkit
Rich internet application development using the dojo toolkitalexklaeser
 
Introduction To Dojo
Introduction To DojoIntroduction To Dojo
Introduction To Dojoyoavrubin
 
Angularjs vs Dojo toolkit | SuperSpeaker@CodeCamp Iasi 2014
Angularjs vs Dojo toolkit | SuperSpeaker@CodeCamp Iasi 2014Angularjs vs Dojo toolkit | SuperSpeaker@CodeCamp Iasi 2014
Angularjs vs Dojo toolkit | SuperSpeaker@CodeCamp Iasi 2014Endava
 
The Dojo Toolkit An Introduction
The Dojo Toolkit   An IntroductionThe Dojo Toolkit   An Introduction
The Dojo Toolkit An IntroductionJeff Fox
 

En vedette (6)

Design Pattern presentation
Design Pattern presentationDesign Pattern presentation
Design Pattern presentation
 
Rich internet application development using the dojo toolkit
Rich internet application development using the dojo toolkitRich internet application development using the dojo toolkit
Rich internet application development using the dojo toolkit
 
Introduction To Dojo
Introduction To DojoIntroduction To Dojo
Introduction To Dojo
 
Angularjs vs Dojo toolkit | SuperSpeaker@CodeCamp Iasi 2014
Angularjs vs Dojo toolkit | SuperSpeaker@CodeCamp Iasi 2014Angularjs vs Dojo toolkit | SuperSpeaker@CodeCamp Iasi 2014
Angularjs vs Dojo toolkit | SuperSpeaker@CodeCamp Iasi 2014
 
Solution Architect CV
Solution Architect CVSolution Architect CV
Solution Architect CV
 
The Dojo Toolkit An Introduction
The Dojo Toolkit   An IntroductionThe Dojo Toolkit   An Introduction
The Dojo Toolkit An Introduction
 

Similaire à Dojo mobile web5-2013

企業應用行動化開發架構
企業應用行動化開發架構企業應用行動化開發架構
企業應用行動化開發架構湯米吳 Tommy Wu
 
Real-world Dojo Mobile
Real-world Dojo MobileReal-world Dojo Mobile
Real-world Dojo MobileAndrew Ferrier
 
Dojo 1.7 mobile overview dojo conf 2011
Dojo 1.7 mobile overview  dojo conf 2011Dojo 1.7 mobile overview  dojo conf 2011
Dojo 1.7 mobile overview dojo conf 2011ccmitchellusa
 
Extending Spring MVC with Spring Mobile and JavaScript
Extending Spring MVC with Spring Mobile and JavaScriptExtending Spring MVC with Spring Mobile and JavaScript
Extending Spring MVC with Spring Mobile and JavaScriptRoy Clarkson
 
Building Cross-Platform Mobile Apps
Building Cross-Platform Mobile AppsBuilding Cross-Platform Mobile Apps
Building Cross-Platform Mobile AppsTroy Miles
 
Dojo javascript toolkit
Dojo javascript toolkit Dojo javascript toolkit
Dojo javascript toolkit Predhin Sapru
 
[Devoxx Morocco 2015] Apache Cordova In Action
[Devoxx Morocco 2015] Apache Cordova In Action[Devoxx Morocco 2015] Apache Cordova In Action
[Devoxx Morocco 2015] Apache Cordova In ActionHazem Saleh
 
Introduction phonegap
Introduction phonegapIntroduction phonegap
Introduction phonegapRakesh Jha
 
Advanced programing in phonegap
Advanced programing in phonegapAdvanced programing in phonegap
Advanced programing in phonegapRakesh Jha
 
[JavaLand 2015] Developing JavaScript Mobile Apps Using Apache Cordova
[JavaLand 2015] Developing JavaScript Mobile Apps Using Apache Cordova[JavaLand 2015] Developing JavaScript Mobile Apps Using Apache Cordova
[JavaLand 2015] Developing JavaScript Mobile Apps Using Apache CordovaHazem Saleh
 
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile designDreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile designDee Sadler
 
Code and Conquer with Globe Labs, October 27, 2012
Code and Conquer with Globe Labs, October 27, 2012Code and Conquer with Globe Labs, October 27, 2012
Code and Conquer with Globe Labs, October 27, 2012jobandesther
 
Apache Cordova In Action
Apache Cordova In ActionApache Cordova In Action
Apache Cordova In ActionHazem Saleh
 
Cross platform Web apps
Cross platform Web appsCross platform Web apps
Cross platform Web appsShaikSannu
 
phonegap with angular js for freshers
phonegap with angular js for freshers    phonegap with angular js for freshers
phonegap with angular js for freshers dssprakash
 

Similaire à Dojo mobile web5-2013 (20)

企業應用行動化開發架構
企業應用行動化開發架構企業應用行動化開發架構
企業應用行動化開發架構
 
Real-world Dojo Mobile
Real-world Dojo MobileReal-world Dojo Mobile
Real-world Dojo Mobile
 
Dojo 1.7 mobile overview dojo conf 2011
Dojo 1.7 mobile overview  dojo conf 2011Dojo 1.7 mobile overview  dojo conf 2011
Dojo 1.7 mobile overview dojo conf 2011
 
Extending Spring MVC with Spring Mobile and JavaScript
Extending Spring MVC with Spring Mobile and JavaScriptExtending Spring MVC with Spring Mobile and JavaScript
Extending Spring MVC with Spring Mobile and JavaScript
 
Building Cross-Platform Mobile Apps
Building Cross-Platform Mobile AppsBuilding Cross-Platform Mobile Apps
Building Cross-Platform Mobile Apps
 
Complete Dojo
Complete DojoComplete Dojo
Complete Dojo
 
Dojo javascript toolkit
Dojo javascript toolkit Dojo javascript toolkit
Dojo javascript toolkit
 
[Devoxx Morocco 2015] Apache Cordova In Action
[Devoxx Morocco 2015] Apache Cordova In Action[Devoxx Morocco 2015] Apache Cordova In Action
[Devoxx Morocco 2015] Apache Cordova In Action
 
Phone gap
Phone gapPhone gap
Phone gap
 
Introduction phonegap
Introduction phonegapIntroduction phonegap
Introduction phonegap
 
Advanced programing in phonegap
Advanced programing in phonegapAdvanced programing in phonegap
Advanced programing in phonegap
 
[JavaLand 2015] Developing JavaScript Mobile Apps Using Apache Cordova
[JavaLand 2015] Developing JavaScript Mobile Apps Using Apache Cordova[JavaLand 2015] Developing JavaScript Mobile Apps Using Apache Cordova
[JavaLand 2015] Developing JavaScript Mobile Apps Using Apache Cordova
 
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile designDreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile design
 
Code and Conquer with Globe Labs, October 27, 2012
Code and Conquer with Globe Labs, October 27, 2012Code and Conquer with Globe Labs, October 27, 2012
Code and Conquer with Globe Labs, October 27, 2012
 
Apache Cordova In Action
Apache Cordova In ActionApache Cordova In Action
Apache Cordova In Action
 
Adf mobile overview
Adf mobile overviewAdf mobile overview
Adf mobile overview
 
Cross platform Web apps
Cross platform Web appsCross platform Web apps
Cross platform Web apps
 
Introducing J2ME Polish
Introducing J2ME PolishIntroducing J2ME Polish
Introducing J2ME Polish
 
Dojo tutorial
Dojo tutorialDojo tutorial
Dojo tutorial
 
phonegap with angular js for freshers
phonegap with angular js for freshers    phonegap with angular js for freshers
phonegap with angular js for freshers
 

Dernier

AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 

Dernier (20)

AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 

Dojo mobile web5-2013

  • 1. © 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
  • 2. © 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?
  • 3. © 2013 IBM Corporation3 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
  • 4. © 2013 IBM Corporation4 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
  • 5. © 2013 IBM Corporation5 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
  • 6. © 2013 IBM Corporation6 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
  • 7. © 2013 IBM Corporation7 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
  • 8. © 2013 IBM Corporation8 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
  • 9. © 2013 IBM Corporation9 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
  • 10. © 2013 IBM Corporation Building an App with Dojo Mobile Loading Dojo (< 4ko) <script type="text/javascript" src="path-to-dojo/dojo/dojo.js" data-dojo-config="parseOnLoad: true, async: true, mblAlwaysHideAddressBar: true"> </script>
  • 11. © 2013 IBM Corporation Building an App with Dojo Mobile Define 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. © 2013 IBM Corporation Building an App with Dojo Mobile 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"> <!-- here will go dynamically created list items for the various stocks to monitor --> </ul> </div>
  • 13. © 2013 IBM Corporation Building an App with Dojo Mobile 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"> <!-- 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. © 2013 IBM Corporation Building an App with Dojo Mobile The 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. © 2013 IBM Corporation Building an App with Dojo Mobile 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>
  • 16. © 2013 IBM Corporation Building an App with Dojo Mobile The history view <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>
  • 17. © 2013 IBM Corporation Building an App with Dojo Mobile 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"); } });
  • 18. © 2013 IBM Corporation Building an App with Dojo Mobile 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 }, // ... ]; } ); });
  • 19. © 2013 IBM Corporation Building an App with Dojo Mobile 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); });
  • 20. © 2013 IBM Corporation Building an App with Dojo Mobile 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 ] } ); });
  • 21. © 2013 IBM Corporation Building an App with Dojo Mobile 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);
  • 22. © 2013 IBM Corporation Building an App with Dojo Mobile Application 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 --> <link href="path-to-dojo/dojox/.../DomButtonBlueCircleArrow.css" rel="stylesheet"> <!-- application specific styles --> <link href="demo.css" rel="stylesheet">
  • 23. © 2013 IBM Corporation Building an App with Dojo Mobile 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
  • 24. © 2013 IBM Corporation24 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
  • 25. © 2013 IBM Corporation 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
  • 26. © 2013 IBM Corporation Leveraging Dojo Application Framework 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" } }
  • 27. © 2013 IBM Corporation Leveraging Dojo Application Framework  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
  • 28. © 2013 IBM Corporation28 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
  • 29. © 2013 IBM Corporation29 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…
  • 30. © 2013 IBM Corporation30 Questions? christophe.jolif@fr.ibm.com @cjolif