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

1,960 views
1,904 views

Published on

For BarCamp Saigon 1, Multinc describes their experiences developing an Adobe AIR app for http://echo-o.com

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,960
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
33
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. by Tran Nhuan Quang @ Multinc with guidance from Huy Zing BarCamp Saigon 1 November 15, 2008
  2. 2. Adobe AIR overview <ul><li>Develop multi platform desktop apps </li></ul><ul><li>Use web-based technologies </li></ul><ul><ul><li>Adobe Flash </li></ul></ul><ul><ul><li>Adobe Flex </li></ul></ul><ul><ul><li>HTML and Ajax (will be discussed only) </li></ul></ul>
  3. 3. How Echo-o desktop client helps <ul><li>Simultaneously monitor feedbacks and do presentation on a single screen </li></ul><ul><li>Only shown when needed </li></ul>
  4. 4. Why Adobe AIR? <ul><li>Use of existing web development knowledge </li></ul><ul><li>Time saving on review/study traditional desktop programming languages </li></ul><ul><ul><li>Eg. Java, .NET, etc </li></ul></ul><ul><li>Platform independence </li></ul><ul><li>Facility for communication between server and client using Javascript </li></ul>
  5. 5. AIR application structure <ul><li>A descriptor file </li></ul><ul><li>UIs </li></ul><ul><ul><li>HTML </li></ul></ul><ul><ul><li>CSS </li></ul></ul><ul><ul><li>Flash </li></ul></ul><ul><li>Controllers </li></ul><ul><ul><li>Javascript </li></ul></ul><ul><ul><li>Shockware Flash </li></ul></ul>
  6. 6. Tools <ul><li>Adobe Dreamweaver </li></ul><ul><li>Adobe AIR extension for Adobe Dreamweaver </li></ul><ul><li>Adobe AIR Runtime 1.1 (current version) </li></ul><ul><li>Adobe AIR SDK 1.1 (current version) </li></ul>
  7. 7. Demo time <ul><li>Examine Echo-o Adobe AIR Application </li></ul>
  8. 8. Problems and solutions <ul><li>System chrome vs. custom chrome </li></ul>System chrome Custom chrome
  9. 9. Problems and solutions <ul><li>Dynamically create system tray icon </li></ul><ul><ul><li>Coordinate with Adobe Shockware Flash </li></ul></ul>var customIcon = new window . runtime .customIcon(“1”, “black”); air.NativeApplication.nativeApplication.icon.bitmaps = new runtime .Array(customIcon.bitmapData()); < script src =&quot;assets/customIcon.swf&quot; type =&quot;application/x-shockwave-flash&quot;> </ script > Different stages of icon
  10. 10. Problems and solutions <ul><li>Text rotation </li></ul>var customIcon = new window . runtime .customIcon(“Echo-o”, “#ABC”); var rotatedImage = customIcon.getRotatedPNGData();
  11. 11. Problems and solutions <ul><li>Launch AIR app from a webpage </li></ul><ul><ul><li>Use of Adobe Shockware Flash </li></ul></ul>_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);
  12. 12. Problems and solutions <ul><li>How to detect if the webpage is being run inside AIR application </li></ul>If ( window . parentSandboxBridge ) // inside AIR app else // otherwise
  13. 13. Problems and solutions <ul><li>How to properly detect mouse over and mouse out events on a window </li></ul><ul><ul><li>mouse over </li></ul></ul><ul><ul><li>mouse out </li></ul></ul>window.document .getElementByTagName('body').onmouseover = bindFunctionA(); window . nativeWindow .stage.addEventListener( air.Event.MOUSE_LEAVE , bindFunctionB());
  14. 14. http://multinc.com/ http://www.adobe.com/products/air/

×