How to Design Flex Builder 3 Application Using MXML Components.

Okay, so close off your browser here and go back to your code here, and one of the things you’ll see that as you develop more and more complicated applications, you can probably notice that you’re MXML files can become very large and unwieldy. So in terms of best practices, it makes sense to break up your MXML files into different MXML components and that’s what we are going to learn about next and again, when you have all of your different pieces of your applications stored in different components, this results in a much better experience. It's easier to maintain your code. It's easier to architect your applications, it's easier to follow best practices and for different people to work and it just makes everything much better when we organize these into different files.

So what I would like you now to do is just open up your Fundamentals_wt4 here, and we’ll see just again a very simple application with two different label controls. We have before the component call and after the component call, and what we are going to learn here is how to actually architect an application, using MXML components. Now notice there is a Components folder right there and inside of this Components folder what I would like you do is just right click on the Components folder or Ctrl+Click and I am just going to say, New, and I am going to say, New MXML Component, and what this is going to do is this is going to build me a brand new file inside of that Components folder.

So I am just going to assign it, a name of MyFirstComp, like so and you’ll see it's called MyFirstComp and notice I begin this with a capital letter, because all MXML files ultimately compile down to an ActionScript class and just as a best practice, most programmers begin all of their class files, whether you are talking about ActionScript, whether you are talking about Java, they mostly begin their class files with a capital letter. So we are going to follow that best practice and call MyFirstComp with the capital letter and in this case we want our components to be arranged vertically. So let's base this off of a VBox instead of a canvas so we don’t have to manually set those X and Y positions. So I am going to say VBox right here, and in this case what I want you to do is just remove the width and the height values because the VBox will control that all for us and be able to set up everything nicely, so I am going to get rid of the width and the height and I am going to click on finish and what this does, notice in the Navigator view, it creates a file called MyFirstComp.mxml and it creates that in the Components directory.

Now I would like you to just switch back to your Fundamentals_wt4 and what I want you now to do is add in a custom name space that will recognize our new Components directory and we’ll be able to use all of the components within that directory. So in the Application tag up here, just add in another name space, just like the one that defaults to the components that ship with Flex Builder, let's add in another name space here, I am going to say, xmlns: and I am going to assign this a custom name, and let's call it just comp to make it easier and I am just going to say, is equal to (=) everything that’s in my components directory.

So I’ll just specify, components which as you can see here is the name of my directory and then I am just going to add in a period (.) because it uses dots and tags, and I just wanted to pull in every single component, MXML or ActionScript file within that directory and to do that I can just put an asterisk (*) in, like so and that will put in everything within that particular directory. So I have xmlns:comp = “components.*” I am going to close that off and now it will then recognize all of the components within that directory.

Now you will see a comment that says, Instantiate the component here, and what I want you to do here is let's Instantiate the component that we just created, and of course that’s called MyFirstComp and the namespace here is no longer MX like it is for the default components, but it's now called Comp and notic