This content requires Flash

To view this content, JavaScript must be enabled, and you need the latest version of the Adobe Flash Player.

Download the free Flash Player now!

Okay, you'll see we have the Flex Builder Tool opened, and if you have any other projects opened, be sure to delete those projects. So you're starting with a clean slate. What we're now going to do is, set up a new project for our Fundamentals unit. So what I would like everyone to do is in the Navigator pane, just right click, choose New, and choose New Flex Project, and you'll see that the wizard appears.

Let's make this a basic project, and I'm going to assign this a project name of Fundamentals, and again, be sure to uncheck your used default location, if that's checked, and browse to your Project Files, and choose the Flex Fundamentals folder to point to. Go ahead and click OK, once you've done that, and then click on Next, and for our main application file, we want this to be the walk-through 2, file that you see here, Fundamentals_wt2.mxml, go ahead and click OK. Then click Finish, and this will set up your project. You'll see all of the different files that we'll be using throughout the project, as well as the Components folder, and this we'll be converting later on in this lesson.

So first of all, what we'll see here is, we'll see our Application tag, and we'll see our XML name space that we've already worked with. You'll also see the different label controls that you have available here, and we've set the font size of these. Let's just take a quick look at what we have. So I would like you to run your application by clicking here, and you'll see that we have a bunch of labels, and all of these different labels are actually stacked up on top of each other. This is the first label, and you'll see that all of these are actually stacked up on top of each other by default, because I've simply specified the layout is absolute.

As we've talked about briefly before when the layout is specified as absolute, you must specify the X and Y position of each control. Flex does this by controlling each one of these using that container, and the application itself is a container. So when you specify the layout is equal to absolute for the application, that means you can simply specify the X and the Y coordinates for each control. So I'm going to make this writable, as you see there, and I'm simply going to say the X position of this is equal to zero, and let's set the Y position equal to 50. So you'll see I have that there, and again I'm going to set this, also X=0, and I will set the Y=100, and I'll do the same thing for the last control, X=0, Y=150.

When I save, you'll see again, there are no errors. When I run the application, you should see that my Label controls are now separated very nicely, because I've specified that as the absolute. Well, the Flex layout containers also contain -- again it can be very tedious to set the X and the Y properties of each container multiple times. So the Flex containers also have other easier ways of laying out these controls.

So let's remove the X and the Y coordinates from each one of these, and if you move up to your layout, I can simply specify instead of saying layout is absolute, I can say, layout is equal to horizontal or vertical. So if I choose horizontal, Flex will automatically handle the spacing between each of these controls, and it will arrange them in a horizontal fashion. So if I hit by File > Save, again, and run the application, you'll see that specifying this in horizontal fashion controls spacing, set that up nicely, and uses the available real estate on the screen by specifying it, labels equal to horizontal.

Conversely, I can also set this to vertical, under here, so if I change this to vertical instead of horizontal, Flex will handle this for me, and again, you'll see it automatically centers it, and it specifies the location of each control on the screen as you can see there. Now you also have the flexibility to control different layout. So for example, what I can do here, is I can actually put an HBox control, and surround these with HBoxes.

So if I say mx:HBox, as you see there, and then I surround these two Label controls within an Hbox, like you can see here, you'll see that both of these are now in a horizontal box, and then this top one will be laid out vertically. So let's look at the results when this occurs. So what I'm now going to do is, again run the application, and you'll see the first label is arranged vertically, but the second two label controls are arranged horizontally, because I've used an HBox within the application. This allows me a great deal of flexibility in terms of setting up the actual application.

Okay, you'll see we have the Flex Builder Tool opened, and if you have any other projects opened, be sure to delete those projects. So you're starting with a clean slate. What we're now going to do is, set up a new project for our Fundamentals unit. So what I... click to read more