I thought that I would write a little tutorial showing how to create a Flex application using the Adobe Flex SDK. The Adobe Flex SDK is a great tool because of how powerful it is an also because it is 100% free. I will cover where to get the Flex SDK, how to write mxml, and finally how to compile the application.
First Things First – Getting the Flex SDK
Before you can build any Flex applications you will need the Flex compiler (aka mxmlc). Not to worry you can get this for free as part of the Flex SDK. You can find the SDK on Adobe’s site or use the link below. Flex 3.3 SDK will work on all platforms.
Once the download is complete you will need to extract the files from the zip. You can extract it anywhere you want, for the rest of this tutorial I will be assuming you extracted it into C:\flex_sdk_3. The main file you will be needing from here is mxmlc.exe which will be inside the “bin” directory (e.g. C:\flex_sdk_3\bin\mxmlc.exe).
We will come back to this compiler after we have some code to use it on.
Lets Write Some Code
We will be created just one file for this tutorial, so where every you would like create a new file named helloworld.mxml. I suggest making a folder for each of your Flex applications just to help keep things clean. For this example I created a folder called “hello world”. This file will simply be a text file so you can use what ever editory you like be it notepad, wordpad, emacs, jedit, ect, I will be using vim because its the best. The language used to write Flex applications is called MXML and like the name implies it is a form of XML so each MXML file needs to start with the following line at the very top.
<?xml version="1.0" encoding="utf-8"?>
Now lets add some actual MXML code, we will start with the <mx:Application> tag. This is the first tag that all of your Flex applications will start with. This is similar to how all HTML pages start with an <HTML> tag. Below is code for the most basic Flex app you coild possibly write.
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> </mx:Application>
Here is a screen shot of me editing my mxml file.
Believe it or not this is enough code to compile so lets do that before we go any further to make sure that everything is working
Compiling Your Flex with mxmlc.exe
So we wrote a little code and now we want to see what it will produce. We will be using mxmlc to compile this mxml into a swf. So it is time for you to remember where you extracted your Flex SDK, I put mine in C:\flex_sdk_3 so I will be referencing that location, if you have it somewhere else be sure to make the appropriate changes to my instructions. Once you locate your SDK folder you will want to look inside for a folder called “bin”. It is inside of this bin folder that you will find the mxmlc compiler. There are two ways that you can use this compiler, the first and most simple way is to simply drag your mxml file and drop it right on top of mxmlc.exe. You will see a window open while mxmlc is running, which will close as soon as mxmlc is done. Assuming all goes well you will find a freshly made swf called helloworld.swf inside the same folder as your helloworld.mxml. While this way may seem super simple it has several draw backs. If there are compile errors you will not be able to see them because the window closes immediately. Secondly you will not be able to add any extra compile options using the drag and drop method. I suggest using the second method of running mxml from the command line. If you are in windows XP you will need to click on the start menu then click “run” and then type “cmd” and press enter. This will open up a new window with a command line. In Vista you simply click start menu and type “cmd” in the search box. Once you have the prompy open you will have to move to the directory where your helloworld.mxml file is located. Now to compile your Flex you simply run mxmlc and pass it helloworld.mxml as a parameter. To do that run the following command on the command line.
Here is a screen shot of mxmlc running on my computer.
Again once mxmlc is done running you will have a helloworld.swf in the same folder as you helloworld.mxml or you will see some sort of error message from mxmlc. Like I said before if you run the swf you will see nothing more than a blue background.
Lets add some more code
So we made an app if you can call it that so now lets do something a little more interesting. We will be using the <mx:Label> tag to display some text in our app. The <mx:Label> tag has a text attribute that allows you to set the text that you wish to display. See the code below:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Label text="This is my first app"/> </mx:Application>
Now you should compile this again just how we did before. After you have compiled your mxml again if you run this swf it should like something like this.
Now lets add one more thing to this app before we call it a day, a Panel component. To do this we will use the <mx:Panel> tag. A Panel is similar to a window, it has a border and a place for a title. Lets take a look at some code.
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Panel title="Hello World"> <mx:Label text="This is my first app"/> </mx:Panel> </mx:Application>
Again you should compile this code and see what we have now. Here is a screen shot of what it should look like.
Well thats it for now I know this was a very simple example but I just wanted to get you used to using the compiler and writing some mxml. I hope I sparked your interest in Flex and you will continue to experiment and learn. Here is a link to the Flex 3.3 documentation: