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.

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.