Tutorials
Books
Videos
Forums
So if youve been following along thus far in the Flex tutorials (more specifically my Hello World tutorial), weve 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 doesnt make all that much sense, does it? I thought not. So what were going to do now if take a little look behind the scenes and explore the code that makes all of this happen. Lets open up our HelloWorld application and take a look. If youre a curious person, no doubt youve already taken a peak, but lets just assume you havent 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, its not all that weird at all. Its actually quite easy to understand. Ever heard of XML? Well, thats basically what the MXML language is all about. If youve never heard of, or programmed in XML, dont worry about; its 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 its just the Flex language. Moving on
When you create a new MXML application, the first line is always a XML document declaration. You dont need to worry about this, other than make sure its 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>
Dont worry if you code looks a little different than mine, the important thing is that you understand whats going on. Lets break this down a little and hopefully youll 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 Ive 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 youre on the first line). If youve left all of your code on one line, press the space bar and youll notice that Flex gives you a dialog for all of the associated properties for your application. Theres a lot, I know but youll 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, weve declared a <mx:Label> and have set its 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. Im only mentioning that because the text property is different that the fontWeight property, or color property, yet code hinting displays them all when youre 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, Ive just declared some rather familiar style properties to make it look as amazing as it does. When youre 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 youre nesting other components inside of, say a VBox component, youll 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, youll 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 Ive 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 cant 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 wouldnt 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 youll see a list of components that you are able to add. Lets select a TextArea from the list. Press the Space Bar once and now youll 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, youll 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 dont you start typing in a new component, choose a new TextArea but this time dont close it properly leave out the /> and save your document. Youll 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, thats 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, its 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, its exactly like the Output windows within the Flash IDE. If you dont know what Trace statements are, dont 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 dont 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, its there for a reason and Im sure that as you become a Flex Master youll 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 youve 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. Ive 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 dont worry about that. And, unless you plan on me/ssing with the default application template files, dont worry about the html-template folder either.
Phew, that was a long one. But I hope that youre 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 Ive helped you at least enough to decide whether or not Flex might be something youd like to learn more about.
In later tutorials, Ill 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 |
|
Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy kirupa's books, became a paid subscriber, watch the videos, and/or interact on the forums. Your support keeps this site going! 😇 -Devin Columbus aka dColumbus 
:: Copyright KIRUPA 2026 //-- |