OpenFlux and Flex 4
By Ryan Campbell
Friday, May 15, 2009

About This Session
• OpenFlux vs. Flex 4
• Component / Model
• Views
• Controllers
• Metadata
• Layouts
• Virtualization
• Extending Components vs Adding Controllers
• DataGrid Component
• OpenFlux Independent of Flex
Friday, May 15, 2009

What is OpenFlux?
Friday, May 15, 2009

OpenFlux is:
• Lightweight MVC Component Framework
• Makes Custom Components Easier
• Works with Flex 3, Flex 4 and AS3
• Open source, licensed under MIT
• Currently at version Beta 3
Friday, May 15, 2009

OpenFlux vs. Flex 4
Friday, May 15, 2009

Major Flex 4 Similarities
• Component logic is separate from view logic
• Supports custom layouts
• Less code duplication / monkey patching
compared to Flex 3
• Both run on computers?
Friday, May 15, 2009

Major Flex 4 Differences
• OpenFlux separates logic into controllers
• Flex 4, keeps logic in the component and
base classes (same as Flex 3)
• OpenFlux focuses on being lightweight
• Flex 4 is actually pretty huge
Friday, May 15, 2009

Component / Model
Friday, May 15, 2009

Component / Model
• Contains no logic
• Only contains public properties
• Extends FluxComponent
• FluxComponent handles attaching
controllers and views
Friday, May 15, 2009

Component / Model
EXAMPLE:
Friday, May 15, 2009

Views
Friday, May 15, 2009

Views
• OpenFlux views implement IFluxView
• Flex 4 views extend Skin (which extends
Group)
• OpenFlux uses Degrafa
• Flex 4 uses FXG
Friday, May 15, 2009

Views
EXAMPLE:
Friday, May 15, 2009

Controllers
Friday, May 15, 2009

Controllers
• OpenFlux separates component logic in to
multiple controllers
• Flex 4 doesn’t have controllers
• Listen for events and modify the model
• Don’t need drag’n drop? Don’t include it!
• Add / remove controllers even at runtime
Friday, May 15, 2009

Controllers
EXAMPLE:
Friday, May 15, 2009

Metadata
Friday, May 15, 2009

Metadata
• OpenFlux has 7 different [Metadata] tags
• Uses custom metadata to reduce code
duplication
• Dependency Injection
• Handles adding/removing event listeners
Friday, May 15, 2009

Metadata
Component
[Capacitor]
[DefaultSetting(property=\"value\"]
Controller
[ViewHandler(event=\"click\", handler=\"clickHandler\")]
[EventHandler(event=\"click\", handler=\"clickHandler\")]
[ViewContract]
[ModelAlias]
Common
[StyleBinding]
Friday, May 15, 2009

Metadata
EXAMPLE:
Friday, May 15, 2009

Layouts
Friday, May 15, 2009

OpenFlux Layouts
• Implement ILayout (4 methods)
• Optionally implement IDragLayout (2 more
methods)
• Optionally extend LayoutBase (handles 2
ILayout methods for you)
• HorizontalLayout is 132 lines of code
Friday, May 15, 2009

Flex 4 Layouts
• Don’t implement an interface
• Must extend LayoutBase
• Also handle virtualization (with
DataGroup)
• HorizontalLayout is 1,720 lines of code
Friday, May 15, 2009

Layouts
EXAMPLE:
Friday, May 15, 2009

Virtualization
Friday, May 15, 2009

Virtualization
• Flex 4 virtualization is handled by DataGroup and
Layouts
• OpenFlux components know nothing about
virtualization
• Handled by VirtualCollection
• Looks like a regular array collection to the
component
Friday, May 15, 2009

Virtualization
<VirtualCollection id=\"virtual\"
data=\"{ someHugeDataSet }\"
position=\"{ scrollBar.position }\"
size=\"30\" />
<List id=”list” data=\"{ virtual }\" />
<ScrollBar id=\"scrollBar“
max=\"{ someHugeDataSet.length - virtual.size }\" />
Friday, May 15, 2009

Virtualization
EXAMPLE:
Friday, May 15, 2009

Extending, extending,
extending
Friday, May 15, 2009

Extending a Component
<AutoCompletePromptTextInput id=”input”
prompt=”First Name”
items=”{ names }” />
Adding Controllers
<TextInput id=”input”>
<PromptController prompt=”First Name” />
<AutoCompleteController items=”{ names }” />
</TextInput>
Friday, May 15, 2009

DataGrid & Tree
Friday, May 15, 2009

DataGrid & Tree
• Built over a weekend (including Tree and
TreeDataGrid)
• Extends from List. Header is even
horizontal List.
• One new controller for DataGrid, One for
Tree
Friday, May 15, 2009

DataGrid & Tree
EXAMPLE:
Friday, May 15, 2009

OpenFlux Independence
Friday, May 15, 2009

What’s that mean?
• Use OpenFlux components with or without
Flex.
• Lighter weight implementations of Flex
interfaces
• Still supports MXML, CSS, Data Binding and
Resource Bundles
• Compiled SWFs as small as 75KB without RSL
Friday, May 15, 2009

What was replaced?
• UIComponent, SystemManager, LayoutManager
• Application, Label and Image
• Holy crap that was a lot of work...
Friday, May 15, 2009

What was kept?
• StyleManager, BindingManager, ResourceManager
we’re keeping (because we have to)
• Events and interfaces
• Any other classes that don’t reference
UIComponent
Friday, May 15, 2009

OpenFlux App
EXAMPLE:
Friday, May 15, 2009

www.openflux.org
Blog, Examples, Docs, Source
Code and Google Group
Friday, May 15, 2009