Developing Flex applications without Flex Builder

Lesson 1 of 99 Quick Flex Lessons

Although Flex Builder makes Flex application development easy, you can survive without it. In this quick lesson, we learn how to build a Flex application using just a text editor and a command line compiler. The lesson sticks with a very easy example, so that you don’t get distratcted by the application complexity.

First we go get the Flex SDK. The lastest version can be accessed from the Flex 3 SDK download page

Next we fireup a text editor. Pick anyone you like. I am currently on the windows platform and I chose something as basic as the notepad for the purpose. We start coding the Flex application by creating the main mxml application file. Let’s call it WithoutFlexBuilder.mxml.

For beginners we include the Application tag and define the Flex framnework XML namespace as follows:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
</mx:Application>

Then we add a Label and a Button to this application. We set “Flex without Flex Builder” as the text of the Label and “Yes, It Works without Flex Builder!” as the text of the Button. The application code now looks as follows:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Label text="Flex without Flex Builder" />
<mx:Button label="Yes, It Works!" />
</mx:Application>

When you click the button to confirm that things work without Flex Builder, a Label dispays a message “I am Glad, it does.” Therefore our code is extended to include another Label and a click handler function is defined to set the text of the label as desired.

The final application code is as follows:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
private function clickHanlder(evt:Event):void {
	messageDisplay.text = "I am Glad, it does.";
}
 ]]>
</mx:Script>
<mx:Label text="Flex without Flex Builder" />
<mx:Button label="Yes, It Works!" click="clickHanlder(event)" />
<mx:Label id="messageDisplay" />
</mx:Application>

We save this code as WithoutFlexBuilder.mxml.

Now we need to compile this mxml to a swf file, so that we playback the file in the flash player.

We go to the SDK directory and then traverse down to the bin directory within the SDK directory. The bin directory has a number of executables. One of the executable files called mxmlc is the command line compiler that can compile ActionScript and MXML files to SWF. Configuration and options can be passed to this command line compiler. However, because our case is tivial we do none of that. We simply invoke the mxmlc command and pass our mxml file as its target.

The command then is:

mxmlc C:\workfolder\WithoutFlexBuilder.mxml

The result of this command is the creation of a SWF file with the same name as our MXML file. Finally we open WithoutFlexBuilder.swf using a browser (Firefox in my case). The simple applications looks as shown:

It behaves as desired. That is on pressing the Button it displays the message — “I am Glad, it does.”

Thats it! You have built a simple but complete example without using the Flex Builder. In the next lesson we dig deeper into the command line application compiler and also look at the component compiler.