Your SlideShare is downloading. ×
0
A Deep Dive into the
    Flex 3 Framework
    Joshua Jamison
    EffectiveUI
    www.effectiveui.com
    January 30th, 2009
...
Introductions

       Who am I?


       Joshua Jamison

                Software Architect at EffectiveUI
          

 ...
What will we talk about today?

       Several topics that help you maximize Flex’s power


       Things many beginner -...
Data Binding




                                                                                 ®




                  ...
The Problem




                                                                  Need a way to sync views with changing d...
The Scenario




                        Scenario: A value object with some text that should be displayed on a label




 ...
Roll-my-own solution


       I have a VO that contains some text I need to display on the screen





        public cla...
Roll-my-own solution


       How will I know when the text eld on this object changes? I’ll have it dispatch

       eve...
Roll-my-own solution


       In the view, I’ll listen for those events:





                  private var _vo : BoringV...
Roll-my-own solution




                                                     Ugh. Annoying. Too much code for so simple a...
Flex’s solution: data binding


        Data binding is a contract between two objects: one promises to dispatch events

...
Flex’s solution: data binding


       Mark the object and its property as [Bindable], use curly braces, and away you go.
...
The Basic Idea


        A property of a component changes


        The property’s component res off an event indicating ...
MXML Example (with curly braces), binding to a property


        To bind to a property, simply put a reference to the pro...
Metadata


        What is it?


                   Metadata is information that tells the compiler how components are us...
Metadata


         Where should [Bindable] metadata be placed?


                   Before a public class de nition
    ...
Metadata


        Why use a custom event type?


                   It’s more efficient than using the default PropertyCha...
MXML Example (with curly braces), binding to a function


        Functions can be used as a source for data binding


  ...
MXML Example (with curly braces), binding to XML data


        Can bind directly to XML data


                   XML do...
MXML Example: using <Binding> tag


        The MXML <Binding> tag accomplishes the same thing as curly braces


        ...
What does the generated code buy you?


        Brevity


        Lots of error handling


        Binding to expression...
Binding in Actionscript: bindProperty() and bindSetter()


        Bindings can be created in Actionscript code, too


  ...
Common problem: performance in Cairngorm


        Too many bindable elds on the model doesn’t perform well!


        Wh...
Common problem: two-way binding


        Problem: two elds should update each other


        Simple solution: Create tw...
StyleManager




                                                                                 ®




                  ...
StyleManager: Styling 101


        “Styles” differ from “Properties” in the way they are set, maintained, and accessed in
...
StyleManager: Styling 101


        Styles are inheritable


                   Styles must propagate to their children, ...
StyleManager: Styling 101


        Every time a style is set, the framework has to keep track of:


                   A...
Style Precedence


        Global, Type, Class, Attribute





    *Image courtesy Juan Sanchez and Andy McIntosh

      ...
Adding styles to components in AS3


        To add styles to individual components, use UIComponent.getStyle and setStyle...
Using StyleManager to manage Assets


       You can embed assets through the StyleManager


                   Advantage...
Using the StyleManager


        Other things you can do with the StyleManager:


                   Make changes to exis...
Load style declarations at runtime


        Uses different CSS les for the different themes


        Load the style decla...
Example: swap styles from a SWF at runtime




Example courtesy of Juan Sanchez and Andy McIntosh



                     ...
Example: swap styles from a SWF at runtime




Example courtesy of Juan Sanchez and Andy McIntosh



                     ...
Example: clearing and restoring styles


        Same example as before, but a few new buttons / handlers:


public funct...
StyleManager demo:
                                                    ThemeSwap
                                         ...
In case it doesn’t work live: “Obsidian” theme




                                                                       ...
In case it doesn’t work live: iTunes 7 Theme




                                                                       ®
...
In case it doesn’t work live: Windows Vista theme




                                                                    ...
More info?


        Creating Visual Experiences with Flex 3.0, by Juan Sanchez and Andy McIntosh


                   St...
Collections




                                                                                ®




                    ...
What is a collection?


        Data comes in many formats


                   Objects
            

                  ...
Why do we need collections?


        Collections:


                   Abstract the format of the data from the display ...
So, what are collections really?


        Classes that implement IList, ICollectionView


                   IList is an...
IList


        Interface for working with linear data


                   Interesting methods:
            

         ...
ICollectionView


        Interface for sorting, ltering, and interacting with linear and hierarchical data


           ...
