Ryan Campbell - OpenFlux and Flex 4

  • 732 views
Uploaded 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 …

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.

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
732
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
12
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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