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 create a container component in your Flex application and then create a child of the container which size is bigger than its parent, scrollbars will appear on the bottom and the right sides of the container. If you want to disable the appearance of the scrollbars you should use the verticalScrollPolicy property for the vertical scroll bar and the horizontalScrollPolicy for the the scroll bar shown on the bottom side of your container. When set to “off” these properties will hide the scrollbars. In the following code example we will create a VBox component in which we will add a button. The button component will have a little bit bigger size than its parent. By default, Flex will add scroll bars but we will prevent this functionality.
<mx:VBox id="myVBox"
verticalScrollPolicy="off" horizontalScrollPolicy="off"
width="200"
height="200">
<mx:Button id="myButton"
label="My Button"
width="210" height="210"/>
</mx:VBox>
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" />
In this quick tutorial I am going to show you how to create a nice glowing button effect using Flash and few lines of AS3 code in order to control the button. Let’s get started
Read more…
