SlideShare a Scribd company logo

Enterprise AIR Development for JavaScript Developers

Download as ppt, pdf
A
AndreCharland

The document discusses the potential of Adobe Integrated Runtime (AIR) for JavaScript developers. It provides examples of how AIR allows developing rich desktop applications with HTML, JavaScript and Flash. It demonstrates communicating with web services, working offline, drag and drop file handling, and saving data to files. AIR provides capabilities beyond the web like accessing local files and notifications while reusing existing Ajax skills.

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

Recommended

Widget Summit 2008
Widget Summit 2008Widget Summit 2008
Widget Summit 2008
Volkan Unsal
 
BDD - Writing better scenario
BDD - Writing better scenarioBDD - Writing better scenario
BDD - Writing better scenario
Arnauld Loyer
 
Fast by Default
Fast by DefaultFast by Default
Fast by Default
Abhay Kumar
 
Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM
Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM
Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM
Alfresco Software
 
API Technical Writing
API Technical WritingAPI Technical Writing
API Technical Writing
Sarah Maddox
 
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET DevelopersAccelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Todd Anglin
 
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
ianloh13
 
Ajax Applications with RichFaces and JSF 2
Ajax Applications with RichFaces and JSF 2Ajax Applications with RichFaces and JSF 2
Ajax Applications with RichFaces and JSF 2
Max Katz
 
WordPress and Ajax
WordPress and AjaxWordPress and Ajax
WordPress and Ajax
Ronald Huereca
 
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJRealize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Leonardo Balter
 
Keypoints html5
Keypoints html5Keypoints html5
Keypoints html5
dynamis
 
LinkedIn Platform at LeWeb 2010
LinkedIn Platform at LeWeb 2010LinkedIn Platform at LeWeb 2010
LinkedIn Platform at LeWeb 2010
Adam Trachtenberg
 
Wrangling Large Scale Frontend Web Applications
Wrangling Large Scale Frontend Web ApplicationsWrangling Large Scale Frontend Web Applications
Wrangling Large Scale Frontend Web Applications
Ryan Roemer
 
EuroPython 2011 - How to build complex web applications having fun?
EuroPython 2011 - How to build complex web applications having fun?EuroPython 2011 - How to build complex web applications having fun?
EuroPython 2011 - How to build complex web applications having fun?
Andrew Mleczko
 
HTML5 Video Player - HTML5 Dev Conf 2012
HTML5 Video Player - HTML5 Dev Conf 2012HTML5 Video Player - HTML5 Dev Conf 2012
HTML5 Video Player - HTML5 Dev Conf 2012
steveheffernan
 
