Dojo and Adobe AIR <ul><li>Nikolai Onken, CEO uxebu Ltd. </li></ul><ul><li>nikolai@uxebu.com - http://twitter.com/nonken <...
<ul><li>Me </li></ul><ul><li>Nikolai Onken </li></ul><ul><li>uxebu Ltd. </li></ul><ul><li>Dojo community evangelist, commi...
<ul><li>Adobe AIR </li></ul><ul><ul><li>Introduction </li></ul></ul><ul><ul><li>Benefits </li></ul></ul><ul><li>Dojo Toolk...
The  ideal  world Existing Application Define functionality for AIR Deliver
The  real  world Existing Application Rewrite, disassemble, cleanup Test, bugfix Deliver? Define functionality for AIR
Is there a solution? Dojo Toolkit Module based Ready for AIR Feature rich Deliver Fast Adobe AIR
<ul><li>Features </li></ul><ul><li>Webkit </li></ul><ul><li>Offline apps </li></ul><ul><li>SQL Lite </li></ul><ul><li>Flas...
<ul><li>The core </li></ul><ul><li>Client-side developers toolbox </li></ul><ul><li>Helper functions </li></ul><ul><li>OO ...
<ul><li>What do we have? </li></ul><ul><ul><li>Performance reports online </li></ul></ul><ul><ul><li>Data API </li></ul></...
<ul><li>Adobe AIR </li></ul><ul><ul><li>Sockets </li></ul></ul><ul><ul><li>File storage </li></ul></ul><ul><ul><li>SQL Lit...
Adobe AIR <ul><li>introduction </li></ul>
<ul><li>Connecting to sockets </li></ul><ul><li>this.socket = new air.Socket(&quot;localhost&quot;, 56789); </li></ul><ul>...
<ul><li>Accessing local files </li></ul><ul><li>this.docsDir = air.File.desktopDirectory.resolvePath(&quot;xRay session.xr...
<ul><li>Working with SQLLite </li></ul><ul><li>// connect to SQLLitethis.conn = new air.SQLConnection();  </li></ul><ul><l...
AIR and DND dojo.connect(this.dropContainer, &quot;dragenter&quot;, this, function(e){e.dataTransfer.effectAllowed = &quot...
Keeping your application up to date this.updReq = new air.URLRequest(this.updateUrl);this.updStream = new air.URLStream();...
Taking pictures // write image datavar rect = dojo.coords(dojo.byId(&quot;mainGraphContent&quot;)); var bmp = new air.Bitm...
The Dojo Toolkit <ul><li>introduction </li></ul>
<ul><li>Creating classes </li></ul><ul><li>dojo.declare(“uxebu.chart”,  </li></ul><ul><li>null,  </li></ul><ul><li>{ </li>...
<ul><li>Event handling </li></ul><ul><li>dojo.connect(node, “onclick”, function(e){ </li></ul><ul><li>console.log(e.target...
<ul><li>JavaScript </li></ul><ul><li>// create grid to display datathis.sessionStore = new dojo.data.ItemFileWriteStore({i...
JavaScript this.chart = new dojox.charting.Chart2D(&quot;mainGraphContent&quot;); this.chart.setTheme(dojox.charting.theme...
<ul><li>HTML </li></ul><ul><li><div dojoType=”dijit.layout.BorderContainer” style=”width: 100%; height: 100%”> </li></ul><...
<ul><li>Dojo Themes </li></ul><ul><li>Tundra, Soria, Nihilo </li></ul><ul><li>a11y!!! </li></ul><ul><li>Customisation is s...
<ul><li>Internationalisation </li></ul><ul><li>Build in </li></ul><ul><li>Fallback mechanism </li></ul>i18n
See xRay in action
Thank you! <ul><li>http://www.uxebu.com </li></ul><ul><li>nikolai@uxebu.com - http://twitter.com/nonken </li></ul>
Upcoming SlideShare
Loading in...5
×

Dojo and Adobe AIR

4,097

Published on

In this talk I demonstrated how easy Dojo is integrating into the Adobe AIR runtime. Using a performance analysis tool I demonstrated how to use charting, grids and other features of Adobe AIR and the Dojo Toolkit

Published in: Technology, Art & Photos
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,097
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Transcript of "Dojo and Adobe AIR"

  1. 1. Dojo and Adobe AIR <ul><li>Nikolai Onken, CEO uxebu Ltd. </li></ul><ul><li>nikolai@uxebu.com - http://twitter.com/nonken </li></ul>
  2. 2. <ul><li>Me </li></ul><ul><li>Nikolai Onken </li></ul><ul><li>uxebu Ltd. </li></ul><ul><li>Dojo community evangelist, committer </li></ul><ul><li>DojoCampus.org </li></ul><ul><li>Do you know this? </li></ul><ul><li>Browser fights </li></ul><ul><li>Sleeples nights </li></ul><ul><li>Endless cursing about IE6 </li></ul><ul><li>Wrestling with the floats </li></ul>Welcome
  3. 3. <ul><li>Adobe AIR </li></ul><ul><ul><li>Introduction </li></ul></ul><ul><ul><li>Benefits </li></ul></ul><ul><li>Dojo Toolkit </li></ul><ul><ul><li>Introduction </li></ul></ul><ul><ul><li>Benefits </li></ul></ul><ul><li>Hands on </li></ul><ul><ul><li>xRay, from web to AIR </li></ul></ul>What are we going to do today?
  4. 4. The ideal world Existing Application Define functionality for AIR Deliver
  5. 5. The real world Existing Application Rewrite, disassemble, cleanup Test, bugfix Deliver? Define functionality for AIR
  6. 6. Is there a solution? Dojo Toolkit Module based Ready for AIR Feature rich Deliver Fast Adobe AIR
  7. 7. <ul><li>Features </li></ul><ul><li>Webkit </li></ul><ul><li>Offline apps </li></ul><ul><li>SQL Lite </li></ul><ul><li>Flash, e.g. sockets, etc. </li></ul><ul><li>DND </li></ul><ul><li>Access to filesystem </li></ul>Adobe AIR AIR Runtime
  8. 8. <ul><li>The core </li></ul><ul><li>Client-side developers toolbox </li></ul><ul><li>Helper functions </li></ul><ul><li>OO </li></ul><ul><li>The UI library </li></ul><ul><li>Layout </li></ul><ul><li>Forms </li></ul><ul><li>Widgets </li></ul><ul><li>Dojos Las Vegas (c) Tom Trenka </li></ul><ul><li>Charting </li></ul><ul><li>Grid </li></ul><ul><li>Cometd </li></ul>The Dojo Toolkit Dojo Dijit Dojox
  9. 9. <ul><li>What do we have? </li></ul><ul><ul><li>Performance reports online </li></ul></ul><ul><ul><li>Data API </li></ul></ul><ul><ul><li>Charting API </li></ul></ul><ul><ul><li>What do we want? </li></ul></ul><ul><ul><li>Performance reports live and offline </li></ul></ul><ul><ul><li>Interactivity </li></ul></ul><ul><ul><li>Saveable sessions </li></ul></ul><ul><ul><li>Screenshots, multimedia features </li></ul></ul>Hands on - the analysis
  10. 10. <ul><li>Adobe AIR </li></ul><ul><ul><li>Sockets </li></ul></ul><ul><ul><li>File storage </li></ul></ul><ul><ul><li>SQL Lite </li></ul></ul><ul><ul><li>DND </li></ul></ul><ul><ul><li>Autoupdate </li></ul></ul><ul><ul><li>Screenshots </li></ul></ul><ul><ul><li>Dojo </li></ul></ul><ul><ul><li>dojo.declare </li></ul></ul><ul><ul><li>dojo.publish/subscribe </li></ul></ul><ul><ul><li>dojox.grid </li></ul></ul><ul><ul><li>dojox.charting </li></ul></ul><ul><ul><li>dijit.layout </li></ul></ul><ul><ul><li>i18n </li></ul></ul><ul><ul><li>themeing </li></ul></ul>Hands on - ingredients
  11. 11. Adobe AIR <ul><li>introduction </li></ul>
  12. 12. <ul><li>Connecting to sockets </li></ul><ul><li>this.socket = new air.Socket(&quot;localhost&quot;, 56789); </li></ul><ul><li>// add listeners for success and failurethis.eventConnect = this.socket.addEventListener(air.Event.CONNECT, </li></ul><ul><li>dojo.hitch(this, &quot;connected&quot;));this.eventIO = this.socket.addEventListener(air.IOErrorEvent.IO_ERROR, </li></ul><ul><li>dojo.hitch(this, &quot;disconnect&quot;)); </li></ul><ul><li>connected: function(){ </li></ul><ul><li>// on socket connection, connect to data event and handle data </li></ul><ul><ul><li>this.eventData = this.socket.addEventListener(air.ProgressEvent.SOCKET_DATA, </li></ul></ul><ul><ul><li>dojo.hitch(this, &quot;handleData&quot;)); </li></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><li>} </li></ul>Sockets (Socket.js)
  13. 13. <ul><li>Accessing local files </li></ul><ul><li>this.docsDir = air.File.desktopDirectory.resolvePath(&quot;xRay session.xry&quot;);this.docsDir.browseForSave(this.messages.saveAs); </li></ul><ul><li>this.docsDir.addEventListener(air.Event.SELECT, dojo.hitch(this, &quot;_writeData&quot;, formData)); </li></ul><ul><li>writeData: function(formData, e){ </li></ul><ul><ul><li>// on select we write data </li></ul></ul><ul><ul><li>this.docsDir.removeEventListener(air.Event.SELECT, dojo.hitch(this, &quot;_writeData&quot;, formData));// create new file objectvar file = air.File(e.target); </li></ul></ul><ul><ul><li>// save to streamvar stream = new air.FileStream();stream.open( file, air.FileMode.WRITE );stream.writeMultiByte( dojo.toJson(this._createData(formData)), air.File.systemCharset );stream.close(); </li></ul></ul><ul><li>} </li></ul>File storage (DataStore.js - 165)
  14. 14. <ul><li>Working with SQLLite </li></ul><ul><li>// connect to SQLLitethis.conn = new air.SQLConnection(); </li></ul><ul><li>// event handlingthis.conn.addEventListener(air.SQLEvent.OPEN, function(e){d.callback(e);}); </li></ul><ul><ul><li>this.conn.addEventListener(air.SQLErrorEvent.ERROR, function(e){d.errback(e);}); // reference to db file, if not available it will be created automaticallyvar dbFile = air.File.applicationStorageDirectory.resolvePath(this.sqlLiteDb); this.conn.openAsync(dbFile); </li></ul></ul><ul><li>this.conn.addEventListener(air.SQLErrorEvent.ERROR, function(e){d.errback(e);}); // reference to db file, if not available it will be created automaticallyvar dbFile = air.File.applicationStorageDirectory.resolvePath(this.sqlLiteDb); this.conn.openAsync(dbFile); </li></ul><ul><li>this.conn.addEventListener(air.SQLErrorEvent.ERROR, function(e){d.errback(e);}); // reference to db file, if not available it will be created automaticallyvar dbFile = air.File.applicationStorageDirectory.resolvePath(this.sqlLiteDb); this.conn.openAsync(dbFile); </li></ul><ul><ul><li>this.conn.addEventListener(air.SQLErrorEvent.ERROR, function(e){d.errback(e);}); // reference to db file, if not available it will be created automaticallyvar dbFile = air.File.applicationStorageDirectory.resolvePath(this.sqlLiteDb); this.conn.openAsync(dbFile); </li></ul></ul><ul><li>this.conn.addEventListener(air.SQLErrorEvent.ERROR, function(e){d.errback(e);}); // reference to db file, if not available it will be created automaticallyvar dbFile = air.File.applicationStorageDirectory.resolvePath(this.sqlLiteDb); this.conn.openAsync(dbFile); </li></ul>SQL Lite (DataStore.js - 97)
  15. 15. AIR and DND dojo.connect(this.dropContainer, &quot;dragenter&quot;, this, function(e){e.dataTransfer.effectAllowed = &quot;copy&quot;;e.preventDefault(); }); dojo.connect(this.dropContainer, &quot;dragover&quot;, this, function(e){e.preventDefault();}); dojo.connect(this.dropContainer, &quot;dragleave&quot;, this, function(e){e.preventDefault();}); dojo.connect(this.dropContainer, &quot;drop&quot;, this, function(e){ e.preventDefault(); }); }); }); }); }); }); }); }); DND (DropTarget.js)
  16. 16. Keeping your application up to date this.updReq = new air.URLRequest(this.updateUrl);this.updStream = new air.URLStream();this.updData = new air.ByteArray(); this.updStream.addEventListener(air.Event.COMPLETE, dojo.hitch(this, function(){this.updStream.readBytes(this.updData, 0, this.updStream.bytesAvailable); var data = dojo.fromJson(this.updData);})); this.updStream.load(this.updReq); // run the update var updater = new air.Updater();var version = this.updateVersion;updater.update(this.file, this.updateVersion); var updater = new air.Updater();var version = this.updateVersion;updater.update(this.file, this.updateVersion); var updater = new air.Updater();var version = this.updateVersion;updater.update(this.file, this.updateVersion); var updater = new air.Updater();var version = this.updateVersion;updater.update(this.file, this.updateVersion); var updater = new air.Updater();var version = this.updateVersion;updater.update(this.file, this.updateVersion); Autoupdate
  17. 17. Taking pictures // write image datavar rect = dojo.coords(dojo.byId(&quot;mainGraphContent&quot;)); var bmp = new air.BitmapData( rect.w - 2, rect.h - 2 );var matrix = new air.Matrix();matrix.translate( 0 - ( rect.x + 1 ), 0 - ( rect.y + 1 ) ); bmp.draw( window.htmlLoader, matrix ); this.png = runtime.com.adobe.images.PNGEncoder.encode( bmp ); Screenshots
  18. 18. The Dojo Toolkit <ul><li>introduction </li></ul>
  19. 19. <ul><li>Creating classes </li></ul><ul><li>dojo.declare(“uxebu.chart”, </li></ul><ul><li>null, </li></ul><ul><li>{ </li></ul><ul><ul><li>constructor: function(){ </li></ul></ul><ul><ul><ul><li>this.size = {h: 200, w: 500}; </li></ul></ul></ul><ul><ul><li>}, </li></ul></ul><ul><ul><li>init: function(){ </li></ul></ul><ul><ul><ul><li>this.render(); </li></ul></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>render: function(size){ </li></ul></ul><ul><ul><ul><li>console.log(size); </li></ul></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>}); </li></ul><ul><li>>>> var chart = new uxebu.chart(); </li></ul><ul><li>>>> chart.init(); </li></ul><ul><li>[Object] </li></ul>dojo.declare
  20. 20. <ul><li>Event handling </li></ul><ul><li>dojo.connect(node, “onclick”, function(e){ </li></ul><ul><li>console.log(e.target); </li></ul><ul><li>}) </li></ul><ul><li>dojo.connect(obj, “method”, function(e){ </li></ul><ul><ul><li>console.log(e); </li></ul></ul><ul><li>}); </li></ul><ul><li>Decoupling modules </li></ul><ul><li>function loadChart(time){ </li></ul><ul><li>dojo.publish(“uxebu/load”, [time]); </li></ul><ul><li>} </li></ul><ul><li>dojo.subscribe(“uxebu/load”, function(time){ </li></ul><ul><li>console.dir(time); </li></ul><ul><li>}); </li></ul>publish/subscribe, connect/disconnect
  21. 21. <ul><li>JavaScript </li></ul><ul><li>// create grid to display datathis.sessionStore = new dojo.data.ItemFileWriteStore({id: &quot;sessionStore&quot;, data: {identifier: 'id', items: []}});var layout = [[{name: this.messages.gridId, field: 'id', width: &quot;5%&quot;},{name: this.messages.gridAuthor, field: 'author', width: &quot;25%&quot;},{name: this.messages.gridComment, field: 'comment', width: &quot;auto&quot;},{name: this.messages.gridCreated, field: 'created', width: &quot;25%&quot;},{name: this.messages.gridEdit, field: 'edit', width: &quot;110px&quot;}]]; this.grid = new xray.Grid({title: &quot;History&quot;, store: this.sessionStore, structure: layout, rowsPerPage: 10, id: &quot;sessionGrid&quot;}, dojo.doc.createElement(&quot;div&quot;)); </li></ul><ul><ul><li>dijit.byId(&quot;mainTabs&quot;).addChild(this.grid);this.grid.startup(); </li></ul></ul><ul><li>HTML </li></ul><ul><li>function loadChart(time){ </li></ul><ul><li>dojo.publish(“uxebu/load”, [time]); </li></ul><ul><li>} </li></ul><ul><li>dojo.subscribe(“uxebu/load”, function(time){ </li></ul><ul><li>console.dir(time); </li></ul><ul><li>}); </li></ul><ul><li>}); </li></ul><ul><li>}); </li></ul>dojox.grid
  22. 22. JavaScript this.chart = new dojox.charting.Chart2D(&quot;mainGraphContent&quot;); this.chart.setTheme(dojox.charting.themes.ET.greys); this.chart.addAxis(&quot;x&quot;, { fixLower:&quot;minor&quot;, natural:true, min:1, max:this.CHART_WIDTH, majorTickStep: 10, minorTickStep: 1 }); this.chart.addAxis(&quot;y&quot;, {vertical: true, min: 0, max: 500, majorTickStep: 50, minorTickStep: 10}); this.chart.addPlot(&quot;default&quot;, {type: &quot;Lines&quot;}); this.chart.addSeries(&quot;memory&quot;, s[this.MEM_SERIES], {stroke:{width:2, color:&quot;#73d9ef&quot;}}); this.chart.render(); dojox.charting
  23. 23. <ul><li>HTML </li></ul><ul><li><div dojoType=”dijit.layout.BorderContainer” style=”width: 100%; height: 100%”> </li></ul><ul><li><div dojoType=”dijit.layout.TabContainer” region=”center” style=”width: 75%”> </li></ul><ul><ul><li><div dojoType=”dijit.layout.ContentPane” title=”Main”> </li></ul></ul><ul><ul><ul><li>Content </li></ul></ul></ul><ul><ul><li></div> </li></ul></ul><ul><li></div> </li></ul><ul><li><div dojoType=”dijit.layout.TabContainer” region=”right”> </li></ul><ul><ul><li><div dojoType=”dijit.layout.ContentPane” title=”Stats”> </li></ul></ul><ul><ul><ul><li>Content </li></ul></ul></ul><ul><ul><li></div> </li></ul></ul><ul><li></div> </li></ul><ul><li></div> </li></ul>dijit.layout
  24. 24. <ul><li>Dojo Themes </li></ul><ul><li>Tundra, Soria, Nihilo </li></ul><ul><li>a11y!!! </li></ul><ul><li>Customisation is simple! </li></ul><ul><li>.dijitBorderContainer { </li></ul><ul><li>background: #333; </li></ul><ul><li>} </li></ul><ul><li>.dijitTabContainer { </li></ul><ul><li>border: none; </li></ul><ul><li>} </li></ul>Themeing
  25. 25. <ul><li>Internationalisation </li></ul><ul><li>Build in </li></ul><ul><li>Fallback mechanism </li></ul>i18n
  26. 26. See xRay in action
  27. 27. Thank you! <ul><li>http://www.uxebu.com </li></ul><ul><li>nikolai@uxebu.com - http://twitter.com/nonken </li></ul>

×