Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Andre Charland  (andre@nitobi.com),  Alexei White  (alexei.white@nitobi.com) Nitobi Software, ltd. ENTERPRISE AIR  FOR JAV...
Flex or Ajax? <ul><li>Spaz (Twitter client) </li></ul><ul><li>http://funkatron.com/index.php/site/comments/spaz_a_twitter_...
Flex or Ajax? <ul><li>iFreelance </li></ul><ul><li>http://www.pixelfumes.com/blog/aug07/iFreelance.zip </li></ul>
Flex or Ajax? <ul><li>Pownce </li></ul><ul><li>http://www.pownce.com </li></ul>
About Us <ul><li>Andre Charland </li></ul><ul><ul><li>Nitobi  </li></ul></ul><ul><ul><li>Usability & RIA </li></ul></ul><u...
Our Customers
The Nitobi Perspective –  Components <ul><li>Ajax User Interface Component suite (9) </li></ul><ul><li>Cross platform </li...
The Nitobi Perspective -  Services <ul><li>Enterprise Web Systems Development </li></ul><ul><ul><li>UI Visioning and devel...
The Nitobi Perspective
<ul><li>Weighing the Alternatives </li></ul>Rich Internet Applications (RIA)
Rich Internet Applications <ul><li>AJAX </li></ul><ul><li>Java </li></ul><ul><ul><li>WebStart </li></ul></ul><ul><ul><li>A...
Why RIA? <ul><li>User Retention </li></ul><ul><li>Brand Development </li></ul><ul><li>User Efficiency </li></ul><ul><ul><l...
32% SAVINGS http://www.developer.com/java/other/article.php/3554271
Drivers for RIA Adoption <ul><li>Browser adoption </li></ul><ul><li>Development of web standards </li></ul><ul><li>Tooling...
AJAX Frameworks <ul><li>Dojo </li></ul><ul><li>Adobe Spry </li></ul><ul><li>Script.aculo.us </li></ul><ul><li>Prototype </...
Why AIR Appeals to Ajax Developers <ul><li>Same skill set </li></ul><ul><li>Great offline capabilities </li></ul><ul><li>F...
Technology Growth
Ajax is better in AIR <ul><li>Files (The Files are in the computer) </li></ul><ul><li>Windows & Chrome </li></ul><ul><li>D...
Usability Gotchas <ul><li>Keyboard shortcuts (tab, enter…) </li></ul><ul><li>Throbbers / Activity indicators – no spinning...
AIR Versus Web Desktop <ul><li>What the heck is a Web Desktop? </li></ul><ul><li>How is AIR the opposite of a Web Desktop?...
Practical AIR Applications
What Makes up a HTML AIR App? <ul><li>A JS-based AIR app always includes: </li></ul><ul><ul><li>An HTML file </li></ul></u...
Hello World <head> <title>Untitled Document</title> </head> <body> <h1> Main Content </h1> <p>Lorem ipsum dolor sit amet, ...
Think Outside the Box <ul><li>Creative Applications </li></ul>Nitobi Fisheye – in AIR Nitobi Fisheye – in Firefox SAME CODE
Creating the Fisheye – 1/2 <img src=&quot;grabby.png&quot;  onmousedown=&quot;window.nativeWindow.startMove();&quot;  />
Creating the Fisheye – 2/2 <ul><li>Application.xml </li></ul><?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> <a...
A Hypothetical Enterprise App <ul><li>The requirements: </li></ul><ul><ul><li>Allow in-the-field reps to access SF.com DB ...
Solution: Salesforce Customer Manager <ul><li>SalesForce API (Salesforce.com AJAX Connector 8.0) </li></ul><ul><li>AIR </l...
<ul><li>Yup. Some simple examples. </li></ul>In JavaScript? Really?
Problem 1 - Socket Communication <ul><li>How do we communicate with a foreign web service? </li></ul><ul><ul><li>Model for...
Monitoring Remote WS <ul><li>URLLoader simplifies XHR madness </li></ul><ul><li>Start with an existing web service:  http:...
Monitoring Remote WS <ul><li>Build a web form in an HTML page: </li></ul><ul><li>Perform a URLRequest to retrieve the data...
Monitoring Remote WS <ul><li>Grab the result, convert to an XML document </li></ul><ul><li>JSON is possible but requires e...
Going Offline <ul><li>Toolbox for working offline helps with business applications. </li></ul><ul><ul><li>Monitor network ...
Going Offline with servicemonitor.swf <ul><li>Checks connectivity to website or socket connection </li></ul><ul><li>Period...
Going Offline with servicemonitor.swf <ul><li>Use of external SWF library </li></ul><ul><li>Checking availability of parti...
Drag and Drop <ul><li>File type associations </li></ul><ul><li>Drag-on behavior </li></ul><ul><li>Bidirectional </li></ul>
Drag and Drop <ul><li>Add event listeners </li></ul><ul><li>Accept onEnter </li></ul><ul><li>Accept onDrop </li></ul>funct...
Drag and Drop <ul><li>Draw the grid from the CSV data: </li></ul>function displayGrid(csvdata) { dataSet = csvdata.split(&...
File IO – Saving back to Excel <ul><li>Serialize your data to a string: </li></ul>function serializeToXLS() { var resStrin...
File IO – Saving back to Excel <ul><li>Use FileStream to write to the disk </li></ul><ul><li>Deposit file on Desktop or an...
Changes to Ajax Security <ul><li>Beta 2 introduces improved security model </li></ul><ul><li>Different security sandboxes ...
What does it all mean?
Market Opportunities <ul><li>API Libraries </li></ul><ul><li>File Libraries </li></ul><ul><li>Advanced features – syncing,...
AIR Resources <ul><li>http://www.nitobi.com/air/   </li></ul><ul><li>Enterprise Ajax </li></ul><ul><ul><li>www.enterprisea...
Ask us Questions   35% Discount Coupon Email andre@nitobi and mention the OnAirBusTour. Andre Charland www.nitobi.com  ht...
Upcoming SlideShare
Loading in …5
×

Enterprise AIR Development for JavaScript Developers

5,422 views

Published on

Learn how to build AIR applications using Ajax and JavaScript. More info at http://nitobi.com/air

Published in: Technology

Enterprise AIR Development for JavaScript Developers

  1. 1. Andre Charland (andre@nitobi.com), Alexei White (alexei.white@nitobi.com) Nitobi Software, ltd. ENTERPRISE AIR FOR JAVASCRIPT DEVELOPERS
  2. 2. Flex or Ajax? <ul><li>Spaz (Twitter client) </li></ul><ul><li>http://funkatron.com/index.php/site/comments/spaz_a_twitter_client_for_mac_os_x_windows_and_linux/ </li></ul>
  3. 3. Flex or Ajax? <ul><li>iFreelance </li></ul><ul><li>http://www.pixelfumes.com/blog/aug07/iFreelance.zip </li></ul>
  4. 4. Flex or Ajax? <ul><li>Pownce </li></ul><ul><li>http://www.pownce.com </li></ul>
  5. 5. About Us <ul><li>Andre Charland </li></ul><ul><ul><li>Nitobi </li></ul></ul><ul><ul><li>Usability & RIA </li></ul></ul><ul><ul><li>Ajax Component suite </li></ul></ul><ul><ul><li>Design and Development </li></ul></ul><ul><li>Alexei White </li></ul><ul><ul><li>Nitobi </li></ul></ul><ul><ul><li>Developer, Designer </li></ul></ul><ul><ul><li>RIA (Ajax, Flash, etc) </li></ul></ul><ul><ul><li>Nintendo, RobotReplay, SayZu </li></ul></ul>
  6. 6. Our Customers
  7. 7. The Nitobi Perspective – Components <ul><li>Ajax User Interface Component suite (9) </li></ul><ul><li>Cross platform </li></ul><ul><ul><li>Java </li></ul></ul><ul><ul><li>ASP.NET/ASP </li></ul></ul><ul><ul><li>PHP </li></ul></ul><ul><ul><li>Coldfusion </li></ul></ul>
  8. 8. The Nitobi Perspective - Services <ul><li>Enterprise Web Systems Development </li></ul><ul><ul><li>UI Visioning and development </li></ul></ul><ul><ul><li>Intranets </li></ul></ul><ul><ul><li>‘ In the field’ web systems </li></ul></ul><ul><li>Consumer Web Systems Development </li></ul><ul><ul><li>Web strategy </li></ul></ul><ul><ul><li>Application development </li></ul></ul>
  9. 9. The Nitobi Perspective
  10. 10. <ul><li>Weighing the Alternatives </li></ul>Rich Internet Applications (RIA)
  11. 11. Rich Internet Applications <ul><li>AJAX </li></ul><ul><li>Java </li></ul><ul><ul><li>WebStart </li></ul></ul><ul><ul><li>Applets </li></ul></ul><ul><ul><li>JavaFX </li></ul></ul><ul><li>Flash </li></ul><ul><li>Flex </li></ul><ul><li>Silverlight / WPF </li></ul><ul><li>Adobe Integrated Runtime (AIR) </li></ul>(Nobody uses this) (Lame-o)
  12. 12. Why RIA? <ul><li>User Retention </li></ul><ul><li>Brand Development </li></ul><ul><li>User Efficiency </li></ul><ul><ul><li>Steps to complete a task </li></ul></ul><ul><ul><li>Training costs </li></ul></ul><ul><ul><li>Uninterrupted workflow </li></ul></ul><ul><ul><li>Time spent waiting* </li></ul></ul>
  13. 13. 32% SAVINGS http://www.developer.com/java/other/article.php/3554271
  14. 14. Drivers for RIA Adoption <ul><li>Browser adoption </li></ul><ul><li>Development of web standards </li></ul><ul><li>Tooling </li></ul><ul><li>Accessibility </li></ul><ul><li>User adoption </li></ul><ul><li>Affordability </li></ul><ul><li>Community </li></ul><ul><li>Performance </li></ul><ul><li>Offline capability </li></ul><ul><li>End user requirements </li></ul><ul><li>Ease of Distribution </li></ul><ul><li>Download time </li></ul><ul><li>Maturity </li></ul><ul><li>Security </li></ul><ul><li>Vendor Support </li></ul>
  15. 15. AJAX Frameworks <ul><li>Dojo </li></ul><ul><li>Adobe Spry </li></ul><ul><li>Script.aculo.us </li></ul><ul><li>Prototype </li></ul><ul><li>Moo.fx </li></ul><ul><li>Google Web Toolkit </li></ul><ul><li>Mochikit </li></ul><ul><li>Yahoo User Interface Library </li></ul><ul><li>Direct Web Remoting (DWR) </li></ul><ul><li>JQuery </li></ul><ul><li>Rico </li></ul><ul><li>ASP.NET Ajax (Atlas) </li></ul><ul><li>CakePHP </li></ul><ul><li>AjaxTags </li></ul><ul><li>Django </li></ul><ul><li>Rails-supported </li></ul><ul><li>Sarissa </li></ul><ul><li>SAJAX </li></ul><ul><li>XAJAX </li></ul><ul><li>Rialto </li></ul><ul><li>Nitobi </li></ul><ul><li>Backbase </li></ul><ul><li>TIBCO </li></ul><ul><li>Nexaweb </li></ul><ul><li>Laszlo </li></ul><ul><li>Telerik </li></ul><ul><li>Infragistics </li></ul><ul><li>IceSoft </li></ul><ul><li>ActiveWidgets </li></ul><ul><li>Dart </li></ul><ul><li>Gaia </li></ul><ul><li>Ajax.NET </li></ul><ul><li>Ajaxium </li></ul><ul><li>Anthem.NET </li></ul><ul><li>AjaxAspects </li></ul><ul><li>Bitkraft </li></ul><ul><li>ComfortASP.NET </li></ul><ul><li>emergetk </li></ul><ul><li>FastPage </li></ul><ul><li>MagicAjax.NET </li></ul><ul><li>mxAjax </li></ul><ul><li>Cajax </li></ul><ul><li>Claw </li></ul><ul><li>FURIA </li></ul><ul><li>Guava </li></ul><ul><li>HTS </li></ul><ul><li>jPOP </li></ul><ul><li>JPSpan </li></ul><ul><li>My-BIC </li></ul><ul><li>Kumbia </li></ul><ul><li>NanoAjax </li></ul><ul><li>Noculo </li></ul><ul><li>PHPLiveX </li></ul><ul><li>Picora </li></ul><ul><li>Qcodo </li></ul><ul><li>sniPEAR </li></ul><ul><li>Symfony </li></ul><ul><li>PAJAX </li></ul><ul><li>PAJAJ </li></ul><ul><li>Tigermouse </li></ul><ul><li>XOAD </li></ul><ul><li>PHPLiveX </li></ul><ul><li>Picora </li></ul><ul><li>Qcodo </li></ul><ul><li>sniPEAR </li></ul><ul><li>Symfony </li></ul><ul><li>PAJAX </li></ul><ul><li>PAJAJ </li></ul><ul><li>Tigermouse </li></ul><ul><li>XOAD </li></ul><ul><li>Zephyr </li></ul><ul><li>ADF </li></ul><ul><li>ADL </li></ul><ul><li>Restlet </li></ul><ul><li>SWATO </li></ul><ul><li>Tacos </li></ul><ul><li>Telosys </li></ul><ul><li>ThinkCAP JX </li></ul><ul><li>Wicket </li></ul><ul><li>WidgetServer </li></ul><ul><li>Wonder </li></ul><ul><li>XANDRA </li></ul><ul><li>xWire </li></ul><ul><li>ZK </li></ul><ul><li>AJASON </li></ul><ul><li>aSSL </li></ul><ul><li>AjaxAC </li></ul><ul><li>Ajax Agent </li></ul><ul><li>Cajax </li></ul><ul><li>Claw </li></ul><ul><li>FURIA </li></ul><ul><li>Guava </li></ul><ul><li>HTS </li></ul><ul><li>jPOP </li></ul><ul><li>JPSpan </li></ul><ul><li>My-BIC </li></ul><ul><li>Kumbia` </li></ul><ul><li>Cerny </li></ul><ul><li>EXT </li></ul><ul><li>JackBe </li></ul><ul><li>Javeline </li></ul><ul><li>JsLINB </li></ul><ul><li>JsRia </li></ul><ul><li>Macao </li></ul><ul><li>OpenLink </li></ul><ul><li>Plex Toolkit </li></ul><ul><li>Qooxdoo </li></ul><ul><li>IWF </li></ul><ul><li>Zimbra AjaxTk </li></ul><ul><li>JuiseLib </li></ul><ul><li>AjaxCaller </li></ul><ul><li>AjaxGears </li></ul><ul><li>AjaxToolbox </li></ul><ul><li>AJFORM </li></ul><ul><li>Jx/jxs </li></ul><ul><li>Lokris </li></ul><ul><li>MAJAX </li></ul><ul><li>RSLite </li></ul><ul><li>Sack </li></ul><ul><li>UniAjax </li></ul><ul><li>XHConn </li></ul><ul><li>Ajax Client Engine </li></ul><ul><li>Ajax Queue Class </li></ul><ul><li>Lumberjack </li></ul><ul><li>JSLog </li></ul><ul><li>jsTracer </li></ul><ul><li>CAPXOUS </li></ul><ul><li>Walter Zorn Framework </li></ul><ul><li>SmartClient </li></ul><ul><li>Subsys_jsHttpRequest </li></ul><ul><li>ThyAPI </li></ul><ul><li>TIBET </li></ul><ul><li>twoBirds </li></ul><ul><li>AjaxCFC </li></ul><ul><li>JSMX </li></ul><ul><li>WDDXAJAX </li></ul><ul><li>Akelos </li></ul><ul><li>AModules3 </li></ul><ul><li>AJASON </li></ul><ul><li>aSSL </li></ul><ul><li>AjaxAC </li></ul><ul><li>Ajax Agent </li></ul><ul><li>MOJO </li></ul><ul><li>Zapatec </li></ul><ul><li>ComponentOne </li></ul><ul><li>Farpoint </li></ul><ul><li>DevExpress </li></ul><ul><li>Janus </li></ul>
  16. 16. Why AIR Appeals to Ajax Developers <ul><li>Same skill set </li></ul><ul><li>Great offline capabilities </li></ul><ul><li>File-system and Desktop integration </li></ul><ul><li>Code re-use </li></ul><ul><li>Strengths of HTML </li></ul><ul><li>Cost of development </li></ul><ul><li>Rapid prototyping </li></ul><ul><li>Ease of distribution </li></ul>
  17. 17. Technology Growth
  18. 18. Ajax is better in AIR <ul><li>Files (The Files are in the computer) </li></ul><ul><li>Windows & Chrome </li></ul><ul><li>Drag and Drop </li></ul><ul><li>Copy and Paste (better) </li></ul><ul><li>Offline </li></ul><ul><li>Background process </li></ul><ul><li>Notifications </li></ul><ul><li>Keyboard Shortcuts </li></ul>
  19. 19. Usability Gotchas <ul><li>Keyboard shortcuts (tab, enter…) </li></ul><ul><li>Throbbers / Activity indicators – no spinning IE </li></ul><ul><li>Allow text to be copied </li></ul><ul><li>Add functions for minimize, move, resize, close when chromeless </li></ul><ul><li>Mouse hints (invitations) </li></ul>
  20. 20. AIR Versus Web Desktop <ul><li>What the heck is a Web Desktop? </li></ul><ul><li>How is AIR the opposite of a Web Desktop? </li></ul>
  21. 21. Practical AIR Applications
  22. 22. What Makes up a HTML AIR App? <ul><li>A JS-based AIR app always includes: </li></ul><ul><ul><li>An HTML file </li></ul></ul><ul><ul><li>An XML App Descriptor </li></ul></ul><ul><li>May also include: </li></ul><ul><ul><li>External JavaScript and CSS files </li></ul></ul><ul><ul><li>Documents and images </li></ul></ul><ul><ul><li>Flash files </li></ul></ul>
  23. 23. Hello World <head> <title>Untitled Document</title> </head> <body> <h1> Main Content </h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. </p> </body> </html> <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot; ?> <application xmlns=&quot;http://ns.adobe.com/air/application/1.0.M5&quot; appId=&quot;com.example.ExampleApplication&quot; version=&quot;1.0 Beta&quot;> <name>HelloWorld</name> <description>My Test Application</description> <copyright></copyright> <initialWindow> <title>HelloWorld</title> <content>helloworld.htm</content> <systemChrome>standard</systemChrome> <transparent>false</transparent> <visible>true</visible> </initialWindow> <icon></icon> <fileTypes> </fileTypes> </application>
  24. 24. Think Outside the Box <ul><li>Creative Applications </li></ul>Nitobi Fisheye – in AIR Nitobi Fisheye – in Firefox SAME CODE
  25. 25. Creating the Fisheye – 1/2 <img src=&quot;grabby.png&quot; onmousedown=&quot;window.nativeWindow.startMove();&quot; />
  26. 26. Creating the Fisheye – 2/2 <ul><li>Application.xml </li></ul><?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> <application appId=&quot;com.adobe.nitobiDeskEye&quot; version=&quot;1.0&quot; xmlns=&quot;http://ns.adobe.com/air/application/1.0.M4&quot;> <name>DeskEye</name> <installFolder>nitobi/AIR/DeskEye</installFolder> <description>The Nitobi Fisheye running in an Adobe AIR environment</description> <copyright>© 2007 Nitobi Inc.</copyright> <rootContent systemChrome =&quot;none&quot; transparent =&quot;true&quot; visible =&quot;true&quot; width =&quot;800&quot; height =&quot;300&quot;> index.html </rootContent> </application> C:devair>adt –package DeskEye.air application.xml * C:devair>
  27. 27. A Hypothetical Enterprise App <ul><li>The requirements: </li></ul><ul><ul><li>Allow in-the-field reps to access SF.com DB </li></ul></ul><ul><ul><li>Make changes offline </li></ul></ul><ul><ul><li>Take a VCARD from an email and easily import it into the application </li></ul></ul><ul><ul><li>Support Mac / PC / Linux (1.0) </li></ul></ul><ul><ul><li>Branded UI </li></ul></ul><ul><ul><li>Export contacts as VCARDS for use in Outlook etc. </li></ul></ul>
  28. 28. Solution: Salesforce Customer Manager <ul><li>SalesForce API (Salesforce.com AJAX Connector 8.0) </li></ul><ul><li>AIR </li></ul><ul><ul><li>Ajax Client for SalesForce API </li></ul></ul><ul><ul><li>Online/Offline (servicemonitor.swf) </li></ul></ul><ul><ul><li>Drag and Drop </li></ul></ul><ul><ul><li>File Parsing (Vcard) </li></ul></ul><ul><ul><li>Saving XML Files to disk </li></ul></ul>
  29. 29. <ul><li>Yup. Some simple examples. </li></ul>In JavaScript? Really?
  30. 30. Problem 1 - Socket Communication <ul><li>How do we communicate with a foreign web service? </li></ul><ul><ul><li>Model for socket communication is flexible </li></ul></ul><ul><ul><li>Cross domain OK </li></ul></ul><ul><ul><li>Tools for handling sparse connections </li></ul></ul><ul><ul><li>Upload files </li></ul></ul><ul><ul><li>Use non-supported protocols </li></ul></ul>
  31. 31. Monitoring Remote WS <ul><li>URLLoader simplifies XHR madness </li></ul><ul><li>Start with an existing web service: http://www.nitobi.com/air/customerservice </li></ul><ul><li>It returns XML: </li></ul>
  32. 32. Monitoring Remote WS <ul><li>Build a web form in an HTML page: </li></ul><ul><li>Perform a URLRequest to retrieve the data based on the keyword. </li></ul><form onsubmit=&quot;performSearch(); return false;&quot;> <p>Customer Search: <input type=&quot;text&quot; name=&quot;customerName&quot; onkeyup=&quot;performSearch();&quot; /> <input type=submit /></p> </form> <br /> <div id=&quot;resultsBlock&quot;></div> function performSearch() { var url = &quot;http://www.nitobi.com/air/customerservice?name=&quot; + document.forms[0].customerName.value; var request = new air.URLRequest(url); var loader = new air.URLLoader(); loader.dataFormat=air.URLLoaderDataFormat.TEXT; loader.addEventListener(air.Event.COMPLETE,displayResults); loader.load(request); } air.ProgressEvent.PROGRESS, SECURITY_ERROR, OPEN, COMPLETE, HTTP_STATUS, IO_ERROR
  33. 33. Monitoring Remote WS <ul><li>Grab the result, convert to an XML document </li></ul><ul><li>JSON is possible but requires extra steps </li></ul><ul><li>Current security model inhibits use of eval(); </li></ul>function displayResults(event){ var loader2=event.target; var parser = new DOMParser(); var doc = parser.parseFromString(loader2.data,&quot;text/xml&quot;); var companyList = doc.getElementsByTagName(&quot;company&quot;); var resultString = &quot;&quot; for (var i = 0; i < companyList.length; i++) { resultString += companyList[i].firstChild.nodeValue + &quot;, &quot;; } document.getElementById('resultsBlock').innerHTML = resultString; }
  34. 34. Going Offline <ul><li>Toolbox for working offline helps with business applications. </li></ul><ul><ul><li>Monitor network connectivity with servicemonitor.swf </li></ul></ul><ul><ul><li>Use local SQL database to cache data </li></ul></ul><ul><ul><li>Reconnect later </li></ul></ul><ul><ul><li>Transmit </li></ul></ul>
  35. 35. Going Offline with servicemonitor.swf <ul><li>Checks connectivity to website or socket connection </li></ul><ul><li>Periodic polling </li></ul>
  36. 36. Going Offline with servicemonitor.swf <ul><li>Use of external SWF library </li></ul><ul><li>Checking availability of particular URL: </li></ul><ul><li>Checking availability of particular socket: </li></ul>var monitor; function checkURLStatus(url) { var req = new air.URLRequest(url); monitor = new window.runtime.air.net.URLMonitor(req); monitor.pollInterval = 5000; monitor.addEventListener(air.StatusEvent.STATUS, showStatus ); monitor.start(); } function checkSocketStatus(host,port) { monitor = new window.runtime.air.net.SocketMonitor( host , port ); monitor.pollInterval = 5000; monitor.addEventListener(air.StatusEvent.STATUS, showStatus); monitor.start(); } <script type=&quot;application/x-shockwave-flash&quot; src=&quot;servicemonitor.swf&quot; ></script>
  37. 37. Drag and Drop <ul><li>File type associations </li></ul><ul><li>Drag-on behavior </li></ul><ul><li>Bidirectional </li></ul>
  38. 38. Drag and Drop <ul><li>Add event listeners </li></ul><ul><li>Accept onEnter </li></ul><ul><li>Accept onDrop </li></ul>function setupEvents() { window.htmlControl.addEventListener( runtime.flash.events.NativeDragEvent.NATIVE_DRAG_ENTER, doEnter ); window.htmlControl.addEventListener( runtime.flash.events.NativeDragEvent.NATIVE_DRAG_DROP , doDrop ); } function doEnter( event ) { runtime.flash.desktop.DragManager.acceptDragDrop( window.htmlControl ); } function doDrop( event ) { var fileString = ''; var files = event.transferable.dataForFormat(air.TransferableFormats.FILE_LIST_FORMAT,air.TransferableTransferMode.CLONE_PREFERRED ); for( var f = 0; f < files.length; f++ ) { var fileStream = new runtime.flash.filesystem.FileStream(); fileStream.open(files[f], runtime.flash.filesystem.FileMode.READ); var fileBytes = new runtime.flash.utils.ByteArray(); fileStream.readBytes(fileBytes); var fileString = fileBytes.toString(); fileStream.close(); } displayGrid(fileString); }
  39. 39. Drag and Drop <ul><li>Draw the grid from the CSV data: </li></ul>function displayGrid(csvdata) { dataSet = csvdata.split(&quot; &quot;); for (i = 0; i <dataSet.length; i++) { dataSet[i] = dataSet[i].split(&quot;,&quot;); } var resString = &quot;<form name=&quot;csvForm&quot;><table>&quot;; for (i = 0; i <dataSet.length; i++) { resString += &quot;<tr>&quot;; for (b = 0; b <dataSet[i].length; b++) { if (!isNumeric(dataSet[i][b]) || (dataSet[i][b].length < 1)) { resString += &quot;<td style=&quot;background-color: #f0f0f0; font-weight:bold; color:#000099;&quot;>&quot; + dataSet[i][b] + &quot;</td>&quot;; } else { resString += &quot;<td><input type=text name=&quot;c&quot; + b + &quot;_&quot; + i + &quot;&quot; value=&quot;&quot; + dataSet[i][b] + &quot;&quot; size=&quot;6&quot;></td>&quot;; } } resString += &quot;</tr>&quot;; } resString += &quot;</table></form>&quot;; document.getElementById('tableData').innerHTML = resString; }
  40. 40. File IO – Saving back to Excel <ul><li>Serialize your data to a string: </li></ul>function serializeToXLS() { var resString = &quot;<table>&quot;; for (i = 0; i <dataSet.length; i++) { resString += &quot;<tr>&quot;; for (b = 0; b <dataSet[i].length; b++) { if (!isNumeric(dataSet[i][b]) || (dataSet[i][b].length < 1)) { resString += &quot;<td style=&quot;background-color: #f0f0f0; font-weight:bold; color:#000099;&quot;>&quot; + dataSet[i][b] + &quot;</td>&quot;; } else { resString += &quot;<td>&quot; + document.forms[&quot;csvForm&quot;][&quot;c&quot; + b + &quot;_&quot; + i].value + &quot;</td>” } } resString += &quot;</tr>&quot;; } resString += &quot;</table>&quot;; return resString; } JavaScript String
  41. 41. File IO – Saving back to Excel <ul><li>Use FileStream to write to the disk </li></ul><ul><li>Deposit file on Desktop or any other location </li></ul><ul><li>OS Independent </li></ul><ul><li>Charset aware. </li></ul>function saveData() { var file = air.File.desktopDirectory.resolvePath(&quot;out.xls&quot;); var stream = new air.FileStream(); stream.open(file, air.FileMode.WRITE ); stream.writeMultiByte( serializeToXLS(), air.File.systemCharset ); stream.close(); }
  42. 42. Changes to Ajax Security <ul><li>Beta 2 introduces improved security model </li></ul><ul><li>Different security sandboxes </li></ul><ul><li>Prevent Cross site Scripting </li></ul><ul><li>Script Injection </li></ul>
  43. 43. What does it all mean?
  44. 44. Market Opportunities <ul><li>API Libraries </li></ul><ul><li>File Libraries </li></ul><ul><li>Advanced features – syncing, etc.. </li></ul><ul><li>Casual games </li></ul><ul><li>Downloadable games </li></ul>
  45. 45. AIR Resources <ul><li>http://www.nitobi.com/air/ </li></ul><ul><li>Enterprise Ajax </li></ul><ul><ul><li>www.enterpriseajax.com </li></ul></ul><ul><li>Kevin Hoyt’s AIR Examples </li></ul><ul><ul><li>http://blog.kevinhoyt.org/2007/06/27/35-air-examples-for-javascript-developers/ </li></ul></ul><ul><li>AIR for JavaScript Developers (Pocket Guide) </li></ul><ul><ul><li>http://ajaxian.com/archives/adobe-air-free-book-download </li></ul></ul><ul><li>Adobe Labs Ajax Resources </li></ul><ul><ul><li>http://labs.adobe.com/technologies/air/develop_ajax.html </li></ul></ul><ul><li>Dreamweaver Extension for AIR </li></ul><ul><ul><li>http://labs.adobe.com/wiki/index.php/AIR:Dreamweaver_CS3_Extension </li></ul></ul><ul><li>AIR Downloads </li></ul><ul><ul><li>http://labs.adobe.com/downloads/air.html </li></ul></ul>
  46. 46. Ask us Questions  35% Discount Coupon Email andre@nitobi and mention the OnAirBusTour. Andre Charland www.nitobi.com http://blogs.nitobi.com/andre [email_address] Alexei White www.nitobi.com http://blogs.nitobi.com/alexei [email_address]

×