Flex and the Interface part 2

Let’ get started using Flex and learn how to create a new MXML project and make a small application.

With Flex open go to the option bar and click File > New > Flex Project.

New Project Dialog Box

new Flex project

In this dialog box you will enter the name to your new project. I named my firstProject you can save it in another location but I left mine in the default location of My Documents/Flex 3. Just leave there rest as the default settings, we will get into the AIR applications later. Now click the Finish button and that will set up the project and create all the folders needed for the project to work.

It will take a second to load up and when it does you will see an MXML with your your projects name now open in the workspace. You will see two buttons located at the top of the workspace
one says Source and the other is Design. Design will show you the design view and Source will show you the code view only. As you get used to using ActionScript 3 you will spend most of your time in the Source view but if you are coming from Flash and have a lot of design experience then you will keep wanting to use the Design view to do everything but it will change trust me.

Now click on Design view and you will see all the properties and components that are available. There are too many to list here but as we use them I will try to explain what they do if need be.

We also need to make sure you have the Flex Properties window open. So go to Window > Flex Properties and click. This will bring up the Flex Properties on the right side of the workspace.

So let’s put something on the stage. We need to make sure we are in the design view so click on the Design tab at the top of the page and this will show you the default color background and the stage to put things on.

Now we are going to put a button on the stage so located at the bottom left of your stage you should have the Components tab, if you don’t have it click, window > Components, and the tab will appear. Now click the plus sign to the left of the controls folder to expand it and you will see all the components located inside. Here is where you will find the button we are looking for.

So click on the button and drag it to the upper left corner of the stage. You will notice that the button says Button on it. We can change this by going to the Flex Properties tab and under the Label field rename it Hello World. Notice how it resized to fit the words that were placed inside the button?

Now we need to put a text box on the stage as well. So back in the Control folder go down to where it says Text and click and drag it to the center of the stage.

We want to give this Text box an ID so in the Flex Properties tab go to the ID field and type an id name. I’m naming mine txtBox.

Lets format the text as well so make sure you click on the text box on the stage and in the Flex Properties tab under the text field change the size to 20 and the color to White or xFFFFFF.

Why we are in the text properties let’s take out the word Text in the test field and leave it blank.  As soon as you click out of the box you will notice a square box on the stage. This is just letting you know where the box is located.

We should give our Button an ID as well so click on the Button and notice how the Flex Properties changed. It will change to give you the properties of the component you have selected. Now in the ID field name the button myBtn.

Now let’s make something happen.  If you click on the button component on the stage you will notice in the Flex Properties tab that there is an On click field. This is where we need to enter a little code to make the button work and display our text.

So click inside the On click input field and type:  txtBox.text=’hello world’.  This is the text that will show up in the text box when we click on the button.

The code is layout like this: txtBox (is the name of the text component that is on the stage and we named it txtBox), now the .text is telling the MXML tag to put the text or string that follows the .text  in the component named txtBox . To do this the .text must have an = sign and a single quote followed by your text and closed with a single quote.

The single quotes need to be used because the On click function uses double quotes and you can never combine the two.

Now we are ready to test the application. So press the F11 key(pc) or command F11(mac) to test the application. When you do press the key this will open up your browser and your button should be on the stage.

If you click on the button your text Hello World should appear in the middle of the stage.

The first time you run a program you might have a problem with the program saying that your Flash Player is not the debugger version. If this is the case follow the link and download the debugger version for your operating system and then it should run just fine.

Congrats you just finished your first Flex project.