Flex Application Anatomy

So if you�ve been following along thus far in the Flex tutorials (more specifically my Hello World tutorial), we�ve managed to create ourselves our very first Flex Project with our HelloWorld.mxml application inside of it. We explored the Properties Panel and even gave a little personality to our application by editing the Style properties.

That was fun and all, but Flex still doesn�t make all that much sense, does it? I thought not. So what we�re going to do now if take a little look behind the scenes and explore the code that makes all of this happen. Let�s open up our HelloWorld application and take a look. If you�re a curious person, no doubt you�ve already taken a peak, but let�s just assume you haven�t and go ahead and click on the Source Mode button located next to the Design Mode button.

Whoa! What the heck is this weird language structure, you ask? Well, as I mentioned above, Flex deals with .MXML files. And really, it�s not all that weird at all. It�s actually quite easy to understand. Ever heard of XML? Well, that�s basically what the MXML language is all about. If you�ve never heard of, or programmed in XML, don�t worry about; it�s easy to pick up. Originally, Flex was a Macromedia product, hence the �M� in MXML. Some really upset developers refuse to acknowledge that this is the reason why this particular acronym exists and feel that it stands for �Magic eXtensible Markup Language.� I say �whatever� to them, and make a simple mental note that it�s just the Flex language. Moving on�

When you create a new MXML application, the first line is always a XML document declaration. You don�t need to worry about this, other than make sure it�s there. What you need to worry about is starting with the �<mx:Application� tag. Our HelloWorld application code looks like this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="615" height="200"
   borderColor="#2C5F83"
   themeColor="#4C9ACB"
   backgroundGradientAlphas="[1.0, 1.0]"
   backgroundGradientColors="[#5EF790, #9C1C6A]">

   <mx:Label text="Hello World! I am amazing!"
      fontWeight="bold"
      color="#FFFFFF"
      fontStyle="normal"
      textAlign="center"
      fontSize="36"
      fontFamily="Georgia"/>

   <mx:Label text="Seriously, these are the most god-awful
      color combination ever imaginable."
      fontWeight="bold"
      color="#FFB400"
      fontStyle="normal"
      textAlign="center"
      fontSize="15"
      fontFamily="Georgia"/>

</mx:Application>

Don�t worry if you code looks a little different than mine, the important thing is that you understand what�s going on. Let�s break this down a little and hopefully you�ll start to see how a Flex application if built.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="615" height="200"
   borderColor="#2C5F83"
   themeColor="#4C9ACB"
   backgroundGradientAlphas="[1.0, 1.0]"
   backgroundGradientColors="[#5EF790, #9C1C6A]">

The Flex �<mx:Application >� tag is ultimately the stage, body, or main container that makes up your application. When a new application is created, Flex automatically generates this for you, based on the preferences you state when you create it. After the application was created, from Design Mode, I changed the style properties and gave my application a new borderColor, themeColor, backgroundGradientAlphas, and backgroundGradientColors - If you remember, those properties resulted in a most horrendous looking stylized application. I want you to know that I�ve moved my code down in a manner that I feel is suitable for my programming needs.

Originally, all of properties associated with an application or component are generated on the same line. Once that line is broken (like in my example above) Flex cannot a/ssist you with code hinting when you want to add a new property (unless you�re on the first line). If you�ve left all of your code on one line, press the space bar and you�ll notice that Flex gives you a dialog for all of the associated properties for your application. There�s a lot, I know� but you�ll learn most of them in due time:

   <mx:Label text="Hello World! I am amazing!"
      fontWeight="bold"
      color="#FFFFFF"
      fontStyle="normal"
      textAlign="center"
      fontSize="36"
      fontFamily="Georgia"/>

After the application has been declared, you can start adding the various elements that make up the rest of your application. As you can see, we�ve declared a �<mx:Label>� and have set it�s �text� property to �Hello World! I am amazing!� Sometime when adding components to the stage (like in this situation here), it may be helpful to switch over to Design Mode and take a look at what the component requires to display properly. I�m only mentioning that because the �text� property is different that the fontWeight property, or color property, yet code hinting displays them all when you�re wanting to add a new property to your component.

Flex does, however, give you some idea as to what property does what by way of an icon next to the name of the property. Please browse the Flex Help files to find out more about Flex properties. Needless to say, as we continue to look at our Label components, I�ve just declared some rather familiar style properties to make it look as amazing as it does. When you�re finished with your component declaration, you always need to conclude the statement with a �>� � in which case, Flex will automatically generate the long-hang version - or a �/>� that end the component declaration in short-hand form. Either way works, except for when you�re nesting other components inside of, say a VBox component, you�ll need to declare the long-hand version, otherwise your nested component will not display properly.

   <mx:Label text="Seriously, these are the most god-awful
      color combination ever imaginable."
      fontWeight="bold"
      color="#FFB400"
      fontStyle="normal"
      textAlign="center"
      fontSize="15"
      fontFamily="Georgia"/>

</mx:Application>

