echo-o & adobe air app dev - barcamp saigon 1

by Tran Nhuan Quang @ Multincwith guidance from Huy Zing

BarCamp Saigon 1November 15, 2008

Adobe AIR overviewDevelop multi platform desktop appsUse web-based technologies

Adobe FlashAdobe Flex HTML and Ajax (will be discussed only)

How Echo-o desktop client helpsSimultaneously monitor feedbacks and do

presentation on a single screenOnly shown when needed

Why Adobe AIR?Use of existing web development knowledgeTime saving on review/study traditional

desktop programming languagesEg. Java, .NET, etc

Platform independenceFacility for communication between server

and client using Javascript

AIR application structureA descriptor fileUIs

HTMLCSSFlash

ControllersJavascriptShockware Flash

ToolsAdobe DreamweaverAdobe AIR extension for Adobe DreamweaverAdobe AIR Runtime 1.1 (current version)Adobe AIR SDK 1.1 (current version)

Demo timeExamine Echo-o Adobe AIR Application

Problems and solutionsSystem chrome vs. custom chrome

System chrome Custom chrome

Problems and solutionsDynamically create system tray icon

Coordinate with Adobe Shockware Flash

Different stages of icon

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>

Problems and solutionsText rotation

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

var rotatedImage = customIcon.getRotatedPNGData();

Problems and solutionsLaunch 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);

Problems and solutionsHow to detect if the webpage is being run

inside AIR application

If (window.parentSandboxBridge)// inside AIR app

else// otherwise

Problems and solutionsHow 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/