After a long hiatus from blogging, I am going jump start posting with a post series on Adobe Flex. Flex is very useful to create a web application. In the age of software as a service where more and more web applications are required to look like desktop applications flex is becoming increasingly important.

When you are done with this tutorial you will be able to:

• Spend less time coding user interface behavior which means you can get more done in less time.
• Create user interfaces that look uniform regardless of the browser or operating system
• Save time by not writing browser specific work-arounds
• Create user interfaces that consume less bandwidth and do more with fewer lines of code
• Convert your existing web applications into a desktop application with the same user interface.

Why would you use flex?

• To create user interfaces for your software as a service applications.
• Create web applications which will also have a desktop version that can run in Windows, Linux and Macintosh.
• To create animations in Flash without learning to use Flash CS4.

Flex is a tool used to create user interfaces for applications in Flash. These applications can be desktop applications (like Google Talk) or web applications (like GMail). It is a xml file format like HTML in which you specify where your user interface elements go. Flex programs are written using MXML and Actionscript.

To make a useful flex application that does something when the buttons are clicked, the user’s input has to be processed and an output has to be generated. In web pages this is done using Javascript. In flex applications Actionscript does this. Actionscript does for MXML what Javascript does for HTML – adds behavior to your user interface.

MXML is a convenience language. You can write your flex programs entirely in actionscript. Instead of typing dozens of lines of actionscript code that create the widgets and inserts them under the appropriate parents you can use mxml to layout elements in a logical hierarchy that is easier to read and understand.

Why learn Flex?

Learning flex is advantageous to you because:

• Flex interfaces provide better user experience.
• It is easier to make complex user interfaces like a DataGrid/Accordion in Flex than making them in HTML and Javascript.

Advantages Of Flex Interfaces

In addition to the usual form controls, flex offers additional form controls like rich text editor, color picker, date picker, slider etc.

The flex SDK allows you to create your own form controls. You can add your own customized events and trigger them based on some input condition. It may not sound like much but it is a very useful feature when you want to create complex user interfaces in big projects.

Flex has layout components that give much better control over the size and position of layout controls on a web page. For example – you can position elements and set their dimension relative to the size of the flash canvas.

What can be done with flex?

Here are some examples:

• Create web applications that looks and feels like a desktop application
• Create simple animations and games

What cannot be done with flex?

• Flex produces SWF files that run on your browser in the Flash player so they won’t run in the web server so you can’t create software that runs on the web server using flex.
• Flex programs cannot access files on the user’s computer (when used in the browser). They cannot be used to make applications that store data on the visitors computer.

(However adobe AIR apps made using Flex can)

What do you use to write Flex applications?

Notepad.  You can write your flex applications in Notepad or any other text editor. The programs can be compiled using the Flex SDK which is available for download at no cost here:

http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+3

IDE for Adobe Flex
Adobe has created an IDE called Adobe Flex Builder which provides many features such as code completion, drag and drop visual editing, GUI for editing the attributes of the components on the screen.

I recommend investing in a license of Flex builder if you plan to use Flex extensively to make user interfaces as it improves productivity and saves effort. This course will not cover Flex builder so that most readers can benefit from it.

FYI – Adobe provides a free 60 day try-out period for Flex builder. I assume that you installed the Flex SDK.

Creating Flex Applications

Flex applications are written in MXML and actionscript. MXML is a convenience language. When the program is compiled by the Flex SDK, it is converted into equivalent Actionscript code. This resultant actionscript code is compiled into the resultant binary swf file.

Writing the application in MXML is a choice. It is possible to write flex programs entirely in Actionscript too.

Below is a sample MXML file:

   <?xml version="1.0" encoding="utf-8"><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"></mx:Application>

This file when compiled creates an empty flash file. To compile this file, we use the following command in the command prompt in your operating system.

> mxmlc firstProgram.mxml

This will create firstProgram.swf which we can run to get our result.

In the next article, we will discuss the MXML syntax and the various tags that are available to create a flex application.