Flex 2 Developer's Guide > Building User Interfaces for
Flex Applications > Using Flex Visual Components > Using the UIComponent class > Using components in MXML and ActionScript

Using components in MXML and ActionScript

Every Flex component has an MXML API and an ActionScript API. A component's MXML tag attributes are equivalent to its ActionScript properties, styles, behaviors, and events. You can use both MXML and ActionScript when working with components.

To configure a component:

  1. Set the value of a component property, event, style, or behavior declaratively in an MXML tag, or at run time in ActionScript code.
  2. Call a component's methods at run time in ActionScript code. The methods of an ActionScript class are not exposed in the MXML API.

The following example creates a Button control in MXML. When the user clicks the Button control, it updates the text of a TextArea control by using an ActionScript function. 

<?xml version="1.0"?>
<!-- components\ButtonApp.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            public function handleClick():void {
                text1.text="Thanks for the click!";
            }
        ]]>
    </mx:Script>

    <mx:Button id="button1" 
        label="Click here!" 
        width="100" 
        fontSize="12"
        click="handleClick();"/>
    <mx:TextArea id="text1"/>
</mx:Application>

This example has the following elements:

The click event attribute can also take ActionScript code directly as its value, without your having to specify it in a function. Therefore, you can rewrite this example as the following code shows: 

<?xml version="1.0"?>
<!-- components\ButtonAppAS.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Button id="button1" 
        label="Click here!" 
        width="100"
        fontSize="12"
        click="text1.text='Thanks for the click!';"/>

    <mx:TextArea id="text1"/>
</mx:Application>

Both of these examples result in the following image, shown after the button was clicked:


Component class hierarchy

NOTE

 

Although you can specify multiple lines of ActionScript code, separated by semicolons, as the value of the click event attribute, for readability you should limit the click event to only one or two lines of code.

Subtopics

Initializing components at run time

Initializing components at run time

Flex uses MXML property attributes to initialize your components. However, you might want to use some logic to determine initial values at run time. For example, you might want to initialize a component with the current date or time. Flex must calculate this type of information when the application executes.

Every component dispatches several events during its life cycle. In particular, all components dispatch the following events that let you specify ActionScript to initialize a component:

preInitialize Dispatched when a component has been created in a rough state, and any children have not been created.

initialize Dispatched when a component and all its children have been created, but before the component size has been determined.

creationComplete Dispatched when the component has been laid out and the component is visible (if appropriate).

NOTE

 

For more information on how components are created, see About the component instantiation life cycle.

You can use the initialize event to configure most component characteristics; in particular, use it to configure any value that affects the component's size. Use the creationComplete event if your initialization code must get information about the component layout.

The following example configures Flex to call the initDate() function when it initializes the Label control. When Flex finishes initializing the Label control, and before the application appears, Flex calls the initDate() function.

<?xml version="1.0"?>
<!-- components\LabelInit.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            private function initDate():void {
                label1.text += new Date();
            }
        ]]> 
    </mx:Script>

    <mx:Box borderStyle="solid">
        <mx:Label id="label1" 
            text="Today's Date: "
            initialize="initDate();"/>
    </mx:Box>
</mx:Application>

This example produces the following image:


Initialize components at runtime

You can also express the previous example without a function call by adding the ActionScript code in the component's definition. The following example does the same thing, but without an explicit function call:

<?xml version="1.0"?>
<!-- components\LabelInitAS.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Box borderStyle="solid">
        <mx:Label id="label1" 
            text="Today's Date:" 
            initialize="label1.text += new Date();"/>
    </mx:Box>
</mx:Application>

As with other calls that are embedded within component definitions, you can add multiple ActionScript statements to the initialize MXML attribute by separating each function or method call with a semicolon. The following example calls the initDate() function and writes a message in the flexlog.txt file when the label1 component is instantiated:

<?xml version="1.0"?>
<!-- components\LabelInitASAndEvent.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            private function initDate():void {
                label1.text += new Date();
            }
        ]]> 
    </mx:Script>

    <mx:Box borderStyle="solid">
        <mx:Label id="label1" 
            text="Today's Date:"
            initialize="initDate(); trace('The label is initialized!');"/>
    </mx:Box>
</mx:Application>

Flex 2.01

Take a survey