Data Centers

Flexing some muscle

Macromedia's Flex allows developers to create rich presentation layers for Internet applications using Flash. We'll show you how to get your first Flex application up and running.

Macromedia's Flex allows developers to create rich presentation layers for Internet applications using Flash. We'll show you how to get your first Flex application up and running.

To get started, you will need to download a trial copy of the Flex Server and the Flex Builder tool. Both the tool and server are available from Macromedia's Web site.

The Flex server runs on a number of platforms, including IBM AIX, Windows, Linux, and Solaris. The Flex Builder tool runs on Windows, so it is not a bad idea to download the Windows version of the server as well so you can setup your development environment locally. It is also possible to use other IDE's to build Flex applications, including Eclipse, but we will stick to Macromedia's tools for this article.

The installation for the server and development tools is straightforward and if you do not have a Java application server running, you can elect to install JRun at the same time you are installing the server. Once you have installed these tools you can verify that your installation is working correctly by viewing the sample applications that come with the product.

In the Start menu under the Macromedia Flex program group there is a shortcut to these samples but you will need to make sure that your server is running before you attempt to view them. There is also a shortcut in the program group marked Start Integrated Flex Server.

Note: this server window will need to stay open while you are working with your Flex server. If you close it, you will also closedown the server.

Once you have started the integrated server, you can then view the sample applications, either from the shortcut in the Flex program group or directly from your browser by navigating to http://localhost:8700/samples/ which will open a page listing all of the sample applications. You can click on any of these samples to run the associated application. The RSL Sample Application is a fine example of Flex integration and demonstrates the use of three Flex applications in a single page. These applications include a blog viewer, a contact manager and a share portfolio manager, all rolled into one user interface.


Figure 1: Sample Flex applications

Creating your First Application
Flex applications are driven by MXML, an XML-like language that describes the application and ActionsScript, which is an EMCA standard scripting language used in conjunction with MXML. (Similiar to the relationship between ASP.NET and C#.)

You can create MXML and ActionScript using Flex Builder, Notepad, or the editor of your choice. In this example, we are going to use Flex Builder to create our first application, as its user interface was created specifically for this purpose, but if you are an ardent Notepad fan then that is an option for you as well.

Open Flex Builder from the Flex program group in the Start menu and select File > New to open the dialogue.

From the category list, select Flex development and from the list on the right-hand side, select MXML application and click the Create button. This will open a blank application page that shows the MXML code at the top of the page and the actual user interface at the bottom. The first thing you will want to do is save your MXML fileâ€"the easiest way to follow along with this tutorial is to save your file alongside the sample applications, which are located when you install Flex with the JRun option:

C:\Program Files\Macromedia\Flex\jrun4\servers\default\samples\

For this example I have named the file SAMPLEAPP.MXML.

In this tutorial we are going to be creating a simple product selector that will allow the user to select from a number of drop-down lists to select the colour for a new car and then add these choices to text box, as well as display a picture of the selected colour, as shown in Figure 2.

This will give you a good idea of how controls work within Flex, as well as how to create and use arrays. The techniques in this tutorial can also be applied to your own application.

To start, we need to add a few controls to our application. Locate the tabbed toolbar at the top of the page and click on the Controls tab. Click on the Combo Box control to add it to your form. You will notice that in the -Code View" that an MXML tag has been added that looks like the following

<mx:ComboBox>
</mx:ComboBox>

MXML tags have an open and close tag and you can -shortcut" the close tag instead of having it seperate, as shown below:

<mx:ComboBox />

Next, we need to add a text box to your form. This will be used to display the colour they have selected from the combo box. Click on the Text Area icon to add a text area to the page.

And finally, we need to add an image to our page to display the colour the user has selected. When you click on the Image icon, a standard open dialog will appear and allow you to browse and select the image you want to use. For now, select the BLUE.JPG image as this will be the default colour that is displayed for the user. A little later we will insert the code to change the image with the user's selection.

Listing A

Tying it all together
Now that we have all of the user interface elements finished, we can get started on some of the code behind the scenes. The first thing we need to do is to create an array that will contain the data for the Combo Box we placed on our application.

This array will have two elementsâ€"a -Label" that will appear to the user both in the combo box and the text box above and a -Data" element that will contain the file name of the corresponding image to display.

Arrays in MXML are defined by entering an ID and using an OBJECT tag to describe the array members, as shown in the code listing below:

<mx:Array id=”colorArray”>
<mx:Object>
<label>Blue</label>
<data>blue.jpg</data>
</mx:Object>
<mx:Object>
<label>Silver</label>
<data>silver.jpg</data>
</mx:Object>
<mx:Object>
<label>Red</label>
<data>red.jpg</data>
</mx:Object>
</mx:Array>

Add this code near the top of your application, right below the application definition. Next, we will need to tie the combo box to this array. Locate the definition for the combo box in your code and edit the MXML to read as below:

<mx:ComboBox id="carColor" dataProvider="{colorArray}"/>

This is simply giving our combo box a proper name -carColor" and setting the data provider to be the array we just created.

For our text box, we want it to display the colour that the user has selected so we need to do a bit of editing there as well. Locate the MXML code for the text box and modify it as shown below:

<mx:TextArea text="You have selected a {carColor.selectedItem.label}" />

Here all we are doing is displaying the colour selected using the label that appears within our array. And we are almost finishedâ€"the last bit of editing is for dynamically changing the colour image that appears at the top of the page. Modify the image tag to read as follows:

<mx:Image source="{carColor.selectedItem.data}" width="100" height="100"/>

This will dynamically change the colour depending on what the user has selected. You can now run your application directly from within Flex Builder by clicking the Run button from the toolbar on top of your application page. Your application should look like the one shown in Figure 2.

A user selects a colour from the combo box, the text and image should change to reflect their selection.

Where to go from here
This is just a simple example of what Flex can do and there are a number of resources available if you would like to tackle more complex applications. A good place to start is by looking through the sample applications provided to see what is going on behind the scenes. In addition, Macromedia also has a number of tutorials that are available on their Web site and there are a number of good books available, including Developing Rich Clients with Macromedia Flex (Macromedia Press) which can provide a good starting point for your own development.


Figure 2: The Flex Builder IDE

Editor's Picks

Free Newsletters, In your Inbox