Enterprise AIR Development for JavaScript Developers

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

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

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

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?

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

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]

Enterprise AIR Development for JavaScript Developers

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Enterprise AIR Development for JavaScript Developers (20)

More from AndreCharland (19)

Recently uploaded (20)

Enterprise AIR Development for JavaScript Developers