Effortless Flex 4 Development: Inline Event Handling
From the book
From the book
From the book
Inline Event Handling
The first, most direct, way you can handle events is inline. To do so, you assign some ActionScript code to the corresponding event property of a component. For example:
<s:Label id="myLabel"/> <s:TextInput id="myText" change="myLabel.text=myText.text"/>
Every time the TextInput is changed, the Label’s text property will be assigned the value of the TextInput’s text property. This is functionally equivalent to data binding the two components together:
<s:Label id="myLabel" text="{myText.text}"/>
<s:TextInput id="myText" />
In fact, data binding is just a simple and direct way to place an event handler on a variable (or object property in this example). When that variable’s value changes, an event is triggered. The event handler itself updates the component that is bound to that variable.
You should note Flex assumes that the values assigned to event properties will be ActionScript, so the curly braces are not necessary. Using ActionScript for the values of non-event properties, like text, does require the curly braces.
Inline event handling can be applied across components, as in the Label-TextInput example, or on a component to itself. An earlier example had a Button’s horizontal location moved 10 pixels each time it is clicked. This next Button will be made 10 pixels taller with each click upon it:
<s:Button label="Bigger" id="myButton" click="myButton.height += 10" />
If you wanted to increase the Button’s height and width by 10, with each click, you can add a second ActionScript command after a semicolon (Figures 4.6 and 4.7):
){kind=small}
)
<s:Button label="Bigger" id="myButton" click="myButton.height += 10;myButton.width += 10" />
While you can put multiple commands inline, assigning more than one command to a component property can get ugly pretty quick. Also, you’ll find there are limits to what you can do inline. Say you had a checkbox that, if checked, showed an image; if unchecked, the image should be hidden. Accomplishing that requires more complex logic, best put into a function.