ryan campbell - openflux and flex 4
DESCRIPTION
Now that Flex 4 is getting closer, find out what that means for OpenFlux. Learn when is best to use OpenFlux and when is best to use Flex 4 for custom components. I'll show the differences and similarities between the two architectures giving you a better understanding of both frameworks and how well they can actually work together. You'll also learn what's new with OpenFlux, including virtualized lists, and what our future plans are, including pure-AS3-only support.TRANSCRIPT
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
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
[ViewHandler(event="click", handler="clickHandler")][EventHandler(event="click", handler="clickHandler")][ViewContract][ModelAlias]
Controller
Component
[Capacitor][DefaultSetting(property="value"]
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
• 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
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
<TextInput id=”input”> <PromptController prompt=”First Name” /> <AutoCompleteController items=”{ names }” /></TextInput>
<AutoCompletePromptTextInput id=”input” prompt=”First Name” items=”{ names }” />
Adding Controllers
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.orgBlog, Examples, Docs, Source
Code and Google Group
Friday, May 15, 2009