User Guide

About MXML 27
The List control and TabNavigator container are laid out side by side because they are in an HBox
container. The controls in the TabNavigator container are laid out from top to bottom because
they are in a VBox container.
The following figure shows the application rendered in a web browser window:
For more information about laying out user-interface components, see Chapter 1, “Using Flex
Components,” in Developing Flex Applications.
Using MXML to trigger runtime code
Flex applications are driven by runtime events. You can specify event handlers, which consist of
code for handling runtime events, in the event properties of MXML tags. For example, the
<mx:Button> tag has a click event property in which you can specify ActionScript code that
executes when the Button control is clicked at runtime. You can specify simple event handler code
directly in event properties. To use more complex code, you can specify the name of an
ActionScript function defined in an
<mx:Script> tag.
The following example shows an application that contains a Button control and a TextArea
control. The
click property of the Button control contains a simple event handler that sets the
value of the TextArea control’s
text property to the text Hello World.
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
<mx:Panel title="My Application" marginTop="10" marginBottom="10"
marginLeft="10" marginRight="10" >
<mx:TextArea id="textarea1"/>
<mx:Button label="Submit" click="textarea1.text='Hello World';"/>
</mx:Panel>
</mx:Application>
The following figure shows the application rendered in a web browser window: