echo-o & Adobe Air App Dev - BarCamp Saigon 1

by Tran Nhuan Quang @ Multinc with guidance from Huy Zing BarCamp Saigon 1 November 15, 2008

Adobe AIR overview

Develop multi platform desktop apps

Use web-based technologies

Adobe Flash

Adobe Flex

HTML and Ajax (will be discussed only)

How Echo-o desktop client helps

Simultaneously monitor feedbacks and do presentation on a single screen

Only shown when needed

Why Adobe AIR?

Use of existing web development knowledge

Time saving on review/study traditional desktop programming languages

Eg. Java, .NET, etc

Platform independence

Facility for communication between server and client using Javascript

AIR application structure

A descriptor file

UIs

HTML

CSS

Flash

Controllers

Javascript

Shockware Flash

Tools

Adobe Dreamweaver

Adobe AIR extension for Adobe Dreamweaver

Adobe AIR Runtime 1.1 (current version)

Adobe AIR SDK 1.1 (current version)

Demo time

Examine Echo-o Adobe AIR Application

Problems and solutions

System chrome vs. custom chrome

System chrome Custom chrome

Dynamically create system tray icon

Coordinate with Adobe Shockware Flash

var customIcon = new window . runtime .customIcon(“1”, “black”); air.NativeApplication.nativeApplication.icon.bitmaps = new runtime .Array(customIcon.bitmapData()); < script src ="assets/customIcon.swf" type ="application/x-shockwave-flash"> </ script > Different stages of icon

Text rotation

var customIcon = new window . runtime .customIcon(“Echo-o”, “#ABC”); var rotatedImage = customIcon.getRotatedPNGData();

Launch AIR app from a webpage

Use of Adobe Shockware Flash

_air = _loader.load( new URLRequest(“ http://airdownload.adobe.com/air/browserapi/air.swf”) ); _appInstalled = _air.getApplicationVersion(appID, pubID); if (_appInstalled) _air.launchApplication(appID, pubID, my_arguments); else _air.installApplication( _appURL, _airVersion, my_arguments);

How to detect if the webpage is being run inside AIR application

If ( window . parentSandboxBridge ) // inside AIR app else // otherwise

How to properly detect mouse over and mouse out events on a window

mouse over

mouse out

window.document .getElementByTagName('body').onmouseover = bindFunctionA(); window . nativeWindow .stage.addEventListener( air.Event.MOUSE_LEAVE , bindFunctionB());

http://multinc.com/ http://www.adobe.com/products/air/