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? ,[object Object],[object Object]

About Us ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

The Nitobi Perspective – Components ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

The Nitobi Perspective - Services ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

[object Object],Rich Internet Applications (RIA)

Rich Internet Applications ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],(Nobody uses this) (Lame-o)

Why RIA? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

32% SAVINGS http://www.developer.com/java/other/article.php/3554271

Drivers for RIA Adoption ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

AJAX Frameworks ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Why AIR Appeals to Ajax Developers ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Ajax is better in AIR ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Usability Gotchas ,[object Object],[object Object],[object Object],[object Object],[object Object]

AIR Versus Web Desktop ,[object Object],[object Object]

What Makes up a HTML AIR App? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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 ,[object Object],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 ,[object Object],<?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:evir>adt –package DeskEye.air application.xml * C:evir>

A Hypothetical Enterprise App ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Solution: Salesforce Customer Manager ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

[object Object],In JavaScript? Really?

Problem 1 - Socket Communication ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Monitoring Remote WS ,[object Object],[object Object],[object Object]

Monitoring Remote WS ,[object Object],[object Object],<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 ,[object Object],[object Object],[object Object],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 ,[object Object],[object Object],[object Object],[object Object],[object Object]

Going Offline with servicemonitor.swf ,[object Object],[object Object]

Going Offline with servicemonitor.swf ,[object Object],[object Object],[object Object],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 ,[object Object],[object Object],[object Object]

Drag and Drop ,[object Object],[object Object],[object Object],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 ,[object Object],function displayGrid(csvdata) { dataSet = csvdata.split(""); for (i = 0; i <dataSet.length; i++) { dataSet[i] = dataSet[i].split(","); } var resString = "<form name=amp;quot;csvFormamp;quot;><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=amp;quot;background-color: #f0f0f0; font-weight:bold; color:#000099;amp;quot;>" + dataSet[i][b] + "</td>"; } else { resString += "<td><input type=text name=amp;quot;c" + b + "_" + i + "amp;quot; value=amp;quot;" + dataSet[i][b] + "amp;quot; size=amp;quot;6amp;quot;></td>"; } } resString += "</tr>"; } resString += "</table></form>"; document.getElementById('tableData').innerHTML = resString; }

File IO – Saving back to Excel ,[object Object],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=amp;quot;background-color: #f0f0f0; font-weight:bold; color:#000099;amp;quot;>" + 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 ,[object Object],[object Object],[object Object],[object Object],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 ,[object Object],[object Object],[object Object],[object Object]

Market Opportunities ,[object Object],[object Object],[object Object],[object Object],[object Object]

AIR Resources ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à Enterprise AIR Development for JavaScript Developers

Similaire à Enterprise AIR Development for JavaScript Developers (20)

Plus de AndreCharland

Plus de AndreCharland (19)

Dernier

Dernier (20)

Enterprise AIR Development for JavaScript Developers