1.1. Introducing Flex through Its Controls and Containers

Flex is an RIA development framework. It provides a set of controls, services, and utilities, which can be readily used together to create rich and engaging applications. Developers programming in Flex use ActionScript 3 (AS3) and MXML to create user interfaces, consume data, provide interactivity, and maintain state.

AS3 is an object-oriented programming language that has a close resemblance to the Java and JavaScript programming languages. MXML is an XML-based declarative language, which makes programming intuitive and easy. All MXML code is translated automatically to AS3 before it's compiled. This intermediate AS3 representation of the MXML code is often deleted unless a developer specifies that that it be saved. Generated AS3 representations of MXML can be saved by explicitly specifying the "-keep" option to the Flex compiler. AS3 compiles to a byte code format called "swf," that runs within the Flash Player virtual machine.

Figure 1-1 shows the essential parts of the Flex framework in a diagram. A Flex application, on compilation, can output a swf file that is ready to run in a Flash Player, or it can output a swc file that can be consumed as a library and made part of a swf file. A swf file can be dropped into a web server and accessed over the web using the standard HTTP protocol. When accessed by a user, the swf is downloaded locally to the user's machine and played in the local browser that hosts the Flash Player. Figure 1-2 depicts the accessing of a swf file in a diagram.

Figure 1.1. Figure 1-1

Figure 1.2. Figure 1-2

At this point, let's write a simple example application to reinforce the basics you have learned so far. The sample application has two visual interface components: a text input and a text display area. Each of these components has a label attached to it. The labels help the user understand what to input and what sense to make of the display. The source for the visual controls alone is:

<mx:Label text="What's your name?"/>
<mx:TextInput id="textInput"/>
<mx:Button id="button" label="Submit" click="clickHandler(event)"/>
 <mx:Label text="{yourName}"/>

The visual controls code suggests the presence of an event handler that is invoked on the click of the button labeled "Submit." The code for the click handler is:

[Bindable]
    public var yourName:String;

    public function clickHandler(evt:Event):void {
        yourName= "Hello, " + textInput.text + " !";
    }

Next, the source needs to be compiled. For now, I compile this code simply by pressing the Run button in Flex Builder (which is now called Flash Builder), the official Eclipse based Flex integrated development environment (IDE) from Adobe. Unlike the Flex SDK, which is an open source and freely available tool set, Flash Builder is a purchased, but inexpensive, product. IntelliJ IDEA is an emerging alternative to Flash Builder, as it now supports Flex development. IntelliJ IDEA does not support the Flash Builder style "design" mode though. No IDE at all is also an option. The Flex SDK can be used without any IDE to compile the code successfully. The compiled output using any of the preceding methods produces the same program in a swf file format.