• Save
Dojo and Adobe AIR
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Dojo and Adobe AIR

  • 7,002 views
Uploaded 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......

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
7,002
On Slideshare
6,948
From Embeds
54
Number of Embeds
6

Actions

Shares
Downloads
0
Comments
0
Likes
6

Embeds 54

http://blog.uxebu.com 22
http://uxebu.com 17
http://www.slideshare.net 10
http://hub.uxebu.com 2
http://www.uxebu.com 2
http://www.linkedin.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Dojo and Adobe AIR
    • Nikolai Onken, CEO uxebu Ltd.
    • nikolai@uxebu.com - http://twitter.com/nonken
  • 2.
    • Me
    • Nikolai Onken
    • uxebu Ltd.
    • Dojo community evangelist, committer
    • DojoCampus.org
    • Do you know this?
    • Browser fights
    • Sleeples nights
    • Endless cursing about IE6
    • Wrestling with the floats
    Welcome
  • 3.
    • Adobe AIR
      • Introduction
      • Benefits
    • Dojo Toolkit
      • Introduction
      • Benefits
    • Hands on
      • xRay, from web to AIR
    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.
    • Features
    • Webkit
    • Offline apps
    • SQL Lite
    • Flash, e.g. sockets, etc.
    • DND
    • Access to filesystem
    Adobe AIR AIR Runtime
  • 8.
    • The core
    • Client-side developers toolbox
    • Helper functions
    • OO
    • The UI library
    • Layout
    • Forms
    • Widgets
    • Dojos Las Vegas (c) Tom Trenka
    • Charting
    • Grid
    • Cometd
    The Dojo Toolkit Dojo Dijit Dojox
  • 9.
    • What do we have?
      • Performance reports online
      • Data API
      • Charting API
      • What do we want?
      • Performance reports live and offline
      • Interactivity
      • Saveable sessions
      • Screenshots, multimedia features
    Hands on - the analysis
  • 10.
    • Adobe AIR
      • Sockets
      • File storage
      • SQL Lite
      • DND
      • Autoupdate
      • Screenshots
      • Dojo
      • dojo.declare
      • dojo.publish/subscribe
      • dojox.grid
      • dojox.charting
      • dijit.layout
      • i18n
      • themeing
    Hands on - ingredients
  • 11. Adobe AIR
    • introduction
  • 12.
    • Connecting to sockets
    • this.socket = new air.Socket("localhost", 56789);
    • // add listeners for success and failurethis.eventConnect = this.socket.addEventListener(air.Event.CONNECT,
    • dojo.hitch(this, "connected"));this.eventIO = this.socket.addEventListener(air.IOErrorEvent.IO_ERROR,
    • dojo.hitch(this, "disconnect"));
    • connected: function(){
    • // on socket connection, connect to data event and handle data
      • this.eventData = this.socket.addEventListener(air.ProgressEvent.SOCKET_DATA,
      • dojo.hitch(this, "handleData"));
        • }
    • }
    Sockets (Socket.js)
  • 13.
    • Accessing local files
    • this.docsDir = air.File.desktopDirectory.resolvePath("xRay session.xry");this.docsDir.browseForSave(this.messages.saveAs);
    • this.docsDir.addEventListener(air.Event.SELECT, dojo.hitch(this, "_writeData", formData));
    • writeData: function(formData, e){
      • // on select we write data
      • this.docsDir.removeEventListener(air.Event.SELECT, dojo.hitch(this, "_writeData", formData));// create new file objectvar file = air.File(e.target);
      • // 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();
    • }
    File storage (DataStore.js - 165)
  • 14.
    • Working with SQLLite
    • // connect to SQLLitethis.conn = new air.SQLConnection();
    • // event handlingthis.conn.addEventListener(air.SQLEvent.OPEN, function(e){d.callback(e);});
      • 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);
    • 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);
    • 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);
      • 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);
    • 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);
    SQL Lite (DataStore.js - 97)
  • 15. AIR and DND dojo.connect(this.dropContainer, "dragenter", this, function(e){e.dataTransfer.effectAllowed = "copy";e.preventDefault(); }); dojo.connect(this.dropContainer, "dragover", this, function(e){e.preventDefault();}); dojo.connect(this.dropContainer, "dragleave", this, function(e){e.preventDefault();}); dojo.connect(this.dropContainer, "drop", this, function(e){ e.preventDefault(); }); }); }); }); }); }); }); }); DND (DropTarget.js)
  • 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. Taking pictures // write image datavar rect = dojo.coords(dojo.byId("mainGraphContent")); 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. The Dojo Toolkit
    • introduction
  • 19.
    • Creating classes
    • dojo.declare(“uxebu.chart”,
    • null,
    • {
      • constructor: function(){
        • this.size = {h: 200, w: 500};
      • },
      • init: function(){
        • this.render();
      • }
      • render: function(size){
        • console.log(size);
      • }
    • });
    • >>> var chart = new uxebu.chart();
    • >>> chart.init();
    • [Object]
    dojo.declare
  • 20.
    • Event handling
    • dojo.connect(node, “onclick”, function(e){
    • console.log(e.target);
    • })
    • dojo.connect(obj, “method”, function(e){
      • console.log(e);
    • });
    • Decoupling modules
    • function loadChart(time){
    • dojo.publish(“uxebu/load”, [time]);
    • }
    • dojo.subscribe(“uxebu/load”, function(time){
    • console.dir(time);
    • });
    publish/subscribe, connect/disconnect
  • 21.
    • JavaScript
    • // create grid to display datathis.sessionStore = new dojo.data.ItemFileWriteStore({id: "sessionStore", data: {identifier: 'id', items: []}});var layout = [[{name: this.messages.gridId, field: 'id', width: "5%"},{name: this.messages.gridAuthor, field: 'author', width: "25%"},{name: this.messages.gridComment, field: 'comment', width: "auto"},{name: this.messages.gridCreated, field: 'created', width: "25%"},{name: this.messages.gridEdit, field: 'edit', width: "110px"}]]; this.grid = new xray.Grid({title: "History", store: this.sessionStore, structure: layout, rowsPerPage: 10, id: "sessionGrid"}, dojo.doc.createElement("div"));
      • dijit.byId("mainTabs").addChild(this.grid);this.grid.startup();
    • HTML
    • function loadChart(time){
    • dojo.publish(“uxebu/load”, [time]);
    • }
    • dojo.subscribe(“uxebu/load”, function(time){
    • console.dir(time);
    • });
    • });
    • });
    dojox.grid
  • 22. JavaScript this.chart = new dojox.charting.Chart2D("mainGraphContent"); this.chart.setTheme(dojox.charting.themes.ET.greys); this.chart.addAxis("x", { fixLower:"minor", natural:true, min:1, max:this.CHART_WIDTH, majorTickStep: 10, minorTickStep: 1 }); this.chart.addAxis("y", {vertical: true, min: 0, max: 500, majorTickStep: 50, minorTickStep: 10}); this.chart.addPlot("default", {type: "Lines"}); this.chart.addSeries("memory", s[this.MEM_SERIES], {stroke:{width:2, color:"#73d9ef"}}); this.chart.render(); dojox.charting
  • 23.
    • HTML
    • <div dojoType=”dijit.layout.BorderContainer” style=”width: 100%; height: 100%”>
    • <div dojoType=”dijit.layout.TabContainer” region=”center” style=”width: 75%”>
      • <div dojoType=”dijit.layout.ContentPane” title=”Main”>
        • Content
      • </div>
    • </div>
    • <div dojoType=”dijit.layout.TabContainer” region=”right”>
      • <div dojoType=”dijit.layout.ContentPane” title=”Stats”>
        • Content
      • </div>
    • </div>
    • </div>
    dijit.layout
  • 24.
    • Dojo Themes
    • Tundra, Soria, Nihilo
    • a11y!!!
    • Customisation is simple!
    • .dijitBorderContainer {
    • background: #333;
    • }
    • .dijitTabContainer {
    • border: none;
    • }
    Themeing
  • 25.
    • Internationalisation
    • Build in
    • Fallback mechanism
    i18n
  • 26. See xRay in action
  • 27. Thank you!
    • http://www.uxebu.com
    • nikolai@uxebu.com - http://twitter.com/nonken