Okay, close your browser window by clicking up here and what I'd now like you to do is close off your Fundamentals_wt3 and open up Fundamentals_wt4.mxml, and what we're going to learn here is we're going to learn about how to architect an MXML application, and we're going to learn best practices.
So one of the things that you absolutely want to avoid is having one big long MXML file. That becomes a nightmare for maintenance reasons, it's impossible to follow along what you're doing in your code, it's impossible for other people to work on the same project at one time, and it's just generally a bad practice to have really long MXML files.
What makes a lot more sense is to divide your application up into separate components, into separate logical blocks. So remember, right now we're actually architecting very complicated applications within the Flash Player on the client side and in order to effectively use the capabilities of Flex, we want to divide our application into separate manageable pieces, and we can do that by using MXML applications.
One of the things we've already spoken about is the main application file has our application tag that we've talked about before. All of our components will be instantiated within this main application tag, and the components themselves won't have an application tag. So let's get an idea of how to actually build an MXML component. So what I'd like you to do is click on the File, Menu Item, choose New, and say MXML Component.
This provides a little wizard that allows us to build our own custom MXML component. So I want you to be sure that it's set to the Fundamentals Components folder, so point that in. We're going to create this in our Components folder, and I want you to assign a file name to this called MyFirstComp.mxml as you see there and I'd like you to base this on a VBox control. So scroll down here and find the vertical box container.
Remember, in our main application, the main application can be a Vbox, if we specify the layout is equal to vertical (layout = vertical) then it becomes as a VBox. So remember, this will display all of our controls in a vertical fashion. So what I'd like you to do is click on Finish, once you've done that, and it will build the skeleton of our component.
Notice instead of having an application tag here, I have a VBox tag and it specified the width and the height, and it has also specified my default name space MX to be that adobe.com/2006/mxml which maps to that manifest file within our program files directory. So let's just create three label controls and we couldn't make it really any easier. So just say mx:Label and specify the text property equal to just a string, and let's make this very noticeable. So put in some asterisks and say Start of component and then add in some more asterisks, so we will be able to see exactly how this is implemented and close the quote, close your label tag and then just simply add an another label control like so and say text is equal to End of Component, okay, End of component of course, we could put in any other controls. Here we're just using labels to keep the example as simple as possible but you can put in data grids, panels, other containers, H boxes, basically anything you like, you can put within this component.
So now, I am going to close that, close my tag and what I'd like you now to do is just simply save this. You should see there is no errors, no problems which is always a good thing and then switch back to your main application which is your Fundamentals_wt4, notice of course it's our main application because we can see the application tag and what I now have to do is instead of using this name space for all of the default components within Adobe Flex such as the data grid, the label control. I am going to add in my own custom namespace. So if you get this there, make sure you put Yes and I am simply going to say XML namespace (xmlns:>) and I am going to assign this a suffix of Comp and again, you can call this whatever you like. I am just calling it Comp and I am going to say is equal to Components.*. Now components is of course the folder and you can see that in my navigator view where my first comp is stored.
So you will see my first comp is stored here and this is just saying import all of the MXML files or .AS files which we'll learn about as we go through and we work more of ActionScript classes, let's say we are going to import all of the files into this namespace and I will at a reference of that namespace whenever I need to and then you'll see I have a comment here that's already been added and right after this comment, just instantiate your component.
So to do that, instead of using MX namespace, just use the Comp namespace that you've created before and notice Flex Builder is smart enough to introspect and find, hey, there is two components in there and one of the ones is the Custom Components you built called my first comp. So just say my first comp, close the tag and then, do that, and it really couldn't be any simpler, and just click File, Save. You should see that there is no problems and then, when you run your application, you should see that, that component is now built in to the rest of your application. Notice here is your before the component comp, and you have your start of component, and your end of component and then this label is back in the main application.
So you've organized your application, you've architected your application, much, much better than having one big long MXML file because particular states of your application are located in their own component. So it results in a very, very nicely architected application, and if you ever find yourself looking really long MXML files, take a good hard look at your application, and figure out when it could be architected much more cleanly, much more efficiently by dividing things up into separate components.
Transcription by:
Scribe4you Transcription Services