ryan campbell - openflux and flex 4

OpenFlux and Flex 4By 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


What is OpenFlux?


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


OpenFlux vs. Flex 4


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?


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


Component / Model


Component / Model

• Contains no logic

• Only contains public properties

• Extends FluxComponent

• FluxComponent handles attaching controllers and views


Component / Model

EXAMPLE:


Views


Views

• OpenFlux views implement IFluxView

• Flex 4 views extend Skin (which extends Group)

• OpenFlux uses Degrafa

• Flex 4 uses FXG


Views

EXAMPLE:


Controllers


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


Controllers

EXAMPLE:


Metadata


Metadata

• OpenFlux has 7 different [Metadata] tags

• Uses custom metadata to reduce code duplication

• Dependency Injection

• Handles adding/removing event listeners


Metadata

[ViewHandler(event="click", handler="clickHandler")][EventHandler(event="click", handler="clickHandler")][ViewContract][ModelAlias]

Controller

Component

[Capacitor][DefaultSetting(property="value"]

Common

[StyleBinding]


Metadata

EXAMPLE:


Layouts


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


Flex 4 Layouts

• Don’t implement an interface

• Must extend LayoutBase

• Also handle virtualization (with DataGroup)

• HorizontalLayout is 1,720 lines of code


Layouts

EXAMPLE:


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

Virtualization


Virtualization

<VirtualCollection id="virtual"data="{ someHugeDataSet }"position="{ scrollBar.position }"size="30" />

<List id=”list” data="{ virtual }" />

<ScrollBar id="scrollBar“max="{ someHugeDataSet.length - virtual.size }" />


Virtualization

EXAMPLE:


Extending, extending, extending


Extending a Component

<TextInput id=”input”> <PromptController prompt=”First Name” /> <AutoCompleteController items=”{ names }” /></TextInput>

<AutoCompletePromptTextInput id=”input” prompt=”First Name” items=”{ names }” />

Adding Controllers


DataGrid & Tree


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


DataGrid & Tree

EXAMPLE:


OpenFlux Independence


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


What was replaced?

• UIComponent, SystemManager, LayoutManager

• Application, Label and Image

• Holy crap that was a lot of work...


What was kept?

• StyleManager, BindingManager, ResourceManager we’re keeping (because we have to)

• Events and interfaces

• Any other classes that don’t reference UIComponent


OpenFlux App

EXAMPLE:


www.openflux.orgBlog, Examples, Docs, Source

Code and Google Group


http://www.openflux.org

http://www.openflux.org

ryan campbell - openflux and flex 4

Technology

eventquot

handlerquot

2009 datagrid

code friday

tree friday

friday

openflux

2009 openflux