1
Adobe Flex User’s Group
Introduction to Flex Application
Architecture & Frameworks
Dave Meeker & Rhazes Spell
dmeeker@roundarch.com | rspell@roundarch.com

2
Thanks for coming to
this event, and for being
a part of the Flex
Development
Community.
It is the community of
developers that have
made Flex what it is
today.
Please encourage
others to get involved!
Community Is Important

3
Who Are We?
Dave Meeker - UX Strategy Lead, Roundarch
• Working with Flex Since 2003
• Has Lead a Lot of Projects
• Loves Creative Technology Because it Allows for the Building of Better
User Experiences
• Adobe Product Advisory Panels
• Regular Conference Speaker
Rhazes Spell - Lead Interactive Developer, Roundarch
• PhD, Biomedical Engineering -- Specializes in UX and Data Visualization
• Using Flex since 2006 & Knows a Lot of Different Languages
• Specializes in Creative Technology Innovation and HCI
• Conference Speaker

4
Who Are You?
Flash Developer Learning Flex?
Seasoned ActionScript Guru?
Java / .NET / .PHP Developer?
Web Developer? (HTML, CSS, JavaScript)
Software Architect?
Project Manager?
Business Person
Project Manager?
Designer?

5
Why This Topic?
Chicago Flex User Group is New
Flex can be a bit overwhelming at first
Especially learning “the right way” to build an application
So many choices... So many opinions
It is a “Community” Topic & working together can help further define ways
to approach things
There is no single “right way”, so opinions can help

6
Architecture

7
What Architecture is Not
Software architecture is not low-level design
Individual Component Workings
Algorithms
Implementation
Software Architecture is not the data (model)
Software Architecture is not the architecture of the physical system

8
What Architecture Is
Software architecture is \"the structure of the components of a program/
system, their interrelationships, and principles and guidelines governing
their design and evolution over time.\"
Garlan and Perry, guest editorial to the IEEE Transactions on Software Engineering, April 1995
Software Architecture is:
An overall view of the solution to a problem
The high-level design of modular components and how they interact
A foundation that one can build on to solve a problem (e.g., rules, policies,
attributes, etc.)
An efficient method to meet a fixed set of well-defined attributes
Dave Meeker & Rhazes Spell, Chicago Adobe Flex User’s Group, June 2008

9
Framework(s)

10
Framework -
A system of rules, ideas or
principles that is used to plan
or decide something.

11
Framework -
A framework is an abstract
design of a set of related
applications in a particular
domain.

12
Framework -
A logical structure for
classifying and organizing
complex information.

13
The Adobe Flex Framework
Flex is a Framework for building .SWF files
“Movies” / “Files” that run in the Adobe Flash Player
ActionScript
MXML
Flex Compiler
Output >>> .SWF

14
Using Frameworks in RIA Development
Why Use a Framework?
Should allow you to deploy incremental changes to your applications and
allow team members to work independently from one another because
things are decoupled
Forces you and your team to implement code in a way that promotes
consistent coding, fewer bugs, and more flexible applications
Allows anyone working on the team to easily test and debug the code,
even code that they didn't write
Allows for easy re-use of code

15
Using Frameworks in RIA Development
What should a framework include?
Wrappers
Simplifies the interface to a technology/language
Reduces & eliminates repetitive tasks
Increases application flexibility through abstraction
Re-usable regardless of high level design considerations
Architecture
Methodologies

16
Using Frameworks in RIA Development
What should a framework include?
Wrappers
Architecture
Helps to manage a collection of discrete objects
Implements a set of specific design elements
Methodologies

17
Using Frameworks in RIA Development
What should a framework include?
Wrappers
Architecture
Methodologies
Enforce the adherence to a consistent design approach
Decouples the dependencies of objects
Typically Re-usable regardless application requirements

18
Frameworks: What is a Wrapper ?
A wrapper is way of repackaging a function
or set of functions (related or not) to achieve
one or more of the following goals:
* Simplification of use
* Consistency in interface
* Enhancement of core functionality
* Collecting discrete processes into a
logical association (an object)

19
Frameworks: Architecture
Obviously, a framework needs to have a design/
architecture.
A Framework’s architecture is separate from the collection
of wrappers that it implements and from the enforcement
of a specific implementation methodology.
An architecture implements associations between
objects--inheritance, container, proxy, collection, etc.
If you don’t like how your framework is architected... you
can ignore it or replace it. (Well, in the beginning
anyway...)
Architectures can and are useful because they create a
re-usable structure.

