Hands on: Get started with Flex Builder

Hands On with Flex Builder
Here’s a short tutorial based on Flex Builder 3, which at the time of writing is a beta product available for download.

If you like the look of Flex, but cannot afford Flex Builder, remember that the SDK is free.

The free Javascript IDE, Aptana, supports AIR applications but not yet MXML, or you can use any editor.

Flex Builder, based on Eclipse, is a culture shock if you are used to Visual Studio. Here is a quick example. Start a new Flex project and choose Desktop application. Give the project a name and click Finish. Click the Design view if it is not already selected. This gives you a blank surface, onto which you can drag controls from the control palette. Drag a button and a label. Now imagine you want to click the button and have the label change. In Visual Studio you would double-click the button and write some code for the click event.

That won’t work in Flex. Here are the steps:
1. Select the label control and type an ID property. This is the equivalent of the Name property in Visual Basic.

2. Select the button again, and type

changeLabel()

for the On click event.

3. Now select the Source view. Move the cursor to line 3, which is just after the opening tag of .

4. Type

and press Enter. Flex Builder will automatically create a CDATA block. Script code is not well-formed XML, so it must be either in a CDATA block or in a separate file.

5. Type the following function:

private function changeLabel():void
{
myLabel.text = “Hello Flex”;
}

6. Now click the green Run button. The application will run and you can click the button successfully.

There are a few things to notice here. First, Actionscript is case-sensitive. Second, Flex Builder supports code completion. When the IDE pops up a list of possible statements, use the arrow keys to select the one you want, and press Enter to have it automatically typed in. You can summon the code completion list at any time by pressing Ctrl & Enter. Third, the visual designer in Flex Builder is more limited than the one in Visual Studio. Many Flex developers spend most of their time in the Source view. Fourth, anything you do in MXML can also be done in Actionscript. An MXML element is a shortcut to declaring and instantiating an object with certain properties.