PHPSpec & Behat: Two Testing Tools That Write Code For You (#phptek edition)
PHPSpec & Behat: Two Testing Tools That Write Code For You (#phptek edition)PHPSpec & Behat: Two Testing Tools That Write Code For You (#phptek edition)
PHPSpec & Behat: Two Testing Tools That Write Code For You (#phptek edition)
Joshua Warren
 
Integrating WordPress With Web APIs
Integrating WordPress With Web APIsIntegrating WordPress With Web APIs
Integrating WordPress With Web APIs
randyhoyt
 
Ajax to the Moon
Ajax to the MoonAjax to the Moon
Ajax to the Moon
davejohnson
 
TDD with BDD in PHP and Symfony
TDD with BDD in PHP and SymfonyTDD with BDD in PHP and Symfony
TDD with BDD in PHP and Symfony
Kamil Adryjanek
 
Working with Images in WordPress
Working with Images in WordPress Working with Images in WordPress
Working with Images in WordPress
randyhoyt
 
Node.js Authentication and Data Security
Node.js Authentication and Data SecurityNode.js Authentication and Data Security
Node.js Authentication and Data Security
Tim Messerschmidt
 
Api
ApiApi
Api
randyhoyt
 
Page Speed
Page SpeedPage Speed
Page Speed
Jon Henshaw
 
عرض حول وردبريس
عرض حول وردبريسعرض حول وردبريس
عرض حول وردبريس
Mohammed SAHLI
 
Introduction to html 5
Introduction to html 5Introduction to html 5
Introduction to html 5
Nir Elbaz
 
Using HTML5 sensibly
Using HTML5 sensiblyUsing HTML5 sensibly
Using HTML5 sensibly
Christian Heilmann
 
High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010
Nicholas Zakas
 
HTML5 JS APIs
HTML5 JS APIsHTML5 JS APIs
HTML5 JS APIs
Remy Sharp
 
25 10
25 1025 10
25 10
acunato
 
Passeggiata Ecologica Rifiuti
Passeggiata Ecologica RifiutiPasseggiata Ecologica Rifiuti
Passeggiata Ecologica Rifiuti
ssgtm
 

More Related Content

What's hot (20)

WordPress and Ajax
WordPress and AjaxWordPress and Ajax
WordPress and Ajax
Ronald Huereca
 
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJRealize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Leonardo Balter
 
Keypoints html5
Keypoints html5Keypoints html5
Keypoints html5
dynamis
 
LinkedIn Platform at LeWeb 2010
LinkedIn Platform at LeWeb 2010LinkedIn Platform at LeWeb 2010
LinkedIn Platform at LeWeb 2010
Adam Trachtenberg
 
Wrangling Large Scale Frontend Web Applications
Wrangling Large Scale Frontend Web ApplicationsWrangling Large Scale Frontend Web Applications
Wrangling Large Scale Frontend Web Applications
Ryan Roemer
 
EuroPython 2011 - How to build complex web applications having fun?
EuroPython 2011 - How to build complex web applications having fun?EuroPython 2011 - How to build complex web applications having fun?
EuroPython 2011 - How to build complex web applications having fun?
Andrew Mleczko
 
HTML5 Video Player - HTML5 Dev Conf 2012
HTML5 Video Player - HTML5 Dev Conf 2012HTML5 Video Player - HTML5 Dev Conf 2012
HTML5 Video Player - HTML5 Dev Conf 2012
steveheffernan
 
PHPSpec & Behat: Two Testing Tools That Write Code For You (#phptek edition)
PHPSpec & Behat: Two Testing Tools That Write Code For You (#phptek edition)PHPSpec & Behat: Two Testing Tools That Write Code For You (#phptek edition)
PHPSpec & Behat: Two Testing Tools That Write Code For You (#phptek edition)
Joshua Warren
 
Integrating WordPress With Web APIs
Integrating WordPress With Web APIsIntegrating WordPress With Web APIs
Integrating WordPress With Web APIs
randyhoyt
 
Ajax to the Moon
Ajax to the MoonAjax to the Moon
Ajax to the Moon
davejohnson
 
TDD with BDD in PHP and Symfony
TDD with BDD in PHP and SymfonyTDD with BDD in PHP and Symfony
TDD with BDD in PHP and Symfony
Kamil Adryjanek
 
Working with Images in WordPress
Working with Images in WordPress Working with Images in WordPress
Working with Images in WordPress
randyhoyt
 
Node.js Authentication and Data Security
Node.js Authentication and Data SecurityNode.js Authentication and Data Security
Node.js Authentication and Data Security
Tim Messerschmidt
 
Api
ApiApi
Api
randyhoyt
 
Page Speed
Page SpeedPage Speed
Page Speed
Jon Henshaw
 
عرض حول وردبريس
عرض حول وردبريسعرض حول وردبريس
عرض حول وردبريس
Mohammed SAHLI
 
Introduction to html 5
Introduction to html 5Introduction to html 5
Introduction to html 5
Nir Elbaz
 
Using HTML5 sensibly
Using HTML5 sensiblyUsing HTML5 sensibly
Using HTML5 sensibly
Christian Heilmann
 
High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010
Nicholas Zakas
 
HTML5 JS APIs
HTML5 JS APIsHTML5 JS APIs
HTML5 JS APIs
Remy Sharp
 
WordPress and Ajax
WordPress and AjaxWordPress and Ajax
WordPress and Ajax
Ronald Huereca
 
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJRealize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Leonardo Balter
 
Keypoints html5
Keypoints html5Keypoints html5
Keypoints html5
dynamis
 
LinkedIn Platform at LeWeb 2010
LinkedIn Platform at LeWeb 2010LinkedIn Platform at LeWeb 2010
LinkedIn Platform at LeWeb 2010
Adam Trachtenberg
 
Wrangling Large Scale Frontend Web Applications
Wrangling Large Scale Frontend Web ApplicationsWrangling Large Scale Frontend Web Applications
Wrangling Large Scale Frontend Web Applications
Ryan Roemer
 
EuroPython 2011 - How to build complex web applications having fun?
EuroPython 2011 - How to build complex web applications having fun?EuroPython 2011 - How to build complex web applications having fun?
EuroPython 2011 - How to build complex web applications having fun?
Andrew Mleczko
 
HTML5 Video Player - HTML5 Dev Conf 2012
HTML5 Video Player - HTML5 Dev Conf 2012HTML5 Video Player - HTML5 Dev Conf 2012
HTML5 Video Player - HTML5 Dev Conf 2012
steveheffernan
 
PHPSpec & Behat: Two Testing Tools That Write Code For You (#phptek edition)
PHPSpec & Behat: Two Testing Tools That Write Code For You (#phptek edition)PHPSpec & Behat: Two Testing Tools That Write Code For You (#phptek edition)
PHPSpec & Behat: Two Testing Tools That Write Code For You (#phptek edition)
Joshua Warren
 
Integrating WordPress With Web APIs
Integrating WordPress With Web APIsIntegrating WordPress With Web APIs
Integrating WordPress With Web APIs
randyhoyt
 
Ajax to the Moon
Ajax to the MoonAjax to the Moon
Ajax to the Moon
davejohnson
 
TDD with BDD in PHP and Symfony
TDD with BDD in PHP and SymfonyTDD with BDD in PHP and Symfony
TDD with BDD in PHP and Symfony
Kamil Adryjanek
 
Working with Images in WordPress
Working with Images in WordPress Working with Images in WordPress
Working with Images in WordPress
randyhoyt
 
Node.js Authentication and Data Security
Node.js Authentication and Data SecurityNode.js Authentication and Data Security
Node.js Authentication and Data Security
Tim Messerschmidt
 
Api
ApiApi
Api
randyhoyt
 
Page Speed
Page SpeedPage Speed
Page Speed
Jon Henshaw
 
عرض حول وردبريس
عرض حول وردبريسعرض حول وردبريس
عرض حول وردبريس
Mohammed SAHLI
 
Introduction to html 5
Introduction to html 5Introduction to html 5
Introduction to html 5
Nir Elbaz
 
Using HTML5 sensibly
Using HTML5 sensiblyUsing HTML5 sensibly
Using HTML5 sensibly
Christian Heilmann
 
High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010
Nicholas Zakas
 
HTML5 JS APIs
HTML5 JS APIsHTML5 JS APIs
HTML5 JS APIs
Remy Sharp
 

Viewers also liked (20)

25 10
25 1025 10
25 10
acunato
 
Passeggiata Ecologica Rifiuti
Passeggiata Ecologica RifiutiPasseggiata Ecologica Rifiuti
Passeggiata Ecologica Rifiuti
ssgtm
 
Delicieux Enfant
Delicieux EnfantDelicieux Enfant
Delicieux Enfant
guest3ae9ee
 
La comissió d'informàtica
La comissió d'informàticaLa comissió d'informàtica
La comissió d'informàtica
jclua
 
Anghela Abanto ZañA
Anghela Abanto ZañAAnghela Abanto ZañA
Anghela Abanto ZañA
Jonhy Leyva Aguilar
 
SUIÇA
SUIÇASUIÇA
SUIÇA
samakaio
 
PráCtica Nº 02
PráCtica Nº 02PráCtica Nº 02
PráCtica Nº 02
Jonhy Leyva Aguilar
 
Image Map Demo Oct25
Image Map Demo Oct25Image Map Demo Oct25
Image Map Demo Oct25
davereece
 
UN Week 2007
UN Week 2007UN Week 2007
UN Week 2007
Judith Shorrocks
 
PáGinasdenov Dic2006
PáGinasdenov Dic2006PáGinasdenov Dic2006
PáGinasdenov Dic2006
thalos
 
Iluminacion Faros Xenon Instalacion
Iluminacion Faros Xenon InstalacionIluminacion Faros Xenon Instalacion
Iluminacion Faros Xenon Instalacion
gueste59562
 
Lins
LinsLins
Lins
grupodesabado
 
Malos Padres
Malos PadresMalos Padres
Malos Padres
limure
 
Table Oct26
Table Oct26Table Oct26
Table Oct26
davereece
 
Amor
AmorAmor
Amor
ESPEJO 25
 
Request for a decentralized social network
Request for a decentralized social networkRequest for a decentralized social network
Request for a decentralized social network
Justin Kistner
 
Roxysolanopino
RoxysolanopinoRoxysolanopino
Roxysolanopino
Jonhy Leyva Aguilar
 
Test Power Point
Test Power PointTest Power Point
Test Power Point
NYPL U.S. History, Local History and Genealogy
 
Miexpareja
MiexparejaMiexpareja
Miexpareja
guest8d8c4a
 
SUIÇA
SUIÇASUIÇA
SUIÇA
samakaio
 
25 10
25 1025 10
25 10
acunato
 
Passeggiata Ecologica Rifiuti
Passeggiata Ecologica RifiutiPasseggiata Ecologica Rifiuti
Passeggiata Ecologica Rifiuti
ssgtm
 
Delicieux Enfant
Delicieux EnfantDelicieux Enfant
Delicieux Enfant
guest3ae9ee
 
La comissió d'informàtica
La comissió d'informàticaLa comissió d'informàtica
La comissió d'informàtica
jclua
 
Anghela Abanto ZañA
Anghela Abanto ZañAAnghela Abanto ZañA
Anghela Abanto ZañA
Jonhy Leyva Aguilar
 
SUIÇA
SUIÇASUIÇA
SUIÇA
samakaio
 
PráCtica Nº 02
PráCtica Nº 02PráCtica Nº 02
PráCtica Nº 02
Jonhy Leyva Aguilar
 
Image Map Demo Oct25
Image Map Demo Oct25Image Map Demo Oct25
Image Map Demo Oct25
davereece
 
UN Week 2007
UN Week 2007UN Week 2007
UN Week 2007
Judith Shorrocks
 
PáGinasdenov Dic2006
PáGinasdenov Dic2006PáGinasdenov Dic2006
PáGinasdenov Dic2006
thalos
 
Iluminacion Faros Xenon Instalacion
Iluminacion Faros Xenon InstalacionIluminacion Faros Xenon Instalacion
Iluminacion Faros Xenon Instalacion
gueste59562
 
Lins
LinsLins
Lins
grupodesabado
 
Malos Padres
Malos PadresMalos Padres
Malos Padres
limure
 
Table Oct26
Table Oct26Table Oct26
Table Oct26
davereece
 
Amor
AmorAmor
Amor
ESPEJO 25
 
Request for a decentralized social network
Request for a decentralized social networkRequest for a decentralized social network
Request for a decentralized social network
Justin Kistner
 
Roxysolanopino
RoxysolanopinoRoxysolanopino
Roxysolanopino
Jonhy Leyva Aguilar
 
Test Power Point
Test Power PointTest Power Point
Test Power Point
NYPL U.S. History, Local History and Genealogy
 
Miexpareja
MiexparejaMiexpareja
Miexpareja
guest8d8c4a
 
SUIÇA
SUIÇASUIÇA
SUIÇA
samakaio
 
Ad

Similar to Enterprise AIR Development for JavaScript Developers (20)

Ajax in AIR from On AIR Tour Europe
Ajax in AIR from On AIR Tour EuropeAjax in AIR from On AIR Tour Europe
Ajax in AIR from On AIR Tour Europe
AndreCharland
 
Getting Started with Adobe AIR 1.5
Getting Started with Adobe AIR 1.5Getting Started with Adobe AIR 1.5
Getting Started with Adobe AIR 1.5
Elad Elrom
 
Flex3
Flex3Flex3
Flex3
SaurabhIT
 
Flex Introduction
Flex IntroductionFlex Introduction
Flex Introduction
Sabarinathan Masilamani
 
Web applicationsolutions
Web applicationsolutionsWeb applicationsolutions
Web applicationsolutions
Nika Stuard
 
Web Application Solutions
Web Application SolutionsWeb Application Solutions
Web Application Solutions
marvin256
 
What is Adobe Flex ?
What is Adobe Flex ?What is Adobe Flex ?
What is Adobe Flex ?
Antonio Correia
 
Adobe® Flex™
Adobe® Flex™Adobe® Flex™
Adobe® Flex™
Uday Shankar
 
RIA with Flex & PHP - Tulsa TechFest 2009
RIA with Flex & PHP - Tulsa TechFest 2009RIA with Flex & PHP - Tulsa TechFest 2009
RIA with Flex & PHP - Tulsa TechFest 2009
Jason Ragsdale
 
Building Flash-based websites using Adobe Flex - Lesson 1/10
Building Flash-based websites using Adobe Flex - Lesson 1/10Building Flash-based websites using Adobe Flex - Lesson 1/10
Building Flash-based websites using Adobe Flex - Lesson 1/10
Stefano Virgilli
 
Flex Air Intro
Flex Air IntroFlex Air Intro
Flex Air Intro
JUG Genova
 
Building Desktop RIAs with PHP, HTML & Javascript in AIR
Building Desktop RIAs with PHP, HTML & Javascript in AIRBuilding Desktop RIAs with PHP, HTML & Javascript in AIR
Building Desktop RIAs with PHP, HTML & Javascript in AIR
funkatron
 
Flex vs. HTML5 for RIAS
Flex vs. HTML5 for RIASFlex vs. HTML5 for RIAS
Flex vs. HTML5 for RIAS
Pamela Fox
 
Developing RIAs... 10 reasons to use Adobe Flex
Developing RIAs... 10 reasons to use Adobe FlexDeveloping RIAs... 10 reasons to use Adobe Flex
Developing RIAs... 10 reasons to use Adobe Flex
Matthias Zeller
 
Adobe Flex builder by elmagnif
Adobe Flex builder by elmagnifAdobe Flex builder by elmagnif
Adobe Flex builder by elmagnif
mbaye camara
 
Mobile JavaScript
Mobile JavaScriptMobile JavaScript
Mobile JavaScript
Brian LeRoux
 
Building Desktop RIAs With PHP And JavaScript
Building Desktop RIAs With PHP And JavaScriptBuilding Desktop RIAs With PHP And JavaScript
Building Desktop RIAs With PHP And JavaScript
funkatron
 
Polysource-IT Profile
Polysource-IT ProfilePolysource-IT Profile
Polysource-IT Profile
Helen
 
Polysource-IT Profile
Polysource-IT ProfilePolysource-IT Profile
Polysource-IT Profile
Helen
 
FreshAir2008
FreshAir2008FreshAir2008
FreshAir2008
tutorialsruby
 
Ajax in AIR from On AIR Tour Europe
Ajax in AIR from On AIR Tour EuropeAjax in AIR from On AIR Tour Europe
Ajax in AIR from On AIR Tour Europe
AndreCharland
 
Getting Started with Adobe AIR 1.5
Getting Started with Adobe AIR 1.5Getting Started with Adobe AIR 1.5
Getting Started with Adobe AIR 1.5
Elad Elrom
 
Flex3
Flex3Flex3
Flex3
SaurabhIT
 
Flex Introduction
Flex IntroductionFlex Introduction
Flex Introduction
Sabarinathan Masilamani
 
Web applicationsolutions
Web applicationsolutionsWeb applicationsolutions
Web applicationsolutions
Nika Stuard
 
Web Application Solutions
Web Application SolutionsWeb Application Solutions
Web Application Solutions
marvin256
 
What is Adobe Flex ?
What is Adobe Flex ?What is Adobe Flex ?
What is Adobe Flex ?
Antonio Correia
 
Adobe® Flex™
Adobe® Flex™Adobe® Flex™
Adobe® Flex™
Uday Shankar
 
RIA with Flex & PHP - Tulsa TechFest 2009
RIA with Flex & PHP - Tulsa TechFest 2009RIA with Flex & PHP - Tulsa TechFest 2009
RIA with Flex & PHP - Tulsa TechFest 2009
Jason Ragsdale
 
Building Flash-based websites using Adobe Flex - Lesson 1/10
Building Flash-based websites using Adobe Flex - Lesson 1/10Building Flash-based websites using Adobe Flex - Lesson 1/10
Building Flash-based websites using Adobe Flex - Lesson 1/10
Stefano Virgilli
 
Flex Air Intro
Flex Air IntroFlex Air Intro
Flex Air Intro
JUG Genova
 
Building Desktop RIAs with PHP, HTML & Javascript in AIR
Building Desktop RIAs with PHP, HTML & Javascript in AIRBuilding Desktop RIAs with PHP, HTML & Javascript in AIR
Building Desktop RIAs with PHP, HTML & Javascript in AIR
funkatron
 
Flex vs. HTML5 for RIAS
Flex vs. HTML5 for RIASFlex vs. HTML5 for RIAS
Flex vs. HTML5 for RIAS
Pamela Fox
 
Developing RIAs... 10 reasons to use Adobe Flex
Developing RIAs... 10 reasons to use Adobe FlexDeveloping RIAs... 10 reasons to use Adobe Flex
Developing RIAs... 10 reasons to use Adobe Flex
Matthias Zeller
 
Adobe Flex builder by elmagnif
Adobe Flex builder by elmagnifAdobe Flex builder by elmagnif
Adobe Flex builder by elmagnif
mbaye camara
 
Mobile JavaScript
Mobile JavaScriptMobile JavaScript
Mobile JavaScript
Brian LeRoux
 
Building Desktop RIAs With PHP And JavaScript
Building Desktop RIAs With PHP And JavaScriptBuilding Desktop RIAs With PHP And JavaScript
Building Desktop RIAs With PHP And JavaScript
funkatron
 
Polysource-IT Profile
Polysource-IT ProfilePolysource-IT Profile
Polysource-IT Profile
Helen
 
Polysource-IT Profile
Polysource-IT ProfilePolysource-IT Profile
Polysource-IT Profile
Helen
 
FreshAir2008
FreshAir2008FreshAir2008
FreshAir2008
tutorialsruby
 
Ad

More from AndreCharland (18)

Kees and Clair Hut Grand Opening - Spearhead Huts Society
Kees and Clair Hut Grand Opening - Spearhead Huts SocietyKees and Clair Hut Grand Opening - Spearhead Huts Society
Kees and Clair Hut Grand Opening - Spearhead Huts Society
AndreCharland
 
Spearhead fundraising 2019
Spearhead fundraising 2019Spearhead fundraising 2019
Spearhead fundraising 2019
AndreCharland
 
PhoneGap Day EU 2012 Welcome
PhoneGap Day EU 2012 WelcomePhoneGap Day EU 2012 Welcome
PhoneGap Day EU 2012 Welcome
AndreCharland
 
Phone gap day welcome 2012
Phone gap day welcome 2012Phone gap day welcome 2012
Phone gap day welcome 2012
AndreCharland
 
Phone gap Stats & Growth
Phone gap Stats & GrowthPhone gap Stats & Growth
Phone gap Stats & Growth
AndreCharland
 
PhoneGap Build Presentation at Deploy2010
PhoneGap Build Presentation at Deploy2010PhoneGap Build Presentation at Deploy2010
PhoneGap Build Presentation at Deploy2010
AndreCharland
 
Calendar Finalto Distribute Small
Calendar Finalto Distribute SmallCalendar Finalto Distribute Small
Calendar Finalto Distribute Small
AndreCharland
 
Rad Boob Club Calendar 2010
Rad Boob Club Calendar 2010Rad Boob Club Calendar 2010
Rad Boob Club Calendar 2010
AndreCharland
 
InsideRIA Outlook for 2009
InsideRIA Outlook for 2009InsideRIA Outlook for 2009
InsideRIA Outlook for 2009
AndreCharland
 
Ajax Development With Dreamweaver
Ajax Development With DreamweaverAjax Development With Dreamweaver
Ajax Development With Dreamweaver
AndreCharland
 
Adobe AIR Overview
Adobe AIR OverviewAdobe AIR Overview
Adobe AIR Overview
AndreCharland
 
Ajax and JavaScript Bootcamp
Ajax and JavaScript BootcampAjax and JavaScript Bootcamp
Ajax and JavaScript Bootcamp
AndreCharland
 
Voices That Matter Ajax Overview
Voices That Matter Ajax OverviewVoices That Matter Ajax Overview
Voices That Matter Ajax Overview
AndreCharland
 
Blogging For Business
Blogging For BusinessBlogging For Business
Blogging For Business
AndreCharland
 
Web Usability in the Enterprise with Ajax
Web Usability in the Enterprise with AjaxWeb Usability in the Enterprise with Ajax
Web Usability in the Enterprise with Ajax
AndreCharland
 
Ajax Usability for AjaxWorld
Ajax Usability for AjaxWorldAjax Usability for AjaxWorld
Ajax Usability for AjaxWorld
AndreCharland
 
Using the Tools of Web 2.0 for Marketing
Using the Tools of Web 2.0 for MarketingUsing the Tools of Web 2.0 for Marketing
Using the Tools of Web 2.0 for Marketing
AndreCharland
 
GIS Applications on the Web
GIS Applications on the WebGIS Applications on the Web
GIS Applications on the Web
AndreCharland
 
Kees and Clair Hut Grand Opening - Spearhead Huts Society
Kees and Clair Hut Grand Opening - Spearhead Huts SocietyKees and Clair Hut Grand Opening - Spearhead Huts Society
Kees and Clair Hut Grand Opening - Spearhead Huts Society
AndreCharland
 
Spearhead fundraising 2019
Spearhead fundraising 2019Spearhead fundraising 2019
Spearhead fundraising 2019
AndreCharland
 
PhoneGap Day EU 2012 Welcome
PhoneGap Day EU 2012 WelcomePhoneGap Day EU 2012 Welcome
PhoneGap Day EU 2012 Welcome
AndreCharland
 
Phone gap day welcome 2012
Phone gap day welcome 2012Phone gap day welcome 2012
Phone gap day welcome 2012
AndreCharland
 
Phone gap Stats & Growth
Phone gap Stats & GrowthPhone gap Stats & Growth
Phone gap Stats & Growth
AndreCharland
 
PhoneGap Build Presentation at Deploy2010
PhoneGap Build Presentation at Deploy2010PhoneGap Build Presentation at Deploy2010
PhoneGap Build Presentation at Deploy2010
AndreCharland
 
Calendar Finalto Distribute Small
Calendar Finalto Distribute SmallCalendar Finalto Distribute Small
Calendar Finalto Distribute Small
AndreCharland
 
Rad Boob Club Calendar 2010
Rad Boob Club Calendar 2010Rad Boob Club Calendar 2010
Rad Boob Club Calendar 2010
AndreCharland
 
InsideRIA Outlook for 2009
InsideRIA Outlook for 2009InsideRIA Outlook for 2009
InsideRIA Outlook for 2009
AndreCharland
 
Ajax Development With Dreamweaver
Ajax Development With DreamweaverAjax Development With Dreamweaver
Ajax Development With Dreamweaver
AndreCharland
 
Adobe AIR Overview
Adobe AIR OverviewAdobe AIR Overview
Adobe AIR Overview
AndreCharland
 
Ajax and JavaScript Bootcamp
Ajax and JavaScript BootcampAjax and JavaScript Bootcamp
Ajax and JavaScript Bootcamp
AndreCharland
 
Voices That Matter Ajax Overview
Voices That Matter Ajax OverviewVoices That Matter Ajax Overview
Voices That Matter Ajax Overview
AndreCharland
 
Blogging For Business
Blogging For BusinessBlogging For Business
Blogging For Business
AndreCharland
 
Web Usability in the Enterprise with Ajax
Web Usability in the Enterprise with AjaxWeb Usability in the Enterprise with Ajax
Web Usability in the Enterprise with Ajax
AndreCharland
 
Ajax Usability for AjaxWorld
Ajax Usability for AjaxWorldAjax Usability for AjaxWorld
Ajax Usability for AjaxWorld
AndreCharland
 
Using the Tools of Web 2.0 for Marketing
Using the Tools of Web 2.0 for MarketingUsing the Tools of Web 2.0 for Marketing
Using the Tools of Web 2.0 for Marketing
AndreCharland
 
GIS Applications on the Web
GIS Applications on the WebGIS Applications on the Web
GIS Applications on the Web
AndreCharland
 

Recently uploaded (20)

DevOps in the Modern Era - Thoughtfully Critical Podcast
DevOps in the Modern Era - Thoughtfully Critical PodcastDevOps in the Modern Era - Thoughtfully Critical Podcast
DevOps in the Modern Era - Thoughtfully Critical Podcast
Chris Wahl
 
Introduction to Internet of things .ppt.
Introduction to Internet of things .ppt.Introduction to Internet of things .ppt.
Introduction to Internet of things .ppt.
hok12341073
 
Boosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdf
Boosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdfBoosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdf
Boosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdf
Alkin Tezuysal
 
If You Use Databricks, You Definitely Need FME
If You Use Databricks, You Definitely Need FMEIf You Use Databricks, You Definitely Need FME
If You Use Databricks, You Definitely Need FME
Safe Software
 
Down the Rabbit Hole – Solving 5 Training Roadblocks
Down the Rabbit Hole – Solving 5 Training RoadblocksDown the Rabbit Hole – Solving 5 Training Roadblocks
Down the Rabbit Hole – Solving 5 Training Roadblocks
Rustici Software
 
Murdledescargadarkweb.pdfvolumen1 100 elementary
Murdledescargadarkweb.pdfvolumen1 100 elementaryMurdledescargadarkweb.pdfvolumen1 100 elementary
Murdledescargadarkweb.pdfvolumen1 100 elementary
JorgeSemperteguiMont
 
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
Edge AI and Vision Alliance
 
“How Qualcomm Is Powering AI-driven Multimedia at the Edge,” a Presentation f...
“How Qualcomm Is Powering AI-driven Multimedia at the Edge,” a Presentation f...“How Qualcomm Is Powering AI-driven Multimedia at the Edge,” a Presentation f...
“How Qualcomm Is Powering AI-driven Multimedia at the Edge,” a Presentation f...
Edge AI and Vision Alliance
 
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Anish Kumar
 
Your startup on AWS - How to architect and maintain a Lean and Mean account J...
Your startup on AWS - How to architect and maintain a Lean and Mean account J...Your startup on AWS - How to architect and maintain a Lean and Mean account J...
Your startup on AWS - How to architect and maintain a Lean and Mean account J...
angelo60207
 
Soulmaite review - Find Real AI soulmate review
Soulmaite review - Find Real AI soulmate reviewSoulmaite review - Find Real AI soulmate review
Soulmaite review - Find Real AI soulmate review
Soulmaite
 
Oracle Cloud Infrastructure AI Foundations
Oracle Cloud Infrastructure AI FoundationsOracle Cloud Infrastructure AI Foundations
Oracle Cloud Infrastructure AI Foundations
VICTOR MAESTRE RAMIREZ
 
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdfcnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
AmirStern2
 
Introduction to Typescript - GDG On Campus EUE
Introduction to Typescript - GDG On Campus EUEIntroduction to Typescript - GDG On Campus EUE
Introduction to Typescript - GDG On Campus EUE
Google Developer Group On Campus European Universities in Egypt
 
Bridging the divide: A conversation on tariffs today in the book industry - T...
Bridging the divide: A conversation on tariffs today in the book industry - T...Bridging the divide: A conversation on tariffs today in the book industry - T...
Bridging the divide: A conversation on tariffs today in the book industry - T...
BookNet Canada
 
Your startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean accountYour startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean account
angelo60207
 
Oracle Cloud Infrastructure Generative AI Professional
Oracle Cloud Infrastructure Generative AI ProfessionalOracle Cloud Infrastructure Generative AI Professional
Oracle Cloud Infrastructure Generative AI Professional
VICTOR MAESTRE RAMIREZ
 
Agentic AI: Beyond the Buzz- LangGraph Studio V2
Agentic AI: Beyond the Buzz- LangGraph Studio V2Agentic AI: Beyond the Buzz- LangGraph Studio V2
Agentic AI: Beyond the Buzz- LangGraph Studio V2
Shashikant Jagtap
 
FCF- Getting Started in Cybersecurity 3.0
FCF- Getting Started in Cybersecurity 3.0FCF- Getting Started in Cybersecurity 3.0
FCF- Getting Started in Cybersecurity 3.0
RodrigoMori7
 
How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdf
How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdfHow Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdf
How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdf
Rejig Digital
 
DevOps in the Modern Era - Thoughtfully Critical Podcast
DevOps in the Modern Era - Thoughtfully Critical PodcastDevOps in the Modern Era - Thoughtfully Critical Podcast
DevOps in the Modern Era - Thoughtfully Critical Podcast
Chris Wahl
 
Introduction to Internet of things .ppt.
Introduction to Internet of things .ppt.Introduction to Internet of things .ppt.
Introduction to Internet of things .ppt.
hok12341073
 
Boosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdf
Boosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdfBoosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdf
Boosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdf
Alkin Tezuysal
 
If You Use Databricks, You Definitely Need FME
If You Use Databricks, You Definitely Need FMEIf You Use Databricks, You Definitely Need FME
If You Use Databricks, You Definitely Need FME
Safe Software
 
Down the Rabbit Hole – Solving 5 Training Roadblocks
Down the Rabbit Hole – Solving 5 Training RoadblocksDown the Rabbit Hole – Solving 5 Training Roadblocks
Down the Rabbit Hole – Solving 5 Training Roadblocks
Rustici Software
 
Murdledescargadarkweb.pdfvolumen1 100 elementary
Murdledescargadarkweb.pdfvolumen1 100 elementaryMurdledescargadarkweb.pdfvolumen1 100 elementary
Murdledescargadarkweb.pdfvolumen1 100 elementary
JorgeSemperteguiMont
 
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
Edge AI and Vision Alliance
 
“How Qualcomm Is Powering AI-driven Multimedia at the Edge,” a Presentation f...
“How Qualcomm Is Powering AI-driven Multimedia at the Edge,” a Presentation f...“How Qualcomm Is Powering AI-driven Multimedia at the Edge,” a Presentation f...
“How Qualcomm Is Powering AI-driven Multimedia at the Edge,” a Presentation f...
Edge AI and Vision Alliance
 
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Anish Kumar
 
Your startup on AWS - How to architect and maintain a Lean and Mean account J...
Your startup on AWS - How to architect and maintain a Lean and Mean account J...Your startup on AWS - How to architect and maintain a Lean and Mean account J...
Your startup on AWS - How to architect and maintain a Lean and Mean account J...
angelo60207
 
Soulmaite review - Find Real AI soulmate review
Soulmaite review - Find Real AI soulmate reviewSoulmaite review - Find Real AI soulmate review
Soulmaite review - Find Real AI soulmate review
Soulmaite
 
Oracle Cloud Infrastructure AI Foundations
Oracle Cloud Infrastructure AI FoundationsOracle Cloud Infrastructure AI Foundations
Oracle Cloud Infrastructure AI Foundations
VICTOR MAESTRE RAMIREZ
 
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdfcnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
AmirStern2
 
Introduction to Typescript - GDG On Campus EUE
Introduction to Typescript - GDG On Campus EUEIntroduction to Typescript - GDG On Campus EUE
Introduction to Typescript - GDG On Campus EUE
Google Developer Group On Campus European Universities in Egypt
 
Bridging the divide: A conversation on tariffs today in the book industry - T...
Bridging the divide: A conversation on tariffs today in the book industry - T...Bridging the divide: A conversation on tariffs today in the book industry - T...
Bridging the divide: A conversation on tariffs today in the book industry - T...
BookNet Canada
 
Your startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean accountYour startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean account
angelo60207
 
Oracle Cloud Infrastructure Generative AI Professional
Oracle Cloud Infrastructure Generative AI ProfessionalOracle Cloud Infrastructure Generative AI Professional
Oracle Cloud Infrastructure Generative AI Professional
VICTOR MAESTRE RAMIREZ
 
Agentic AI: Beyond the Buzz- LangGraph Studio V2
Agentic AI: Beyond the Buzz- LangGraph Studio V2Agentic AI: Beyond the Buzz- LangGraph Studio V2
Agentic AI: Beyond the Buzz- LangGraph Studio V2
Shashikant Jagtap
 
FCF- Getting Started in Cybersecurity 3.0
FCF- Getting Started in Cybersecurity 3.0FCF- Getting Started in Cybersecurity 3.0
FCF- Getting Started in Cybersecurity 3.0
RodrigoMori7
 
How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdf
How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdfHow Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdf
How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdf
Rejig Digital
 

Enterprise AIR Development for JavaScript Developers

  • 1. Andre Charland ([email protected]), Alexei White ([email protected]) Nitobi Software, ltd. ENTERPRISE AIR FOR JAVASCRIPT DEVELOPERS
  • 2. Flex or Ajax? Spaz (Twitter client) http://funkatron.com/index.php/site/comments/spaz_a_twitter_client_for_mac_os_x_windows_and_linux/
  • 3. Flex or Ajax? iFreelance http://www.pixelfumes.com/blog/aug07/iFreelance.zip
  • 4. Flex or Ajax? Pownce http://www.pownce.com
  • 5. About Us Andre Charland Nitobi Usability & RIA Ajax Component suite Design and Development Alexei White Nitobi Developer, Designer RIA (Ajax, Flash, etc) Nintendo, RobotReplay, SayZu
  • 7. The Nitobi Perspective – Components Ajax User Interface Component suite (9) Cross platform Java ASP.NET/ASP PHP Coldfusion
  • 8. The Nitobi Perspective - Services Enterprise Web Systems Development UI Visioning and development Intranets ‘ In the field’ web systems Consumer Web Systems Development Web strategy Application development
  • 10. Weighing the Alternatives Rich Internet Applications (RIA)
  • 11. Rich Internet Applications AJAX Java WebStart Applets JavaFX Flash Flex Silverlight / WPF Adobe Integrated Runtime (AIR) (Nobody uses this) (Lame-o)
  • 12. Why RIA? User Retention Brand Development User Efficiency Steps to complete a task Training costs Uninterrupted workflow Time spent waiting*
  • 14. Drivers for RIA Adoption Browser adoption Development of web standards Tooling Accessibility User adoption Affordability Community Performance Offline capability End user requirements Ease of Distribution Download time Maturity Security Vendor Support
  • 15. AJAX Frameworks Dojo Adobe Spry Script.aculo.us Prototype Moo.fx Google Web Toolkit Mochikit Yahoo User Interface Library Direct Web Remoting (DWR) JQuery Rico ASP.NET Ajax (Atlas) CakePHP AjaxTags Django Rails-supported Sarissa SAJAX XAJAX Rialto Nitobi Backbase TIBCO Nexaweb Laszlo Telerik Infragistics IceSoft ActiveWidgets Dart Gaia Ajax.NET Ajaxium Anthem.NET AjaxAspects Bitkraft ComfortASP.NET emergetk FastPage MagicAjax.NET mxAjax Cajax Claw FURIA Guava HTS jPOP JPSpan My-BIC Kumbia NanoAjax Noculo PHPLiveX Picora Qcodo sniPEAR Symfony PAJAX PAJAJ Tigermouse XOAD PHPLiveX Picora Qcodo sniPEAR Symfony PAJAX PAJAJ Tigermouse XOAD Zephyr ADF ADL Restlet SWATO Tacos Telosys ThinkCAP JX Wicket WidgetServer Wonder XANDRA xWire ZK AJASON aSSL AjaxAC Ajax Agent Cajax Claw FURIA Guava HTS jPOP JPSpan My-BIC Kumbia` Cerny EXT JackBe Javeline JsLINB JsRia Macao OpenLink Plex Toolkit Qooxdoo IWF Zimbra AjaxTk JuiseLib AjaxCaller AjaxGears AjaxToolbox AJFORM Jx/jxs Lokris MAJAX RSLite Sack UniAjax XHConn Ajax Client Engine Ajax Queue Class Lumberjack JSLog jsTracer CAPXOUS Walter Zorn Framework SmartClient Subsys_jsHttpRequest ThyAPI TIBET twoBirds AjaxCFC JSMX WDDXAJAX Akelos AModules3 AJASON aSSL AjaxAC Ajax Agent MOJO Zapatec ComponentOne Farpoint DevExpress Janus
  • 16. Why AIR Appeals to Ajax Developers Same skill set Great offline capabilities File-system and Desktop integration Code re-use Strengths of HTML Cost of development Rapid prototyping Ease of distribution
  • 18. Ajax is better in AIR Files (The Files are in the computer) Windows & Chrome Drag and Drop Copy and Paste (better) Offline Background process Notifications Keyboard Shortcuts
  • 19. Usability Gotchas Keyboard shortcuts (tab, enter…) Throbbers / Activity indicators – no spinning IE Allow text to be copied Add functions for minimize, move, resize, close when chromeless Mouse hints (invitations)
  • 20. AIR Versus Web Desktop What the heck is a Web Desktop? How is AIR the opposite of a Web Desktop?
  • 22. What Makes up a HTML AIR App? A JS-based AIR app always includes: An HTML file An XML App Descriptor May also include: External JavaScript and CSS files Documents and images Flash files
  • 23. Hello World Untitled Document

    Main Content

    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.

    HelloWorld My Test Application HelloWorld helloworld.htm standard false true
  • 24. Think Outside the Box Creative Applications Nitobi Fisheye – in AIR Nitobi Fisheye – in Firefox SAME CODE
  • 26. Creating the Fisheye – 2/2 Application.xml DeskEye nitobi/AIR/DeskEye The Nitobi Fisheye running in an Adobe AIR environment © 2007 Nitobi Inc. index.html C:\dev\air>adt –package DeskEye.air application.xml * C:\dev\air>
  • 27. A Hypothetical Enterprise App The requirements: Allow in-the-field reps to access SF.com DB Make changes offline Take a VCARD from an email and easily import it into the application Support Mac / PC / Linux (1.0) Branded UI Export contacts as VCARDS for use in Outlook etc.
  • 28. Solution: Salesforce Customer Manager SalesForce API (Salesforce.com AJAX Connector 8.0) AIR Ajax Client for SalesForce API Online/Offline (servicemonitor.swf) Drag and Drop File Parsing (Vcard) Saving XML Files to disk
  • 29. Yup. Some simple examples. In JavaScript? Really?
  • 30. Problem 1 - Socket Communication How do we communicate with a foreign web service? Model for socket communication is flexible Cross domain OK Tools for handling sparse connections Upload files Use non-supported protocols
  • 31. Monitoring Remote WS URLLoader simplifies XHR madness Start with an existing web service: http://www.nitobi.com/air/customerservice It returns XML:
  • 32. Monitoring Remote WS Build a web form in an HTML page: Perform a URLRequest to retrieve the data based on the keyword.

    Customer Search:


    function performSearch() { var url = "http://www.nitobi.com/air/customerservice?name=" + 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. Monitoring Remote WS Grab the result, convert to an XML document JSON is possible but requires extra steps Current security model inhibits use of eval(); function displayResults(event){ var loader2=event.target; var parser = new DOMParser(); var doc = parser.parseFromString(loader2.data,"text/xml"); var companyList = doc.getElementsByTagName("company"); var resultString = "" for (var i = 0; i < companyList.length; i++) { resultString += companyList[i].firstChild.nodeValue + ", "; } document.getElementById('resultsBlock').innerHTML = resultString; }
  • 34. Going Offline Toolbox for working offline helps with business applications. Monitor network connectivity with servicemonitor.swf Use local SQL database to cache data Reconnect later Transmit
  • 35. Going Offline with servicemonitor.swf Checks connectivity to website or socket connection Periodic polling
  • 36. Going Offline with servicemonitor.swf Use of external SWF library Checking availability of particular URL: Checking availability of particular socket: 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(); }
  • 37. Drag and Drop File type associations Drag-on behavior Bidirectional
  • 38. Drag and Drop Add event listeners Accept onEnter Accept onDrop 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. Drag and Drop Draw the grid from the CSV data: function displayGrid(csvdata) { dataSet = csvdata.split("\n"); for (i = 0; i "; for (i = 0; i "; for (b = 0; b " + dataSet[i][b] + ""; } else { resString += ""; } } resString += ""; } resString += "
    "; document.getElementById('tableData').innerHTML = resString; }
  • 40. File IO – Saving back to Excel Serialize your data to a string: function serializeToXLS() { var resString = ""; for (i = 0; i "; for (b = 0; b " + dataSet[i][b] + ""; } else { resString += "” } } resString += ""; } resString += "
    " + document.forms["csvForm"]["c" + b + "_" + i].value + "
    "; return resString; } JavaScript String
  • 41. File IO – Saving back to Excel Use FileStream to write to the disk Deposit file on Desktop or any other location OS Independent Charset aware. function saveData() { var file = air.File.desktopDirectory.resolvePath("out.xls"); var stream = new air.FileStream(); stream.open(file, air.FileMode.WRITE ); stream.writeMultiByte( serializeToXLS(), air.File.systemCharset ); stream.close(); }
  • 42. Changes to Ajax Security Beta 2 introduces improved security model Different security sandboxes Prevent Cross site Scripting Script Injection
  • 43. What does it all mean?
  • 44. Market Opportunities API Libraries File Libraries Advanced features – syncing, etc.. Casual games Downloadable games
  • 45. AIR Resources http://www.nitobi.com/air/ Enterprise Ajax www.enterpriseajax.com Kevin Hoyt’s AIR Examples http://blog.kevinhoyt.org/2007/06/27/35-air-examples-for-javascript-developers/ AIR for JavaScript Developers (Pocket Guide) http://ajaxian.com/archives/adobe-air-free-book-download Adobe Labs Ajax Resources http://labs.adobe.com/technologies/air/develop_ajax.html Dreamweaver Extension for AIR http://labs.adobe.com/wiki/index.php/AIR:Dreamweaver_CS3_Extension AIR Downloads http://labs.adobe.com/downloads/air.html
  • 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]