The document discusses OpenFlux, an open source lightweight MVC framework for building Flex components. It compares OpenFlux to Flex 4, noting their similarities like separating component logic from views, but also differences like OpenFlux using controllers to separate logic while Flex 4 keeps logic in components. The document outlines key OpenFlux aspects like components, views, controllers, metadata, layouts, virtualization, and how OpenFlux can work independently of Flex.

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

2. 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

3. What is OpenFlux?
Friday, May 15, 2009

4. 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

5. OpenFlux vs. Flex 4
Friday, May 15, 2009

6. 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

7. 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

8. Component / Model
Friday, May 15, 2009

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

10. Component / Model
EXAMPLE:
Friday, May 15, 2009

11. Views
Friday, May 15, 2009

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

13. Views
EXAMPLE:
Friday, May 15, 2009

14. Controllers
Friday, May 15, 2009

15. 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

16. Controllers
EXAMPLE:
Friday, May 15, 2009

17. Metadata
Friday, May 15, 2009

18. 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

19. Metadata
Component
[Capacitor]
[DefaultSetting(property=quot;valuequot;]
Controller
[ViewHandler(event=quot;clickquot;, handler=quot;clickHandlerquot;)]
[EventHandler(event=quot;clickquot;, handler=quot;clickHandlerquot;)]
[ViewContract]
[ModelAlias]
Common
[StyleBinding]
Friday, May 15, 2009

20. Metadata
EXAMPLE:
Friday, May 15, 2009

21. Layouts
Friday, May 15, 2009

22. 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

23. 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

24. Layouts
EXAMPLE:
Friday, May 15, 2009

25. Virtualization
Friday, May 15, 2009

26. 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

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

28. Virtualization
EXAMPLE:
Friday, May 15, 2009

29. Extending, extending,
extending
Friday, May 15, 2009

30. 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

31. DataGrid & Tree
Friday, May 15, 2009

32. 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

33. DataGrid & Tree
EXAMPLE:
Friday, May 15, 2009

34. OpenFlux Independence
Friday, May 15, 2009

35. 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

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

37. 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

38. OpenFlux App
EXAMPLE:
Friday, May 15, 2009

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