Learn from our experience in adapting a complex codebase like the application Buzzword to run also as an Adobe AIR application. This session addresses the architectural challenges of developing SWF files to be shared between browser and AIR versions. We’ll cover user interface considerations, such as reconciling a single browser window with multiple AIR windows, and technical issues, like problems with the Singleton pattern when using multiple native windows. Other topics include abstracting code that must call AIR only APIs and packaging code into modules that load over HTTP for browsers and load from the file system under AIR.
David Coletta Architecting A Shared Codebase For Browser And Desktop Final
1. Architecting a Shared
Codebase for Browser
and Desktop
Replace with
a graphic
White Master
David Coletta 400px tall & 290px wide
Sr. Computer Scientist
Adobe Systems Incorporated
®
1
Copyright 2008 Adobe Systems Incorporated. All Rights Reserved.
2. About me
Developer and co-founder at Virtual Ubiquity, Inc.
Career focus on collaboration software
Background in C++ and web applications
Started using Flex 2.0 alpha in January 2006
Joined Adobe in December 2007 via acquisition
Blog: TheJoyOfFlex.com
®
Copyright 2008 Adobe Systems Incorporated. All Rights Reserved.
3. Core message
Respect the platform.
®
Copyright 2008 Adobe Systems Incorporated. All Rights Reserved.
4. Challenges
User interface design
Shared code packaging
Abstracting the AIR APIs
Implementation issues
®
Copyright 2008 Adobe Systems Incorporated. All Rights Reserved.
5. User interface design
Browser AIR
®
Copyright 2008 Adobe Systems Incorporated. All Rights Reserved.
6. Demo
Demo
®
Copyright 2008 Adobe Systems Incorporated. All Rights Reserved.
7. Some UI considerations between browser app and AIR app
Installation
Automatic updates
Menu bars
Multiple windows
Transition from browser to AIR app
Opening hyperlinks
Remember-me handling
URL display
Going to sleep and waking up
Modal dialogs
Language preference
®
Copyright 2008 Adobe Systems Incorporated. All Rights Reserved.
8. Shared code packaging
Two models explored:
Browser SWFs included in AIR file and loaded at runtime
Mostly empty Applications and Modules with code linked from shared SWCs
Browser SWFs included in AIR file was preferable for us
We were already building separate modules
Looser coupling leads to faster builds
But requires use of Ant or similar tool for both development and production builds
®
Copyright 2008 Adobe Systems Incorporated. All Rights Reserved.
9. SWF loading
Browser
Organizer.swf FrameCSS.swf Resources.swf
Loads Loads
Buzzword.swf Frame.swf
Editor.swf EditorFonts.swf PDFexport.swf
AIR
Buzzword.air
Buzzword.swf Frame.swf Organizer.swf Editor.swf EditorFonts.swf PDFexport.swf Resources.swf
®
Copyright 2008 Adobe Systems Incorporated. All Rights Reserved.
10. Project structure
Frame.swf, Editor.swf, and
Organizer.swf copied here by Ant
Buzzword.swf and Frame.swf built
here
Editor.swf and Organizer.swf built and
loaded from here in browser version
®
Copyright 2008 Adobe Systems Incorporated. All Rights Reserved.
11. Abstracting AIR APIs
Tempted to write code like:
if (isAIR) {...} else {...}
Problems with this approach
It won’t work in shared code because the shared code doesn’t have access to the AIR APIs
Too easy for developers to forget that it’s shared code
Alternative approach
For each area of functionality, create an interface with two implementations
Create a broker for accessing interface instances
Put all the AIR implementations in the AIR project
Example: IPersistentSecureToken
®
Copyright 2008 Adobe Systems Incorporated. All Rights Reserved.
12. PlatformBroker
PlatformBroker
subclasses subclasses
AIRPlatformBroker FlexPlatformBroker
®
Copyright 2008 Adobe Systems Incorporated. All Rights Reserved.
13. IPersistentSecureToken
IPersistentSecureToken
implements implements
BrowserCookie EncryptedLocalStorageCookie
Uses ExternalInterface to Uses AIR
make JavaScript calls that EncryptedLocalStore API to
save and restore tokens save and restore tokens
®
Copyright 2008 Adobe Systems Incorporated. All Rights Reserved.
14. Singletons
Very convenient!
Can lead to problems when in multiple-document application
Example: frame interface
®
Copyright 2008 Adobe Systems Incorporated. All Rights Reserved.
15. Rich-text clipboard support
Browser implementation
Flash Player does not provide much clipboard handling support at all
Need to cheat with hidden DIV or IFRAME
Extremely fragile
Limits range of supported browsers
AIR implementation
Problematic because AIR Clipboard API only provides raw HTML
Need to run HTML through some kind of normalization process
Easiest approach is to run it through an HTMLLoader
®
Copyright 2008 Adobe Systems Incorporated. All Rights Reserved.
16. More implementation issues (if time)
Relaunching
Using the AIR update framework
Loading Flex menus and native menus from a single model
Internationalization and localization
Runtime CSS vs. compiled CSS
Idle tracking
®
Copyright 2008 Adobe Systems Incorporated. All Rights Reserved.
17. Core message
Respect the platform.
®
Copyright 2008 Adobe Systems Incorporated. All Rights Reserved.