Suche senden
Hochladen
Dojo mobile web5-2013
•
1 gefällt mir
•
1,563 views
C
cjolif
Folgen
Technologie
Melden
Teilen
Melden
Teilen
1 von 30
Empfohlen
Enabling the mobile Web for a Dojo component
Enabling the mobile Web for a Dojo component
cjolif
Building Multi-Channel Data-Aware Applications
Building Multi-Channel Data-Aware Applications
cjolif
Creating Mobile Content Using Flash
Creating Mobile Content Using Flash
paultrani
Html5 investigation
Html5 investigation
oppokui
CEDEC2012 Starling 開発
CEDEC2012 Starling 開発
Andy Demo
Building solutions on the Microsoft platform that target iPhone, iPad, and An...
Building solutions on the Microsoft platform that target iPhone, iPad, and An...
Simon Guest
HTML5 로 iPhone App 만들기
HTML5 로 iPhone App 만들기
JungHyuk Kwon
Adobe AIR Mobile development for Android and PlayBook
Adobe AIR Mobile development for Android and PlayBook
Mihai Corlan
Empfohlen
Enabling the mobile Web for a Dojo component
Enabling the mobile Web for a Dojo component
cjolif
Building Multi-Channel Data-Aware Applications
Building Multi-Channel Data-Aware Applications
cjolif
Creating Mobile Content Using Flash
Creating Mobile Content Using Flash
paultrani
Html5 investigation
Html5 investigation
oppokui
CEDEC2012 Starling 開発
CEDEC2012 Starling 開発
Andy Demo
Building solutions on the Microsoft platform that target iPhone, iPad, and An...
Building solutions on the Microsoft platform that target iPhone, iPad, and An...
Simon Guest
HTML5 로 iPhone App 만들기
HTML5 로 iPhone App 만들기
JungHyuk Kwon
Adobe AIR Mobile development for Android and PlayBook
Adobe AIR Mobile development for Android and PlayBook
Mihai Corlan
Jax2010 adobe lcds
Jax2010 adobe lcds
Michael Chaize
Portlet factory 101
Portlet factory 101
Phillip de Ridder
Open social gadgets in ibm connections
Open social gadgets in ibm connections
Vincent Burckhardt
Flex mobile for JUG
Flex mobile for JUG
Michael Chaize
Introduction to j query mobile framework
Introduction to j query mobile framework
Shreerang Patwardhan
Ria2010 workshop dev mobile
Ria2010 workshop dev mobile
Michael Chaize
Fatc - Productivity by Design
Fatc - Productivity by Design
Michael Chaize
JAX2010 Flex Java technical session: interactive dashboard
JAX2010 Flex Java technical session: interactive dashboard
Michael Chaize
Jax2001 adobe keynote
Jax2001 adobe keynote
Michael Chaize
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 java
Michael Chaize
Ria2010 - keynote - Evolution des RIA d'Entreprise
Ria2010 - keynote - Evolution des RIA d'Entreprise
Michael Chaize
QUAL360 Survelytics Mobile User Guide
QUAL360 Survelytics Mobile User Guide
ekiglobal
Best practices for Flash applications on mobile devices
Best practices for Flash applications on mobile devices
Michael Chaize
Adobe flex at jax london 2011
Adobe flex at jax london 2011
Michael Chaize
Oop2012 mobile workshops
Oop2012 mobile workshops
Michael Chaize
Triffort - iOS Application Portfolio
Triffort - iOS Application Portfolio
Mohd Azam
Over the air 2.5 - Adobe AIR for Android
Over the air 2.5 - Adobe AIR for Android
Michael Chaize
Xplatform mobile development
Xplatform mobile development
Michael Chaize
Design Pattern presentation
Design Pattern presentation
hoanhtran
Rich internet application development using the dojo toolkit
Rich internet application development using the dojo toolkit
alexklaeser
Introduction To Dojo
Introduction To Dojo
yoavrubin
Weitere ähnliche Inhalte
Was ist angesagt?
Jax2010 adobe lcds
Jax2010 adobe lcds
Michael Chaize
Portlet factory 101
Portlet factory 101
Phillip de Ridder
Open social gadgets in ibm connections
Open social gadgets in ibm connections
Vincent Burckhardt
Flex mobile for JUG
Flex mobile for JUG
Michael Chaize
Introduction to j query mobile framework
Introduction to j query mobile framework
Shreerang Patwardhan
Ria2010 workshop dev mobile
Ria2010 workshop dev mobile
Michael Chaize
Fatc - Productivity by Design
Fatc - Productivity by Design
Michael Chaize
JAX2010 Flex Java technical session: interactive dashboard
JAX2010 Flex Java technical session: interactive dashboard
Michael Chaize
Jax2001 adobe keynote
Jax2001 adobe keynote
Michael Chaize
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 java
Michael Chaize
Ria2010 - keynote - Evolution des RIA d'Entreprise
Ria2010 - keynote - Evolution des RIA d'Entreprise
Michael Chaize
QUAL360 Survelytics Mobile User Guide
QUAL360 Survelytics Mobile User Guide
ekiglobal
Best practices for Flash applications on mobile devices
Best practices for Flash applications on mobile devices
Michael Chaize
Adobe flex at jax london 2011
Adobe flex at jax london 2011
Michael Chaize
Oop2012 mobile workshops
Oop2012 mobile workshops
Michael Chaize
Triffort - iOS Application Portfolio
Triffort - iOS Application Portfolio
Mohd Azam
Over the air 2.5 - Adobe AIR for Android
Over the air 2.5 - Adobe AIR for Android
Michael Chaize
Xplatform mobile development
Xplatform mobile development
Michael Chaize
Was ist angesagt?
(19)
Jax2010 adobe lcds
Jax2010 adobe lcds
Portlet factory 101
Portlet factory 101
Open social gadgets in ibm connections
Open social gadgets in ibm connections
Flex mobile for JUG
Flex mobile for JUG
Introduction to j query mobile framework
Introduction to j query mobile framework
Ria2010 workshop dev mobile
Ria2010 workshop dev mobile
Fatc - Productivity by Design
Fatc - Productivity by Design
JAX2010 Flex Java technical session: interactive dashboard
JAX2010 Flex Java technical session: interactive dashboard
Jax2001 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...
Adobe flash platform java
Adobe flash platform java
Ria2010 - keynote - Evolution des RIA d'Entreprise
Ria2010 - keynote - Evolution des RIA d'Entreprise
QUAL360 Survelytics Mobile User Guide
QUAL360 Survelytics Mobile User Guide
Best 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 2011
Oop2012 mobile workshops
Oop2012 mobile workshops
Triffort - iOS Application Portfolio
Triffort - iOS Application Portfolio
Over the air 2.5 - Adobe AIR for Android
Over the air 2.5 - Adobe AIR for Android
Xplatform mobile development
Xplatform mobile development
Andere mochten auch
Design Pattern presentation
Design Pattern presentation
hoanhtran
Rich internet application development using the dojo toolkit
Rich internet application development using the dojo toolkit
alexklaeser
Introduction To Dojo
Introduction To Dojo
yoavrubin
Angularjs vs Dojo toolkit | SuperSpeaker@CodeCamp Iasi 2014
Angularjs vs Dojo toolkit | SuperSpeaker@CodeCamp Iasi 2014
Endava
Solution Architect CV
Solution Architect CV
Manikandan Natarajan
The Dojo Toolkit An Introduction
The Dojo Toolkit An Introduction
Jeff Fox
Andere mochten auch
(6)
Design Pattern presentation
Design Pattern presentation
Rich internet application development using the dojo toolkit
Rich internet application development using the dojo toolkit
Introduction To Dojo
Introduction To Dojo
Angularjs vs Dojo toolkit | SuperSpeaker@CodeCamp Iasi 2014
Angularjs vs Dojo toolkit | SuperSpeaker@CodeCamp Iasi 2014
Solution Architect CV
Solution Architect CV
The Dojo Toolkit An Introduction
The Dojo Toolkit An Introduction
Ähnlich wie Dojo mobile web5-2013
企業應用行動化開發架構
企業應用行動化開發架構
湯米吳 Tommy Wu
Real-world Dojo Mobile
Real-world Dojo Mobile
Andrew Ferrier
Dojo 1.7 mobile overview dojo conf 2011
Dojo 1.7 mobile overview dojo conf 2011
ccmitchellusa
Extending Spring MVC with Spring Mobile and JavaScript
Extending Spring MVC with Spring Mobile and JavaScript
Roy Clarkson
Building Cross-Platform Mobile Apps
Building Cross-Platform Mobile Apps
Troy Miles
Complete Dojo
Complete Dojo
Girish Srivastava
Dojo javascript toolkit
Dojo javascript toolkit
Predhin Sapru
[Devoxx Morocco 2015] Apache Cordova In Action
[Devoxx Morocco 2015] Apache Cordova In Action
Hazem Saleh
Phone gap
Phone gap
Sureshreddy Nalimela
Introduction phonegap
Introduction phonegap
Rakesh Jha
Advanced programing in phonegap
Advanced programing in phonegap
Rakesh Jha
[JavaLand 2015] Developing JavaScript Mobile Apps Using Apache Cordova
[JavaLand 2015] Developing JavaScript Mobile Apps Using Apache Cordova
Hazem Saleh
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dee Sadler
Code and Conquer with Globe Labs, October 27, 2012
Code and Conquer with Globe Labs, October 27, 2012
jobandesther
Apache Cordova In Action
Apache Cordova In Action
Hazem Saleh
Adf mobile overview
Adf mobile overview
Oracle Corporation
Cross platform Web apps
Cross platform Web apps
ShaikSannu
Introducing J2ME Polish
Introducing J2ME Polish
Adam Cohen-Rose
Dojo tutorial
Dojo tutorial
Girish Srivastava
phonegap with angular js for freshers
phonegap with angular js for freshers
dssprakash
Ähnlich wie Dojo mobile web5-2013
(20)
企業應用行動化開發架構
企業應用行動化開發架構
Real-world Dojo Mobile
Real-world Dojo Mobile
Dojo 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 JavaScript
Building Cross-Platform Mobile Apps
Building Cross-Platform Mobile Apps
Complete Dojo
Complete Dojo
Dojo javascript toolkit
Dojo javascript toolkit
[Devoxx Morocco 2015] Apache Cordova In Action
[Devoxx Morocco 2015] Apache Cordova In Action
Phone gap
Phone gap
Introduction phonegap
Introduction phonegap
Advanced 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
Dreamweaver 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, 2012
Apache Cordova In Action
Apache Cordova In Action
Adf mobile overview
Adf mobile overview
Cross platform Web apps
Cross platform Web apps
Introducing J2ME Polish
Introducing J2ME Polish
Dojo tutorial
Dojo tutorial
phonegap with angular js for freshers
phonegap with angular js for freshers
Kürzlich hochgeladen
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
Rafal Los
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Miguel Araújo
Slack Application Development 101 Slides
Slack Application Development 101 Slides
praypatel2
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
Michael W. Hawkins
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
Enterprise Knowledge
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
Safe Software
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Igalia
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
wesley chun
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
Enterprise Knowledge
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
Martijn de Jong
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
Delhi Call girls
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
apidays
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
Delhi Call girls
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
Results
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Principled Technologies
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
sudhanshuwaghmare1
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
Anna Loughnan Colquhoun
How to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
naman860154
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
Khem
Kürzlich hochgeladen
(20)
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Slack Application Development 101 Slides
Slack Application Development 101 Slides
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
How to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
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