SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
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
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
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.
<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.
<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.
The ideal world Existing Application Define functionality for AIR Deliver
5.
The real world Existing Application Rewrite, disassemble, cleanup Test, bugfix Deliver? Define functionality for AIR
6.
Is there a solution? Dojo Toolkit Module based Ready for AIR Feature rich Deliver Fast Adobe AIR
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
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.
<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
12.
<ul><li>Connecting to sockets </li></ul><ul><li>this.socket = new air.Socket("localhost", 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, "connected"));this.eventIO = this.socket.addEventListener(air.IOErrorEvent.IO_ERROR, </li></ul><ul><li>dojo.hitch(this, "disconnect")); </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, "handleData")); </li></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><li>} </li></ul>Sockets (Socket.js)
13.
<ul><li>Accessing local files </li></ul><ul><li>this.docsDir = air.File.desktopDirectory.resolvePath("xRay session.xry");this.docsDir.browseForSave(this.messages.saveAs); </li></ul><ul><li>this.docsDir.addEventListener(air.Event.SELECT, dojo.hitch(this, "_writeData", 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, "_writeData", 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.
<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)
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