Flash, Flex and ActionScript tutorials – flashadvanced

In this simple example I will show you how to use the ComboBox component in Flex. We will create an ArrayCollection with items which we will use as a dataProvider for the comboBox. Below you can see the working code for this example.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

 <mx:Script>
 <![CDATA[
 import mx.collections.ArrayCollection;

 [Bindable]
 private var comboBoxDataProvider:ArrayCollection = new ArrayCollection(["One", "Two", "Three", "Four"]);

 ]]>
 </mx:Script>

 <mx:ComboBox id="comboBox" dataProvider="{comboBoxDataProvider}" />

</mx:Application>

As you see, we created the ComboBox component and as a dataProvider we set the ‘comboBoxDataProvider’ variable. It is from type ArrayCollection and it is declared as Bindable. The [Bindable] Meta tag in Flex allows you to map an object or value to a property. It is also know as data binding. Next, in the constructor of our ArrayCollection we create an array of strings:

new ArrayCollection(["One", "Two", "Three", "Four"]);

This is enough. Now we have a comboBox component with 4 elements.

If you want to change the default browser in Flex, you can do this in Flex Builder by going to Window -> Preferences. Then expand General and choose Web browser. In the ‘External Web browsers’ list choose the browser you prefer – in my case Firefox.

This is it. Enjoy!

The default blue background color in Flex 3, set while the application is loading, is pretty annoying in my opinion. You can change it easily by setting the default background color property in Flex Builder. You can do this by selecting the project, then right click and choose Properties. Go to Flex Compiler and then in the ‘Additional compiler arguments’ type this:
-default-background-color #ffffff

This will change the color of the application while it is loading to white.

A strange thing in Adobe Flex is that setting up the corner radius to a Canvas component with the cornerRadius property is not enough.

Solution

The thing you should do in order to have the corners of the Canvas rounded is to set the borderStyle property to solid.
So, at the end you will have something like this:


<mx:Canvas width="400" height="300"
borderStyle="solid" cornerRadius="10" />