ListCollectionView


        Implements IList


        Implements ICollectionView


        Consequently, components ex...
ArrayCollection, XMLListCollection


        The two classes in the Flex framework that inherit from ListCollectionView

...
Where are collections useful?


        Various classes can all use collection objects as their data source; these are cal...
Review: why do we need collections?


        Collections:


            1. Abstract the format of the data from the disp...
1. Abstract the data format


        The <mx:TileList> can accept many different types of data sources, including an

   ...
2. Update views when data changes


        One of the main reasons to use collections is so that when the data contained ...
3. Consistent data manipulation operations


        Both ArrayCollection and XMLListCollection inherit from ListCollectio...
4. Sorted views


        Collections provide a mechanism to sort the view of the data without changing the

        unde...
5. Filtered views


        Collections also offer an easy way to lter data


        Simply set the lterFunction property...
Hierarchical Data


        Representing hierarchical data in XML is trivial, since XML itself is natively

        hiera...
Cursors


        Classes used to navigate through collection objects


        Provide convenient, consistent ways to ac...
Common Problem: Manipulating a view component
immediately after changing the data provider

        Setting the dataProvid...
Common Problem: Not seeing expected changes in the view


        If the objects stored in a collection are not [Bindable]...
SystemManager




                                                                                  ®




                ...
SystemManager: overview

       “Root” of the Flex swf


       First class that is instantiated


       Controls and c...
SystemManager: 2 frame swf

       Flex apps currently publish to a 2 frame SWF

                1st frame (small): Syste...
SystemManager: 2 frame walkthrough



                        SystemManager
                                              ...
SystemManager: 2 frame walkthrough

                                                                           Frame 2 pla...
SystemManager: what is it good for?

       Dispatches browser-resize events


       Detecting if assets have been embed...
SystemManager: what else is it good for?

       Getting a reference to the root object

                SystemManager.st...
SystemManager Pitfalls: Multiple Child Lists

       PopUp windows added through PopUpManager.addPopUp or createPopUp do n...
SystemManager Pitfalls: The Root

       The system manager tries to own “_root”

                May manipulate the root...
Resources


        Michael Labriola’s 2008 360|Flex San Jose talk about Data Binding: “Diving in the Data

        Bindi...
Thank you!

  Joshua Jamison
  joshua.jamison@effectiveui.com
  twitter: cephus
  brightkite: cephus




                  ...
Upcoming SlideShare
Loading in...5
×

Flex 3 Deep Dive

3,134

Published on

Joshua Jamison presenting 'Flex 3 Deep Dive' at MAX Japan

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

