Transcript
Page 1: echo-o & Adobe Air App Dev - BarCamp Saigon 1

by Tran Nhuan Quang @ Multincwith guidance from Huy Zing

BarCamp Saigon 1November 15, 2008

Page 2: echo-o & Adobe Air App Dev - BarCamp Saigon 1

Adobe AIR overviewDevelop multi platform desktop appsUse web-based technologies

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

Page 3: echo-o & Adobe Air App Dev - BarCamp Saigon 1

How Echo-o desktop client helpsSimultaneously monitor feedbacks and do

presentation on a single screenOnly shown when needed

Page 4: echo-o & Adobe Air App Dev - BarCamp Saigon 1

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

Page 5: echo-o & Adobe Air App Dev - BarCamp Saigon 1

AIR application structureA descriptor fileUIs

HTMLCSSFlash

ControllersJavascriptShockware Flash

Page 6: echo-o & Adobe Air App Dev - BarCamp Saigon 1

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

Page 7: echo-o & Adobe Air App Dev - BarCamp Saigon 1

Demo timeExamine Echo-o Adobe AIR Application

Page 8: echo-o & Adobe Air App Dev - BarCamp Saigon 1

Problems and solutionsSystem chrome vs. custom chrome

System chrome Custom chrome

Page 9: echo-o & Adobe Air App Dev - BarCamp Saigon 1

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>

Page 10: echo-o & Adobe Air App Dev - BarCamp Saigon 1

Problems and solutionsText rotation

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

var rotatedImage = customIcon.getRotatedPNGData();

Page 11: echo-o & Adobe Air App Dev - BarCamp Saigon 1

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

Page 12: echo-o & Adobe Air App Dev - BarCamp Saigon 1

Problems and solutionsHow to detect if the webpage is being run

inside AIR application

If (window.parentSandboxBridge)// inside AIR app

else// otherwise

Page 13: echo-o & Adobe Air App Dev - BarCamp Saigon 1

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

Page 14: echo-o & Adobe Air App Dev - BarCamp Saigon 1

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


Top Related