Every component does certain things. For example, at a minimum, all visual components can initialize themselves and resize. Most components can do things specific to that component type. For example, a button can respond to a user click. All of these things translate into something called an event. An event is a way that a component can notify other parts of the application when some action occurs. When a component sends out this notification, we say that it dispatches an event.

In Flex all events are dispatched in the form of Event objects. Some events are a more specific type, meaning the event objects are actually instances of a subclass of the Event class. For example, when an Image component loads a file, it dispatches events of type ProgressEvent, which is a subclass of Event. Because all events are of type Event (or a subclass of Event), they all contain the same type of information, including the type of event (i.e., was it a click event or a progress event or an initialize event?) as well as what object dispatched the event. You’ll learn more about events and event dispatching details in Chapter 4.

Every type of component has set events that it dispatches. For example, a button component will always dispatch a click event when the user clicks on it (assuming the button is enabled). However, just because a component dispatches an event doesn’t mean that anything is receiving a notification. If you want your application to respond to an event, you must tell it to handle the event.

There are several ways you can handle events. One way is to use ActionScript to register listeners. We’ll talk about that solution in Chapter 4, when we talk about ActionScript in more detail. In this chapter, we’re more interested in the MXML solutions. Within MXML, you can add inline event handler attributes within a component tag. The event handler attribute name always matches the event name. For example, to handle a click event for a button you use the click attribute within the component tag. The value that you assign to an event attribute gets interpreted as ActionScript. The following example handles a button click event and launches an alert window:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  <mx:Script>
  <![CDATA[
    import mx.controls.Alert;
  ]]>
  </mx:Script>
  <mx:Button id="alertButton" label="Show Alert"
             click="Alert.show('Example')" />
</mx:Application>

Even though we haven’t yet talked about ActionScript or the Alert component, you can see that in this example that the click event attribute is defined to call Alert.show('Example'). If you test this example, you'll find that when you click the button, an alert dialog opens with the message that says Example.

In this section, our goal was simply to explain the concept of MXML event handling and to show the basic syntax. We’ll discuss specific events throughout the book when talking about the components that dispatch the events.

Data binding is a feature you can use to link a component to another component or an ActionScript object. Data binding automates changing the value of one object when the value of another object changes. Data binding is an important concept for building Flex applications, and we’ve dedicated much of Chapter 14 to a detailed discussion of the topic. However, you’ll need to understand data binding basics for some of the examples in the intervening chapters.

There are several syntaxes you can employ to enable data binding, but the simplest is a syntax that uses curly braces ({}) to evaluate a statement inline within an MXML tag. In Chapter 14, we’ll discuss the additional ways to enable data binding, but before that point, we’ll use only the curly brace syntax. The following example uses a text control and a text input control stacked vertically. Each of these controls is a standard Flex framework UI control. The text property of each of these controls allows you to read and write the value displayed in the control. In this first example, the text control displays the value Example:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  <mx:VBox>
    <mx:Text id="output" text="Example" width="200" height="200"  />
    <mx:TextInput id="input" />
  </mx:VBox>
</mx:Application>

Now we’ll use data binding to link the two controls so that as the user changes the value in the text input, the value displayed in the text control also changes:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  <mx:VBox>
    <mx:Text id="output" text="{input.text}" width="200" height="200" />
    <mx:TextInput id="input" />
  </mx:VBox>
</mx:Application>

You can see that this example uses curly braces to surround an expression. The expression in this case points to the text input control (with an id of input)—specifically, the text property of that control. This data binding statement tells the Flex application that the text value for the text control should always use the value of the text property of the text input control, even when that value changes.

The preceding example was extremely simple and fairly impractical. However, it does illustrate the basic concept and syntax for data binding. We’ll be using data binding to link components in a similar (though more useful) fashion in the following chapters.