This last section is much of the same, however, you�ll notice the Application tag once more. The reason for that is simple. You need to close your applications lid, if you will. Picture your Flex application as a large box or container that had many smaller boxes or containers living inside of it. Each box or container has a top - <mx:Label> - and a bottom - </mx:Label>. Of course as I�ve stated, can sometimes be the short-hand version. But there is one thing that the short-hand and long-hand syntaxes have in common; the forward slash - �/�. That forward slash tells Flex that the following declaration is the �bottom� or ending point of the that particular components inclusion. Make sense? Take a look my code above and see if you can�t figure it out for yourself. If you fail to state that forward slash, Flex will announce how incompetent you are for leaving component declarations open. You wouldn�t send an open package to post office for shipping would you? Neither would you post your Flex application to the web for viewing unless it is packaged, or in this case, complied correctly. Remember, all components must live WITHIN the <mx:Application></mx:Application> tags.

At this point click right after your last component declaration and press Enter. Start to type �<� and Flex will automatically open up the dialog. Continue to type �<mx� and you�ll see a list of components that you are able to add. Let�s select a TextArea from the list. Press the Space Bar once and now you�ll get a whole new set of options, these are the TextAreacomponents properties. Type �text� and press Enter. This is the very same property that was available to the Label component that we used above. The difference being that the TextArea component allows for multiple lines of code and tons of styling options. Once you press enter, you�ll notice one of my favorite things about developing in Flex. Flex will automatically give you double quotes �� and place your cursor inside of them so that you can begin to type in your text. Copy and paste this text in between those quotes:

All right, listen closely, I was at the unemployment office and I told them I was very close to getting a job with Vandelay Industries, and I gave them your phone number. So now, when the phone rings, you have to answer "Vandelay Industries".

Now, click after the text, press the Space Bar and close the TextArea component properly by typing �/>�. Go ahead and take a look at your application by pre/ssing the �Run� button and check out your modified HelloWorld.mxml. Starting to see how this is working now? Great.

A few more things about how a Flex Application is compiled. Why don�t you start typing in a new component, choose a new TextArea but this time don�t close it properly � leave out the �/>� and save your document. You�ll notice that Flex will automatically see that there is an error with you application because it puts a little red icon at the bottom of your application:

[ you'll see the approximate line number of where an error occured ]

Honestly, that�s awesome. Not the fact that it detects errors, but the fact that Flex checks your application and sees the errors without you having to compile the entire application first. Now, when an error is reported, it�s details will show up at the bottom of the Flex IDE within the �Problems� tab. All errors that are reported during development are reported there:

[ what an error in Flex Builder displays as ]

That brings us to the other tabs that are located beside the �Problems� tab. The �Console� tab is where all of your �Trace� statements that come from the application are displayed. For all of you Flashers, it�s exactly like the Output windows within the Flash IDE. If you don�t know what Trace statements are, don�t worry, well cover that soon. Just keep that in the back of your mind for now. The �Progress� tabs displays the progress of your Flex Application as it is being complied. Click on it and �Run� your application to see what I mean. Lastly, the �Debug� tab is where all issues during �Debug� are displayed. Honestly, I don�t find the �Debug� tab particularly useful, since the �Problems� tabs tends to give me most of the information I need in order to fix my code issues. Regardless, it�s there for a reason and I�m sure that as you become a Flex Master you�ll find it useful for the more complicated issues.

For the final portion of this tutorial, I want you to take a look at the top left of the Flex IDE � the �Flex Navigator.� This is where all the files that Flex has generated and all of the assets and applications that you�ve created within your Flex Project live - this is their house:

[ the Flex Navigator gives you an overview of all of the files in your project ]

There are four separate folders that are automatically generated by flex: bin-debug, html-template, libs, and src. The �bin-debug� folder is automatically created when you create your application and is updated when you �Run� or �Debug� your application. It contains all of the files that are necessary to publish your application to the web. I�ve highlighted the files that you will need to have, in the same structure in order to run your application on your web server. This would also include any sub-folders that many contain external images, movies, .swf files, etc. Like I said, the �bin-debug� is automatically generated by Flex. When you want to create, say, and �assets� folder for your external media, you would create that in the root directory of your Flex Project and Flex will place what is being used into the �bin-debug� directory for you. The �libs� folder where any external libraries that you a/ssign to your Flex Application will reside, but don�t worry about that. And, unless you plan on me/ssing with the default application template files, don�t worry about the �html-template� folder either.

Phew, that was a long one. But I hope that you�re starting to get familiar with the Flex IDE and are starting to understand how this amazing piece of software works. I appreciate your patience with me thus far, and I hope I�ve helped you at least enough to decide whether or not Flex might be something you�d like to learn more about.

In later tutorials, I�ll be discu/ssing more advanced application ideas. For now, feel free to post any of the questions that you may have regarding Flex on the kirupa.com forums � ActionScript 3.0. That is, until Kirupa creates us a dedicated Flex Forum!

Devin Columbus aka dColumbus