Flex Demo 4 - Using Bindable Variables

View Flex Demo 4

This demostrates using the 'Bindable' keyword and overwriting default values for an object.
The primary object is a component I named 'ButtonArea'. It consists of a label and button in a horizontal layout:

<s:Label id="theLabel" text="{labelName}"/> 
<s:Button id="theButton" label="Click to hide label"
         click="theButton_clickHandler(event)"/> 

A bit of ActionScript controls the button behavior, and creates a bindable variable 'labelName'.

    <fx:Script> 
        <![CDATA[
            [Bindable]public var labelName:String = "Default Label"; 
            protected function theButton_clickHandler(event:MouseEvent):void 
            { 
                theLabel.setVisible(!(theLabel.visible));
                if (theLabel.visible) { 
                    theButton.label = "Click to hide label";
                } else { 
                    theButton.label = "Click to show label";
                } 
            } 
        ]]> 
    </fx:Script> 

The main class for the application (FBDemo4.mxml) creates several instances of the ButtonArea component. Since the labelName variable is bindable, we can override the default value when we declare instances of the ButtonArea component.

    <components:ButtonArea> 
    </components:ButtonArea> 
    <components:ButtonArea labelName = "Custom Label 1"> 
    </components:ButtonArea> 
    <components:ButtonArea labelName = "Custom Label 2"> 
    </components:ButtonArea> 
    <components:ButtonArea labelName = "Custom Label 3"> 
    </components:ButtonArea>