20
Frameworks: Methodology
Method - a way of doing something
-ology - in a \"scientific\" manner - designed, consistent,
repeatable, testable, proven
Methodology: A body of practices, procedures,
and rules used by those who work in a discipline.
• While architectures deal with the associations between things, a
methodology deals with the interaction between things.
• Most Methodologies are implemented to assist in the activity of:
• Communicating between objects
• Managing data persistence
• Responding to User Events
• Within those activities are architectures that associate
interrelated objects.

21
and... Design Patterns
Design patterns are both architectures and methodologies
Structural Patterns = Architecture
Creational Patterns / Behavioral Patterns = Methodologies
Because their usage enforces a particular method of interaction
When Implementing Behavioral Patterns, the Entire Application has
to Adhere to that Implementation

22
Frameworks For Flex RIAs

23
RIAs don’t do well in waterfalls
The Traditional “Waterfall” Project
Approach has typically NOT been
successful for RIA Projects
A Great User Experience can hardly be
defined on paper up front and then
developed months later by a different
group
Teams typically shouldn’t be isolated or
work in any sort of a vacuum
You can’t effectively communicate discrete
User Experience elements (animation,
depth, physics, etc) on paper alone.

24
Iterative & Agile = Happy Apps!
Agile Development - Choose an Approach
that works best for you and your client
and the type of project you are building
Agile Doesn’t mean Chaos
Iterative Releases
Client/User Acceptance Releases
Public “Perpetual” Beta Concept

25
Flex Application Frameworks

26
Things to Consider
Thanks to Ali Mills & Like Bays (Bunchball / Pattern Park) for all the
Research & Hard Work & Following Info! (Silicon Valley Flex Users Group)
Using an Application Framework can make you more efficient than using
Flex by itself
Some frameworks are more effective than others
Relying on a framework without knowing it well enough to complete your
project successfully can make you very, very, unhappy!

27
A Framework Should Be:
Encourages clear
Approachable
encapsulation
Documentation
Accommodates Change
Adoption
Supports Parallel Development
Active Project Community
Allows for Modular Applications
Code/Shared Knowledge
Flexible
Scalable
Open Source
Testable Code
Context Independent

28
Evaluated Frameworks
Slide MVCS
ARP Model-Gleu:Flex
Servebox Cairngorm
Guasax PureMVC
Flest No Framework

29
Evaluated Flex Frameworks
Slide MVCS
ARP Model-Gleu:Flex
Servebox Cairngorm
Guasax PureMVC
Flest No Framework

30
PureMVC Vs Cairngorm
PureMVC
Created By Cliff Hall
Harder to Learn
Seemingly More Flexible
Singletons are Hidden
Cairngorm
Named after a Mountain
Created by Steven Webster
Officially used by Adobe Consulting
Highly Singleton-Based

31
PureMVC Vs Cairngorm
PureMVC Cairngorm
Model Model
View View
Controller Controller
Command Command
Facade CairngormEvent
Proxy Delegate
Mediator Service
Observer ValueObjects
Notification

32
Final Thoughts...
You don’t NEED to use a Framework
Cairngorm is probably easier to learn than PureMVC (But neither are “easy”)
Cairngorm is “The Standard” in today’s enterprise market
If you are using Cairngorm take a look at Cairngen to save LOTS of typing
PureMVC is arguably more flexible and easier to develop on once you know it
PureMVC is implemented in multiple languages (Perl, Java, Ruby, Python...)
PureMVC seems more efficient overall
Both PureMVC & Cairngorm require a bit of study

33
Building a Bridge Between Adobe AIR and Java
http://merapiproject.net

34
What is Merapi?
Merapi is a bridge between applications written in Java and those
running in and created for Adobe AIR™ (Adobe Integrated Runtime™).
Merapi has been designed to run on a user's machine, along with an
Adobe AIR™application and provide a direct path between the Adobe
AIR™ framework and Java, exposing the power and overall capabilities
of the user's operating system, including 3rd party hardware devices.

35
Why Did We Create Merapi?
For Adobe AIR
To have access to the features of the Java
language and the myriad of Java libraries
For Java
To have access to the powerful user interface
framework available in Adobe Flex / AIR
applications

36
How Did We Create Merapi?
Flex <-> Java
Communication on a local socket
using Adobe open source libraries
for AMF serialization

37
Ways to Use Merapi
Control Lego MindStorm Robots from an Adobe AIR game.
Connect an AIR™ application to a Wii remote
Perform TWAIN Capturing of Video or Images from a camera or
scanner
Use AIR™ to talk to a phone plugged in via USB
Connect an AIR application to system hardware and OS
properties
Connect an AIR application UI to a GPS device
Sending MIDI signals to instruments over a network using a Flex
application GUI running in the AIR framework
Create a new UI for a command-line Java application or Java
Interface

38
Open Discussion / Q&A