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/

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

iFreelance

http://www.pixelfumes.com/blog/aug07/iFreelance.zip

Flex or Ajax? Pownce http://www.pownce.com

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

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

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

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)

Weighing the Alternatives

Rich Internet Applications AJAX Java WebStart Applets JavaFX Flash Flex Silverlight / WPF Adobe Integrated Runtime (AIR) (Nobody uses this) (Lame-o)

AJAX

Java

WebStart

Applets

JavaFX

Flash

Flex

Silverlight / WPF

Adobe Integrated Runtime (AIR)

Why RIA? User Retention Brand Development User Efficiency Steps to complete a task Training costs Uninterrupted workflow Time spent waiting*

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

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

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

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

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)

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 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

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=&quot;1.0&quot; encoding=&quot;utf-8&quot; ?> <application xmlns=&quot;http://ns.adobe.com/air/application/1.0.M5&quot; appId=&quot;com.example.ExampleApplication&quot; version=&quot;1.0 Beta&quot;> <name>HelloWorld</name> <description>My Test Application</description> <copyright></copyright> <initialWindow> <title>HelloWorld</title> <content>helloworld.htm</content> <systemChrome>standard</systemChrome> <transparent>false</transparent> <visible>true</visible> </initialWindow> <icon></icon> <fileTypes> </fileTypes> </application>

Think Outside the Box Creative Applications Nitobi Fisheye – in AIR Nitobi Fisheye – in Firefox SAME CODE

Creative Applications

Creating the Fisheye – 1/2 <img src=&quot;grabby.png&quot; onmousedown=&quot;window.nativeWindow.startMove();&quot; />

Creating the Fisheye – 2/2 Application.xml <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> <application appId=&quot;com.adobe.nitobiDeskEye&quot; version=&quot;1.0&quot; xmlns=&quot;http://ns.adobe.com/air/application/1.0.M4&quot;> <name>DeskEye</name> <installFolder>nitobi/AIR/DeskEye</installFolder> <description>The Nitobi Fisheye running in an Adobe AIR environment</description> <copyright>© 2007 Nitobi Inc.</copyright> <rootContent systemChrome =&quot;none&quot; transparent =&quot;true&quot; visible =&quot;true&quot; width =&quot;800&quot; height =&quot;300&quot;> index.html </rootContent> </application> C:devair>adt –package DeskEye.air application.xml * C:devair>

Application.xml

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.

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

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?

Yup. Some simple examples.

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

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:

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=&quot;performSearch(); return false;&quot;> <p>Customer Search: <input type=&quot;text&quot; name=&quot;customerName&quot; onkeyup=&quot;performSearch();&quot; /> <input type=submit /></p> </form> <br /> <div id=&quot;resultsBlock&quot;></div> function performSearch() { var url = &quot;http://www.nitobi.com/air/customerservice?name=&quot; + document.forms[0].customerName.value; var request = new air.URLRequest(url); var loader = new air.URLLoader(); loader.dataFormat=air.URLLoaderDataFormat.TEXT; loader.addEventListener(air.Event.COMPLETE,displayResults); loader.load(request); } air.ProgressEvent.PROGRESS, SECURITY_ERROR, OPEN, COMPLETE, HTTP_STATUS, IO_ERROR

Build a web form in an HTML page:

Perform a URLRequest to retrieve the data based on the keyword.

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,&quot;text/xml&quot;); var companyList = doc.getElementsByTagName(&quot;company&quot;); var resultString = &quot;&quot; for (var i = 0; i < companyList.length; i++) { resultString += companyList[i].firstChild.nodeValue + &quot;, &quot;; } document.getElementById('resultsBlock').innerHTML = resultString; }

Grab the result, convert to an XML document

JSON is possible but requires extra steps

Current security model inhibits use of eval();

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

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

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=&quot;application/x-shockwave-flash&quot; src=&quot;servicemonitor.swf&quot; ></script>

Use of external SWF library

Checking availability of particular URL:

Checking availability of particular socket:

Drag and Drop File type associations Drag-on behavior Bidirectional

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); }

Add event listeners

Accept onEnter

Accept onDrop

Drag and Drop Draw the grid from the CSV data: function displayGrid(csvdata) { dataSet = csvdata.split(&quot;
&quot;); for (i = 0; i <dataSet.length; i++) { dataSet[i] = dataSet[i].split(&quot;,&quot;); } var resString = &quot;<form name=&quot;csvForm&quot;><table>&quot;; for (i = 0; i <dataSet.length; i++) { resString += &quot;<tr>&quot;; for (b = 0; b <dataSet[i].length; b++) { if (!isNumeric(dataSet[i][b]) || (dataSet[i][b].length < 1)) { resString += &quot;<td style=&quot;background-color: #f0f0f0; font-weight:bold; color:#000099;&quot;>&quot; + dataSet[i][b] + &quot;</td>&quot;; } else { resString += &quot;<td><input type=text name=&quot;c&quot; + b + &quot;_&quot; + i + &quot;&quot; value=&quot;&quot; + dataSet[i][b] + &quot;&quot; size=&quot;6&quot;></td>&quot;; } } resString += &quot;</tr>&quot;; } resString += &quot;</table></form>&quot;; document.getElementById('tableData').innerHTML = resString; }

Draw the grid from the CSV data:

File IO – Saving back to Excel Serialize your data to a string: function serializeToXLS() { var resString = &quot;<table>&quot;; for (i = 0; i <dataSet.length; i++) { resString += &quot;<tr>&quot;; for (b = 0; b <dataSet[i].length; b++) { if (!isNumeric(dataSet[i][b]) || (dataSet[i][b].length < 1)) { resString += &quot;<td style=&quot;background-color: #f0f0f0; font-weight:bold; color:#000099;&quot;>&quot; + dataSet[i][b] + &quot;</td>&quot;; } else { resString += &quot;<td>&quot; + document.forms[&quot;csvForm&quot;][&quot;c&quot; + b + &quot;_&quot; + i].value + &quot;</td>” } } resString += &quot;</tr>&quot;; } resString += &quot;</table>&quot;; return resString; } JavaScript String

Serialize your data to a 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(&quot;out.xls&quot;); var stream = new air.FileStream(); stream.open(file, air.FileMode.WRITE ); stream.writeMultiByte( serializeToXLS(), air.File.systemCharset ); stream.close(); }

Use FileStream to write to the disk

Deposit file on Desktop or any other location

OS Independent

Charset aware.

Changes to Ajax Security Beta 2 introduces improved security model Different security sandboxes Prevent Cross site Scripting Script Injection

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

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

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]