How to Break Apart your Flex Prototypes into Components

Some ambitious business people who dabble with technology, but are more of the sales/marketing type, play with Flex and build prototypes that represent their ideas for future Flex apps. But what they end up with is one MXML file with thousands of lines of code in it.

I have been asked to blog about how to break apart this code into MXML Components, to make the code more manageable. It's a rather simple process, but not one I would expect a non-coder to be able to pull off. So here's a quick tutorial:

First create a folder to hold your components. How about naming it View. All of your components will be part of the View, so this name makes sense. Right click on your Flex Project name and select New>Folder, and then name it.

To create a new MXML Component in Flex Builder 2.0.1, you right-click on your new folder named View, and select New>MXML Component. This will automatically put your new MXML component in your View folder.

You'll see a dialog box which requires some info. You need to enter a filename - the first character of which should be uppercase, as a best practice; because an MXML Component is an ActionScript class. It extends other Actionscript classes, but that's just tech stuff that dabblers don't need to care about. The filename must have a .mxml after it.

Next is Based On and this is the tag pair your component is based on. This requires some explanation, which hopefully won't be a cause for further confusion.

Let's say that I want to build an MXML Component that is a comboBox for the United States. I use that on many different forms, and I'd like to code that once and reuse it often. Every form has FormItem tags that contain each element on the form. So if I wanted to include my States.mxml component, it would need to be based on the formitem tag, since it will be an element of my form - likely between the city and zip code FormItem tags.

Or if you just wanted to include another element on a page you're laying out, perhaps you would base your component on an HBox or VBox, depending on the nature of your layout within the component itself.

Okay, so choose a tag pair to base your MXML Component on and then move on to Width and Height, which are optional. You select the width and height of the component in pixels or percents, if you want, or leave it blank. Hit okay, and you'll see the file that represents your new MXML Component opens before your eyes.

The next step is to put something in your component so we know that it works, when you run the Flex app. All you need to do is type something simple in your component like:

Save the component file as MyComponent.mxml.

In your main application file - the one with the thousands of lines of code - you need to add some code to the application tag at the very top.

What you see is default, but this is what you add to make your new MXML component visual to the Flex application.

What this is doing is creating an XML namespace called View and assigning everything inside the View folder to it.

Now in your main application you simply enter this code

Notice that the tag says view: not mx: That is because we are calling our new XML Namespace called View, and it is loading the components within the folder. Your component was named MyComponent.mxml, and your tag called that component by name after the colon. If you were to create another MXML Component inside the View folder, called MyOtherComponent, you would call it this way

Let's say you had a folder inside the View folder called NavItems with an MXML Component inside NavItems called nav.mxml. You would have to add another XML Namespace attribute to the Application tag like this

Notice that I created a new XML Namespace called nav. Then you would call the component like this

And that's it. Makes sure all of your files are saved, and Run the application.

I hope some of you find this helpful when building Flex prototypes.