No Downloads
Views
Total Views
3,134
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
82
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Flex 3 Deep Dive"

  1. 1. A Deep Dive into the Flex 3 Framework Joshua Jamison EffectiveUI www.effectiveui.com January 30th, 2009 ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  2. 2. Introductions Who am I?  Joshua Jamison  Software Architect at EffectiveUI  Develop on Flex / Ruby / Java / Android / JavaFX  Who are you?  Assumptions:  You know some Flex  You want to know more Flex  You know how to get things done with Flex, but not how to make the most of the Flex  Framework ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  3. 3. What will we talk about today? Several topics that help you maximize Flex’s power  Things many beginner - intermediate developers don’t know a lot about  Data Binding  Style manager  Collections  System Manager  For each of these, I’ll discuss:  What it is  How it affects you  Best ways to use it  Common mistakes to avoid  It’ll start simple, and get deeper as we go  ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  4. 4. Data Binding ® 4 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  5. 5. The Problem Need a way to sync views with changing data ® 5 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  6. 6. The Scenario Scenario: A value object with some text that should be displayed on a label ® 6 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  7. 7. Roll-my-own solution I have a VO that contains some text I need to display on the screen  public class BoringVO1 { public var _text : String; } ® 7 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  8. 8. Roll-my-own solution How will I know when the text eld on this object changes? I’ll have it dispatch  events. [Event(name=”textChanged”), type=”flash.events.Event”] public class BoringVO1 extends EventDispatcher { private var _text : String; public function set text( value : String ) : void { _text = value; this.dispatchEvent( new Event(“textChanged”) ); } } ® 8 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  9. 9. Roll-my-own solution In the view, I’ll listen for those events:  private var _vo : BoringVO1; public function set vo( value : BoringVO1 ) : void { _vo = value; _vo.addEventListener( “textChanged”, this.setMyText ) } public function setMyText() { theLabel.text = value; } <mx:Label id=”theLabel”/> ® 9 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  10. 10. Roll-my-own solution Ugh. Annoying. Too much code for so simple a task. ® 10 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  11. 11. Flex’s solution: data binding Data binding is a contract between two objects: one promises to dispatch events  when its data changes, and another promises to listen to those changes and update itself Got this de nition from Michael Labriola’s fantastic data binding talk at 360|Flex San Jose, “Diving in the  Data Binding Waters” Contrary to popular belief, it isn’t magic: it’s events!  ® 11 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  12. 12. Flex’s solution: data binding Mark the object and its property as [Bindable], use curly braces, and away you go.  The VO! public class BoringVO1 { [Bindable] public var text : String; } The app! [Bindable] public var vo : BoringVO1; <mx:Label id=”theLabel” text=”{vo.text}”/> ® 12 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  13. 13. The Basic Idea A property of a component changes  The property’s component res off an event indicating that the property changed  Other components listen for this event, recognize that a needed value has changed,  and update themselves with the new value Bindings also re once on initialization, so that initial values are set correctly  ® 13 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  14. 14. MXML Example (with curly braces), binding to a property To bind to a property, simply put a reference to the property in curly braces:  <mx:Label text=”{anObject.text}”/>  The referenced data must be marked as bindable: give it [Bindable] metadata  If it isn’t marked as [Bindable], you’ll get a warning from the compiler...  “Data binding will not be able to detect assignments...”  ...and the binding won’t work.  A warning! ® 14 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  15. 15. Metadata What is it?  Metadata is information that tells the compiler how components are used in a Flex application.  Various kinds: [ArrayElementType], [DefaultProperty], [Deprecated], [Effect], [Embed]...  [Bindable] metadata tells the compiler to generate code to dispatch events when the property or  properties marked [Bindable] are changed, so that other objects binding to that data will update accordingly. Why is it needed?  Remember all of the event dispatching and listening from the roll-my-own example?  The [Bindable] metadata tells the compiler to dispatch all of those events when objects or their  properties change. ® 15 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  16. 16. Metadata Where should [Bindable] metadata be placed?  Before a public class de nition  Makes all public properties, public getters/setters available as binding sources  Before a public, protected, or private property de ned as a variable  Makes that property available as a data binding source  Before a public, protected, or private property de ned as a getter/setter  Makes that property available as a data binding source  Components declared in MXML are automatically set as [Bindable] in the compiler-generated  Actionscript, as long as they have an id set What is the syntax?  [Bindable] or [Bindable(event=“eventTypeToWhichInterestedComponentsShouldRespond”)]  If no event type is given, by default an event named “propertyChange”, of type PropertyChangeEvent is  dispatched ® 16 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  17. 17. Metadata Why use a custom event type?  It’s more efficient than using the default PropertyChangeEvent  More on this later  Who dispatches the custom event?  When no custom event type is speci ed:  Default PropertyChangeEvent is dispatched automatically  Example: DefaultEventFiring.mxml  When a custom event type is speci ed:  No PropertyChangeEvents are dispatched  Custom event types are not dispatched automatically  Must dispatch custom events explicitly  Example: CustomEventFiring2.mxml  ® 17 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  18. 18. MXML Example (with curly braces), binding to a function Functions can be used as a source for data binding  Must be marked with appropriate metadata: [Bindable(event=”eventType”)]  When do bindings to functions execute?  Whenever the event type listed in the [Bindable(event=”eventType”)] metadata is dispatched  Example: DataBinding6.mxml  Whenever one of the bindable arguments passed in to the function changes  Code automatically generated to execute the binding whenever one of the function’s passed-in  bindable arguments changes Compiler will throw a warning when non-bindable arguments are passed in to the argument list of a  bound function (and the binding won’t work, either) On initialization  ® 18 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  19. 19. MXML Example (with curly braces), binding to XML data Can bind directly to XML data  XML does not dispatch change events when nodes are edited, so views may not update correctly  XMLListCollection is the class of choice to use as an XML data provider  Provides sorting and ltering methods  Ensures views get updated when XML nodes are edited  ® 19 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  20. 20. MXML Example: using <Binding> tag The MXML <Binding> tag accomplishes the same thing as curly braces  Allows you to bind multiple sources to a single destination  Can place a concatenated Actionscript expression in curly braces in the source  property of a <Binding> tag Example: BindingTag.mxml  ® 20 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  21. 21. What does the generated code buy you? Brevity  Lots of error handling  Binding to expressions  Compiler generates code to evaluate the expression placed in curly braces when particular events are  red off; makes it very easy to bind to complex expressions <mx:Label text=”{a.toString() + b.toString() + “: “ + (c/d).toString}/>  Chains  Binding to property chains happens easily, too:  <mx:Label text=”{this.childA.propertyB.childC.widgetD.text}”/>  When childA, propertyB, childC, or widgetD changes, the label’s text updates appropriately  All of the event listeners needed to make this happen are created for you in the generated code  All of the properties in the chain must be [Bindable] in order for this to work correctly  ® 21 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  22. 22. Binding in Actionscript: bindProperty() and bindSetter() Bindings can be created in Actionscript code, too  Use mx.binding.utils.BindingUtils  Two important static methods on the BindingUtils class  bindProperty() sets a destination property when a source property or property chain changes  Takes a destination object, a destination property, a source object, and a source property chain  (remember to make all elements in the source property chain [Bindable]) You can use bindProperty() to set a property that has a setter  bindSetter() calls a handler function() when a source property or property chain changes  Takes a handler function, a source object, and a source property chain  Since handler functions re when bindSetter is rst called; be sure to check for nulls  Handler function receives, as a parameter, the new value of the source’s property chain  ® 22 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  23. 23. Common problem: performance in Cairngorm Too many bindable elds on the model doesn’t perform well!  Why?  Every time one of the properties on the model changes, the model dispatches a PropertyChangeEvent  Any component binding to any property on the model listen for PropertyChangeEvents dispatched from  the model Examines the event to see which property the PropertyChangeEvent is for; disregards if not relevant  If the model has a lot of elds, this is a huge amount of unnecessary work  Solution? Custom event types  Listening components now only receive the particular event type dispatched for the property in  question ® 23 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  24. 24. Common problem: two-way binding Problem: two elds should update each other  Simple solution: Create two bindings, one in each direction.  Flex makes sure that an in nite loop won’t occur  MXML solution: TwoWayMXML.mxml  Actionscript solution: TwoWayActionscript.mxml  There’s a shortcut for this coming in Gumbo (Flex 4)...  Curly braces  <mx:TextInput id=” rstInput”/>  <mx:TextInput id=”secondInput” text=”@{ rstInput.text}”/>  Binding tags  <mx:Binding twoWay=”true” ...  Check out the Gumbo spec:  http://opensource.adobe.com/wiki/display/ exsdk/Two-way+Data+Binding  ® 24 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  25. 25. StyleManager ® 25 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  26. 26. StyleManager: Styling 101 “Styles” differ from “Properties” in the way they are set, maintained, and accessed in  your application Ways to set styles:  In MXML, they look just like properties:  <mx:Label text=quot;woot! WTF FTW!quot; color=quot;0x00ff00quot; width=quot;100quot;/>  In Actionscript, they must be set through the style manager:  var label : Label = new Label();  label.text = quot;woot! WTF FTW!quot;; label.setStyle(quot;colorquot;, quot;0x00ff00quot;); Why is it more complex in ActionScript?  ® 26 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  27. 27. StyleManager: Styling 101 Styles are inheritable  Styles must propagate to their children, and their children’s children, and sometimes their children’s  children’s children, forever and ever. This task requires some management  The ex team built a class to do just that, and creatively named it the Style Manager.  The StyleManager serves as the storehouse for all of this information and makes it  available to other components. ® 27 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  28. 28. StyleManager: Styling 101 Every time a style is set, the framework has to keep track of:  Any parent styles this over-rides  Any children who are affected  Flex adds/removes styles through proto chaining  Style properties are stored in the proto chains - not as properties on the objects themselves  proto chains are outside of the scope of our discussion, but it’s a really interesting topic to learn more  about. ® 28 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  29. 29. Style Precedence Global, Type, Class, Attribute  *Image courtesy Juan Sanchez and Andy McIntosh ® 29 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  30. 30. Adding styles to components in AS3 To add styles to individual components, use UIComponent.getStyle and setStyle  getStyle is cheap - it just reads the style information  setStyle is expensive - it has to traverse the entire style tree and re-calculate inheritance.  These methods inherently make use of the StyleManager  These should satisfy your styling needs on a component level  ® 30 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  31. 31. Using StyleManager to manage Assets You can embed assets through the StyleManager  Advantages:  Avoid cluttering your component code with Embed statements  Keep all external resource paths in a single place  Manage resources that might be used in more than one part of your app  .icons{ wrenchIcon: Embed('images/wrench.png'); searchIcon: Embed('images/search.png'); loginIcon: Embed('images/login.png'); } <mx:Button icon=quot;{StyleManager.getStyleDeclaration('.icons').getStyle('wrenchIcon')}quot; label=quot;Customizequot; /> ® 31 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  32. 32. Using the StyleManager Other things you can do with the StyleManager:  Make changes to existing styles  Useful for programmatically re-themeing at runtime for a con gurator  StyleManager.getStyleDeclaration(selector);  StyleManager.setStyleDeclaration(selector, CSSSelector, update);  Clear existing styles  StyleManager.clearStyleDeclaration(selector, update)  De ne whether your styles in uence other components  StyleManager.registerParentSizeInvalidatingStyle(styleName:String)  StyleManager.registerParentDisplayListInvalidatingStyle(styleName)  Register aliases for color names  “blue” instead of 0x0000ff  StyleManager.registerColorName(colorName, colorValue);  Load styles from a swf at runtime  StyleManager.loadStyleDeclarations(...);  ® 32 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  33. 33. Load style declarations at runtime Uses different CSS les for the different themes  Load the style declarations from a pre-compiled swf  The core of the functionality:  private function changeCSS( panelTitle:String, name:String ):void { StyleManager.loadStyleDeclarations( name, true ); } ® 33 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  34. 34. Example: swap styles from a SWF at runtime Example courtesy of Juan Sanchez and Andy McIntosh ® 34 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  35. 35. Example: swap styles from a SWF at runtime Example courtesy of Juan Sanchez and Andy McIntosh ® 35 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  36. 36. Example: clearing and restoring styles Same example as before, but a few new buttons / handlers:  public function unloadRed():void{ StyleManager.unloadStyleDeclarations('Red.swf'); } // Code to restore the default 'Halo' button public function restoreDefaults():void{ StyleManager.setStyleDeclaration('Button', defaultButtonStyle, true); } private var defaultButtonStyle : CSSStyleDeclaration; public function onComplete():void{ defaultButtonStyle = StyleManager.getStyleDeclaration('Button'); } ... <mx:Button label=quot;Go Red!quot; click=quot;loadRed()quot;/> <mx:Button label=quot;Go Blue!quot; click=quot;loadBlue()quot;/> <mx:Button label=quot;Clearquot; click=quot;clearStyles()quot;/> <mx:Button label=quot;Restorequot; click=quot;restoreDefaults()quot;/> <mx:Button label=quot;Unload Redquot; click=quot;unloadRed()quot;/> ® 36 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  37. 37. StyleManager demo: ThemeSwap http://www.scalenine.com/samples/themeSwapper/themeSwap.html ® 37 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  38. 38. In case it doesn’t work live: “Obsidian” theme ® 38 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  39. 39. In case it doesn’t work live: iTunes 7 Theme ® 39 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  40. 40. In case it doesn’t work live: Windows Vista theme ® 40 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  41. 41. More info? Creating Visual Experiences with Flex 3.0, by Juan Sanchez and Andy McIntosh  Still valid in Flex 4.0!  ScaleNine! Scale....ten? ® 41 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  42. 42. Collections ® 42 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  43. 43. What is a collection? Data comes in many formats  Objects  Arrays  XML  There are many different kinds of view components  Crossing all of the view components with all of the different types of data  representations would yield an unmanageable number of classes Need a common way to use any data as the source for any view component  This is where mx.collections.* shines  ® 43 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  44. 44. Why do we need collections? Collections:  Abstract the format of the data from the display component  Ensure components are updated when data changes  Provide consistent operations to use on data  Provide sorted views of data  Provide ltered views  (Reasons taken from the online ex documentation at www.adobe.com)  ® 44 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  45. 45. So, what are collections really? Classes that implement IList, ICollectionView  IList is an interface that contains that make it easy to work with linear data  ICollectionView is an interface that makes it easy to work with hierarchical data  ArrayCollection & XMLListCollection are the main ones you’ll use  These actually extend ListCollectionView, which implements IList and ICollectionView  ® 45 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  46. 46. IList Interface for working with linear data  Interesting methods:  addItem  addItemAt  getItemAt  getItemIndex  removeAll  removeItemAt  setItemAt  ® 46 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  47. 47. ICollectionView Interface for sorting, ltering, and interacting with linear and hierarchical data  Interesting properties  sort  lterFunction  Interesting methods  contains  createCursor  ® 47 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  48. 48. ListCollectionView Implements IList  Implements ICollectionView  Consequently, components extending ListCollectionView can be used anywhere an  IList or an ICollectionView is expected Is the base class for ArrayCollecton, XMListCollection  ® 48 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  49. 49. ArrayCollection, XMLListCollection The two classes in the Flex framework that inherit from ListCollectionView  ArrayCollection  Uses an array as its data source  Good for linear data  XMLListCollection  Uses an XMLList as its data source  XMLList is a list of one or more XML objects  Good for hierarchical data  ® 49 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  50. 50. Where are collections useful? Various classes can all use collection objects as their data source; these are called  “data provider components”: ButtonBar  ColorPicker  ComboBox  DataGrid  DateField  HorizontalList  LinkBar  List  Menu  MenuBar  PopUpMenuButton  Tree  etc.  ® 50 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  51. 51. Review: why do we need collections? Collections:  1. Abstract the format of the data from the display component 2. Ensure components are updated when data changes 3. Provide consistent operations to use on data 4. Provide sorted views of data 5. Provide ltered views ® 51 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  52. 52. 1. Abstract the data format The <mx:TileList> can accept many different types of data sources, including an  ArrayCollection and an XMLListCollection The component can swap between different collections without a problem  Example: AbstractDataFormat.mxml  ® 52 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  53. 53. 2. Update views when data changes One of the main reasons to use collections is so that when the data contained by the  collection changes, views update accordingly Collections re off CollectionChange events when their items change; views listen for  these events and refresh themselves accordingly When passing in non-collection objects as data providers, you may not see the view  update immediately Flex wraps the passed in “raw” objects (e.g., Array or XML) in collection objects; this lets you use your raw  data directly. However, changes made directly to those raw objects may not force the views to update  Example: UpdateTheViews.mxml  ® 53 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  54. 54. 3. Consistent data manipulation operations Both ArrayCollection and XMLListCollection inherit from ListCollectionView  This makes it easy to edit data in a consistent way, regardless of which type of data is  being used for the data provider Square brackets [] (Don’t use these - they’re involved in a Flash Player bug regarding loading sub-  applications; use getItemAt() intead) getItemAt()  removeItemAt()  addItem()  ® 54 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  55. 55. 4. Sorted views Collections provide a mechanism to sort the view of the data without changing the  underlying data itself ListCollectionView’s sort property:  type = Sort  sort. elds should be an array of SortField objects, which describe how to perform the sort  Call refresh() on the collection object after assigning it a sort object  Underlying data does not change  Example: SortingViews.mxml  ® 55 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  56. 56. 5. Filtered views Collections also offer an easy way to lter data  Simply set the lterFunction property on the collection to a function of the form:  function theFilterFunction( item : Object ) : Boolean {}  The function should return true on the object if it should be included in the ltered view of the data  Example: SortingViews.mxml  ® 56 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  57. 57. Hierarchical Data Representing hierarchical data in XML is trivial, since XML itself is natively  hierarchical: <Foods>  <Nuts>  <Nut>Peanut</Nut>  </Nuts>  </Foods>  Object graphs can be used, too  Example: ObjectHierarchy.mxml  Put the child objects in the “children” eld of the object  ® 57 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  58. 58. Cursors Classes used to navigate through collection objects  Provide convenient, consistent ways to access data in collections  Initialize to the rst element in the collection  Cursors allow:  Movement through data (forward, back)  Searching (only if the collection is sorted)  Bookmarks  Data manipulation (addition, removal)  Great for navigating and searching through data  They respect sorts (even though the underlying data isn’t actually sorted, cursor will  behave like it is) They have an optimized nd method  Handy for paging through long results sets  ® 58 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  59. 59. Common Problem: Manipulating a view component immediately after changing the data provider Setting the dataProvider property on a component such as a Tree requires that it  validate its properties and layout; it may need to add or remove children based on the changes Attempting to manipulate the view component immediately after setting the  dataProvider (i.e., on the next line of code) can cause runtime errors because the component has not yet validated its properties and layout To get around this problem, call validateNow() on the view component immediately  after setting the dataProvider This forces the component to validate its properties and layout and redraw itself if  necessary Only do this when necessary; there’s a performance hit  ® 59 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  60. 60. Common Problem: Not seeing expected changes in the view If the objects stored in a collection are not [Bindable], the view will not be able to  detect when they have changed In these instances, after updating an item in the collection, call the itemUpdated  method on the collection, letting it know that its data has changed ® 60 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  61. 61. SystemManager ® 61 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  62. 62. SystemManager: overview “Root” of the Flex swf  First class that is instantiated  Controls and coordinates the initialization of the application  Instantiates and displays the pre-loader  Instantiates Application and adds it to the display list  Manages layers of children for popups (sorta), cursors, and tooltips  Switches focus between top-level items like the above list  ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  63. 63. SystemManager: 2 frame swf Flex apps currently publish to a 2 frame SWF  1st frame (small): SystemManager, Preloader, DownloadProgressBar, helper classes.  2nd frame (probably big): The rest of the framework, your application, embedded assets  SystemManager Flex Framework Preloader DownloadProgressBar Application code HelperClasses Embedded Assets RSLs Frame 1 Frame 2 ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  64. 64. SystemManager: 2 frame walkthrough SystemManager Frame 1 streams in, plays  Preloader SystemManager is created  DownloadProgressBar SystemManager takes over - creates Preloader  HelperClasses Preloader tracks the rest of the bytes streaming in,  provides updates to SystemManager Once all bytes for frame 2 are streamed in, frame 2  plays Frame 1 ® 64 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  65. 65. SystemManager: 2 frame walkthrough Frame 2 plays  SystemManager instantiates Application,  sets Application.systemManager to itself Flex Framework Application initializes itself, emits  CreationComplete Application code SystemManager adds Application to the  DisplayList, hands control over to Application / LayoutManager Embedded Assets applicationComplete event is dispatched,  and your app is ready to go RSLs Frame 2 ® 65 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  66. 66. SystemManager: what is it good for? Dispatches browser-resize events  Detecting if assets have been embedded  Fonts, for example. If the font isn’t embedded, use a different font.  SystemManager.embeddedFontList;  Displaying your own preloader  and...  ® 66 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  67. 67. SystemManager: what else is it good for? Getting a reference to the root object  SystemManager.stage  Flash converts have probably spent some time looking for this  Monitoring keyboard and mouse activity  Manipulate multiple pop-ups, cursors, or tool-tips from their parent  ® 67 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  68. 68. SystemManager Pitfalls: Multiple Child Lists PopUp windows added through PopUpManager.addPopUp or createPopUp do not go on the  SystemManager.popupChildren list by default - they go on the normal Application child list. This list is displayed above the Alert child list and toolTipChildList  To add them there, pass the constant PopUpManagerChildList.POPUP as the fourth parameter to the  add or create methods on PopUpManager PopUpManager.createPopUp(this, TestPopUp,false, PopUpManagerChildList.POPUP);  cursorChildren are on top of everything, then popupChildren, then toolTipChildren, then the regular old  application children. application children toolTipChildren popupChildren cursorChildren ® 68 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  69. 69. SystemManager Pitfalls: The Root The system manager tries to own “_root”  May manipulate the root object in ways you’re not expecting in Flash  This makes ash / ex integration frustrating at times  I’m not going to go into this more, but be aware of it  ® 69 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  70. 70. Resources Michael Labriola’s 2008 360|Flex San Jose talk about Data Binding: “Diving in the Data  Binding Waters” (http://www.on ex.org/ted/2008/08/diving-in-data-binding-waters- with.php) Flex 3 Cookbook (Joshua Noble & Todd Anderson; O’Reilly)  Creating Visual Experiences in Flex 3.0 (Juan Sanchez and Andy McIntosh; Addison-  Wesley) Programming Flex 2, Programming Flex 3 (Cha c Kazoun, Joey Lott; O’Reilly)  Learning Flex 3 (Alaric Cole; O’Reilly)  Online Flex documentation  API: http://livedocs.adobe.com/ ex/3/langref/index.html  Docs: http://livedocs.adobe.com/ ex/3/html/  ® 70 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  71. 71. Thank you! Joshua Jamison joshua.jamison@effectiveui.com twitter: cephus brightkite: cephus ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×