OpenFlux and Flex 4
                            By Ryan Campbell




Friday, May 15, 2009
About This Session
                       •   OpenFlux vs. Flex 4
                       •   Component / Model
           ...
What is OpenFlux?



Friday, May 15, 2009
OpenFlux is:


                       • Lightweight MVC Component Framework
                       • Makes Custom Componen...
OpenFlux vs. Flex 4



Friday, May 15, 2009
Major Flex 4 Similarities


                 • Component logic is separate from view logic
                 • Supports cus...
Major Flex 4 Differences


                       • OpenFlux separates logic into controllers
                       • Fle...
Component / Model



Friday, May 15, 2009
Component / Model


                       • Contains no logic
                       • Only contains public properties
  ...
Component / Model



                       EXAMPLE:




Friday, May 15, 2009
Views



Friday, May 15, 2009
Views


                       • OpenFlux views implement IFluxView
                       • Flex 4 views extend Skin (whi...
Views



                       EXAMPLE:




Friday, May 15, 2009
Controllers



Friday, May 15, 2009
Controllers


                       • OpenFlux separates component logic in to
                         multiple controll...
Controllers



                       EXAMPLE:




Friday, May 15, 2009
Metadata



Friday, May 15, 2009
Metadata


           • OpenFlux has 7 different [Metadata] tags
           • Uses custom metadata to reduce code
        ...
Metadata
                                    Component
               [Capacitor]
               [DefaultSetting(property=...
Metadata



                       EXAMPLE:




Friday, May 15, 2009
Layouts



Friday, May 15, 2009
OpenFlux Layouts


                       • Implement ILayout (4 methods)
                       • Optionally implement ID...
Flex 4 Layouts



                       • Don’t implement an interface
                       • Must extend LayoutBase
  ...
Layouts




                       EXAMPLE:




Friday, May 15, 2009
Virtualization



Friday, May 15, 2009
Virtualization

        • Flex 4 virtualization is handled by DataGroup and
               Layouts
        • OpenFlux comp...
Virtualization

         <VirtualCollection id=quot;virtualquot;
           data=quot;{ someHugeDataSet }quot;
           ...
Virtualization




                       EXAMPLE:




Friday, May 15, 2009
Extending, extending,
                            extending


Friday, May 15, 2009
Extending a Component

       <AutoCompletePromptTextInput id=”input”
            prompt=”First Name”
            items=”{...
DataGrid & Tree



Friday, May 15, 2009
DataGrid & Tree


                       • Built over a weekend (including Tree and
                         TreeDataGrid)...
DataGrid & Tree




                       EXAMPLE:




Friday, May 15, 2009
OpenFlux Independence



Friday, May 15, 2009
What’s that mean?


               • Use OpenFlux components with or without
                       Flex.
               •...
What was replaced?



           • UIComponent, SystemManager, LayoutManager
           • Application, Label and Image
   ...
What was kept?



           • StyleManager, BindingManager, ResourceManager
                   we’re keeping (because we ...
OpenFlux App




                       EXAMPLE:




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




F...
Upcoming SlideShare
Loading in …5
×

Ryan Campbell - OpenFlux and Flex 4

1,200 views

Published on

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.

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,200
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Ryan Campbell - OpenFlux and Flex 4

  1. 1. OpenFlux and Flex 4 By Ryan Campbell Friday, May 15, 2009
  2. 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. 3. What is OpenFlux? Friday, May 15, 2009
  4. 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. 5. OpenFlux vs. Flex 4 Friday, May 15, 2009
  6. 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. 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. 8. Component / Model Friday, May 15, 2009
  9. 9. Component / Model • Contains no logic • Only contains public properties • Extends FluxComponent • FluxComponent handles attaching controllers and views Friday, May 15, 2009
  10. 10. Component / Model EXAMPLE: Friday, May 15, 2009
  11. 11. Views Friday, May 15, 2009
  12. 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. 13. Views EXAMPLE: Friday, May 15, 2009
  14. 14. Controllers Friday, May 15, 2009
  15. 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. 16. Controllers EXAMPLE: Friday, May 15, 2009
  17. 17. Metadata Friday, May 15, 2009
  18. 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. 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. 20. Metadata EXAMPLE: Friday, May 15, 2009
  21. 21. Layouts Friday, May 15, 2009
  22. 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. 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. 24. Layouts EXAMPLE: Friday, May 15, 2009
  25. 25. Virtualization Friday, May 15, 2009
  26. 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. 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. 28. Virtualization EXAMPLE: Friday, May 15, 2009
  29. 29. Extending, extending, extending Friday, May 15, 2009
  30. 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. 31. DataGrid & Tree Friday, May 15, 2009
  32. 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. 33. DataGrid & Tree EXAMPLE: Friday, May 15, 2009
  34. 34. OpenFlux Independence Friday, May 15, 2009
  35. 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. 36. What was replaced? • UIComponent, SystemManager, LayoutManager • Application, Label and Image • Holy crap that was a lot of work... Friday, May 15, 2009
  37. 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. 38. OpenFlux App EXAMPLE: Friday, May 15, 2009
  39. 39. www.openflux.org Blog, Examples, Docs, Source Code and Google Group Friday, May 15, 2009

×