In the previous lesson we briefly discussed creating a flex application. In this lesson I will discuss how to create a flex application and walk you through the process of creating one.

Most tutorials and books teach Flex on the assumption that you are going to use Flex Builder to write your flex applications. I prefer to think you will use your own IDE. Therefore, we will focus on making flex UIs using simple text editors like Notepad or TextMate.

Recap a few important points we have covered in the previous lesson:

1. MXML is used to layout user interface components like buttons and accordions on the canvas similar to laying out buttons and images on a web page.
2. MXML is compiled into Actionscript which is inturn compiled into binary SWF files. This means one can write flex applications entirely in Actionscript but it will be very laborious.
3. Actionscript is used to add behavior to flex elements similar to javascript being used to add behavior for HTML elements.

Actionscript – A New Language To Learn?

If you know Javascript, you know 95% of actionscript. Both languages have the same syntax. In fact both languages are derived from  the same language – ECMAScript. However, Actionscript has additional programming constructs like classes, variable type annotations, interfaces among others.

How Are Flex Applications Compiled?

Flex applications are a combination of mxml files that make up the user interface layout and the actionscript files that add the behavior to the user interface elements declared in the mxml file. The actionscript files are attached to the mxml file using special tags similar to using <script> tags to attach javascript files to html files.

They are compiled using the mxml compiler using the following command:

mxmlc nameOfFile.mxml

Here mxmlc is the flex sdk compiler and nameOfFile.mxml is your mxml program.

Steps Involved In Creating Flex Applications

The four steps involved in creating a flex application are:

1. Define and arrange the user interface widgets in the mxml file.
2. Write actionscript code to respond to events on these widgets.
3. Style the user interface using css if needed.
4. Create the swf file.

Creating a Simple Calculator application

In this chapter I will step through the process of creating a simple Flex application – a calculator.
This calculator will be a simple application. It will have the numbers from 0 to 9 and be able to add, subtract, multiply and divide. The final product is as shown below:

Step 1: Defining the user interface elements

Buttons – The buttons in this case are implemented as simple <mx:Button> elements.

Layout Of Buttons –The buttons are placed inside a grid layout of 235px width and 100% height. The grid has 4 rows – the first two rows have the operations, the third row has the operations and the last row has the reset button. This grid is set at an x-offset of 10px (from left) and y-offset of 35px (from the top).

Operands box – the text area where the current operand of the operation is displayed is given an absolute position (similar to the grid layout) of (x,y) = (10,10).

Step 2: Adding the behavior of the buttons

Handling Clicks On Number Buttons

Defining a function for each numeral button will be laborious. Therefore we will define one function that handles the user clicking on any of the number buttons. The argument to the function is the number which has to be appended to the entry in the Operands box.

Do not worry about the implementation of the event handler methods.

Handling Clicks On Operations Buttons

Similarly the operations keys also need to be attached to an event.

The Reset button also has a event handler to reset the operand displayer to 0 and to reset the internal variables used to perform calculations to their initial values.

Step 3: Style the user interface

In this step we would ideally change the style using some css styles however we would like to keep the default look and feel of the application therefore we will skip this step.

Step 4: Building the application

Let save this application under D:\temp as calculator.mxml. Once you install flex sdk and add the bin directory to your system’s path variable, you will be able to run the mxml compiler (called mxmlc) from any directory in the command prompt.

In windows, change to the directory where you saved your mxml file. In my case it is D:\temp. Then type the following command:

D:\\temp>mxmlc calculator.mxml

When the compilation finishes a new file named calculator.swf is created in the same directory. This file can be embedded in your web pages and web applications.

You can get the basic implementation of the calculator here:

http://www.expeditionpost.com/codeexamples/flex/lesson1.zip

In the next chapter we will dive into the syntax of actionscript and how to use it to add behavior to flex interfaces.