Data binding:

http://livedocs.adobe.com/flex/3/html/help.html?content=databinding_1.html

http://livedocs.adobe.com/flex/3/html/help.html?content=databinding_1.html

Working with bindable property chains

Data binding is the process of tying the data in one object to another object. It provides a convenient way to pass data between the different layers of the application. Data binding requires a source property, a destination property, and a triggering event that indicates when to copy the data from the source to the destination. An object dispatches the triggering event when the source property changes.

Adobe Flex provides three ways to specify data binding: the curly braces ({}) syntax in MXML, the <mx:Binding> tag in MXML, and the BindingUtils methods in ActionScript.

1. Curly bracket

<mx:HSlider id=”mySlider”/>
<mx:Text text=”{mySlider.value}”/>

<mx:TextInput id=”myTI” text=”Enter number here”/>
<mx:TextArea text=”{usdFormatter.format(myTI.text)}”/>

2.

<mx:Binding
source=”mySlider.value”
destination=”wormModel.length”
/>

3. Use mx.binding.utils.BindingUtils class. This class defines static methods that let you create a binding to a property implemented as a variable, by using the bindProperty() method, or to a property implemented as a setter method, by using the bindSetter() method.

4. Bindable property chain

bindProperty(myText, ‘text’, user, [“name”,”firstName”,”text”]);

Debugging data binding

  • Ensure that the bindable event is being dispatched.You can use the Flex command-line debugger (fdb), or the Adobe® Flex® Builder™ debugger to make sure that the dispatchEvent() method is called. Also, you can add a normal event listener to that class to make sure it gets called. If you want to add the event listener as a tag attribute, you must place the [Event(‘myEvent‘)] metadata at the top of your class definition or in an <mx:Metadata> tag in your MXML.

    • 3.  Reading source of ChangeWatcher.as and BindingUtils.as

    What do I learned from those class? what information do I get?

    Layout containers:

    Book: Adobe Flex 3 Bible Chapter 10 up to page 270

    General information:

    The layout of a flex application is determined through a combination of

    the applicaitons containership hierarcy and

    the use of absolute layout(set children positions with x and y or constraint properties.

    List of layout containers:  VBox, Hbox, Canvas, Panel

    Navigation containers: ViewStack, TabNavigator, Accordion

    Container styles:

    alignment, gap and padding

    they have no effect on objects nested inside a canvas…

    Canvas

    absolute layout

    can layer objects on top of each other. can be used together with alpha styles

    Panel

    • UIComponent -> Container -> Panel. TitelWindow  Alert are extended from Panel
    • layout: vertical, horizontal, or absolute
    • Styles: support all the box styles
    • Title and status: the top bar

    Resizing, Scrolling, dragging, positioning

    invalidateDisplayList: set width, set style…

    updateDisplayList: it seems that drag the panel does not invoke this method, since nothing changed

    but scrolling does cause this method invoke

    in the method, it will call scrollChildren()

    /**
    *  Draws the object and/or sizes and positions its children.
    *  This is an advanced method that you might override
    *  when creating a subclass of UIComponent.
    *
    *  <p>You do not call this method directly. Flex calls the
    *  <code>updateDisplayList()</code> method when the component is added to a container
    *  using the <code>addChild()</code> method, and when the component’s
    *  <code>invalidateDisplayList()</code> method is called. </p>

    <p>The <code>Container.layoutChrome()</code> method sets the
    *  position and size of the Container container’s border.

    Sequence of UI component initialize

    constructor

    createcomplete

    createChildren

    createContents

    Here is a link to someone’s study notes

    http://flexcomps.wordpress.com/2008/05/09/flex-component-life-cycle/

    Grid: see notes in hard cover binder