Introduction to Flex

As you all probably know, the RIA (Rich Internet Application) field is getting bigger with every day that goes by.

The competition between the companies is increasing with every release, preview or even sometimes just rumors about a release or a preview.

Microsoft has Silverlight, Adobe has Flash/AIR.

While I’m a Microsoft programmer (C# and MSSQL) in the web and desktop apps, I’m definitely a fanatic Adobe fan for RIA. Enough about me, lets talk about Flex.

Why Choose Flex?

You are probably asking yourself the question I asked myself a few years back. I’ll tell you my reasons—you be the judge and the decision is all yours.

First, Flex is solid. It has a huge user base around the world writing blogs, sharing open source projects and more. The IDE is absolutely amazing and it has many features: debugging, out of the box components, graphs and more.

Actually, you can work with any kind of server you want, you can write a web service in Java, C#, F#, jScript, ASP, PHP, RoR and more, and Flex will consume it and learn (if you teach it) how to live with it. The final product (swf) is supported in huge percentage across browsers and operating systems.

Though other platforms are getting there, Flash still rules this market without a doubt.

Designers… like our wives, we can’t live without them. When you need to work with a designer on Flex project, he won’t need to learn a new environment. Photoshop will be just fine, and even Illustrator. Flash designers can build your entire GUI without you even writing one line of code, you can simply use the skin they create for you.

If you are not convinced yet, there’s nothing else I can write to convince you. However, I’m sure you, like me, are pretty excited about this Environment.

The Beginning

When Adobe introduced Flash MX to the world they created a big dilemma for developers like myself. Developers wanting to focus on the development, not wanting to mess around with graphics, vectors, shapes and more… Developers complained about the Flash IDE and still complain about it today (only today there’s an alternative), they simply did not understand the Flash messy graphics, layers, symbols and the rest. While for you Flash designers out there this seems pretty standard, that’s not the case for us developers

So, Adobe (as opposed to other companies) listened. Flex 1 was born on 2004, still working with ActionScript 2. In 2006 we got Flex 2 working in AS3 and in 2008 Flex 3 arrived.

Flex Builder 3 is now the Official IDE for Flex/AIR apps from Adobe. Today (still in beta) there’s a newer version called FlashDeveloper CS4 (we are not going to talk about it in this article, so maybe another time, promise :-)).

Flex is programmed using a markup language (XML based) called MXML. Flex has specific tags used only by Flex or AIR. You can’t use those tags in Flash, never mind the version you are working with.

Every bit of code you write with MXML code is being ”translated” behind the scenes to pure AS3 code.

Screenshots of the Flex IDE

Code View

Design View

The environment is compatible with Windows and Mac OS X. I personally worked with it on every version of Windows (XP, Vista, Win7 32bit, Win7 64bit – told you I was a Microsoft dude).

Ok, that was the preview, show me the CODE!!!

Show Me The M…….XML

So, we discussed that Flex requires us to use MXML to write the code. Actually the Flex Environment is pretty similar to what you know from HTML and .Net (if you are a .Net programmer).

The entire Flex app is usually based on something called a Canvas. The canvas is your drawing board: you place your controls on it, position them and then you start writing some code. Lets do a basic “Hello World” shall we…

We will start by creating a brand new project. You do so by right clicking on the blank area in the “Flex Navigator” pane (top left) and selecting the option “New–>Flex Project”

This dialog pops up:

Select the path where you want to place your project, and just hit Next and finish selecting all the default options to the end of the dialog sequence. We do not need to “mess” with those definitions.

Now, you probably have the default (bluish) screen that comes out of the box in Flex. Like I mentioned, I’m not a designer so we’ll live it be for now.

By using drag and drop, we drag a TextInput and a Button to our canvas. We will give the TextInput an id of txtUserFullName and the Button the id of btnSend.

Wait, wait… what, who, where?

When placing a control on the surface you get all of it’s properties in the “Flex Properties” window (seen on the right).

You can also edit the code of the control by hand, just by writing your own MXML which is generated automatically for you when you drag and drop a control.

The fun part is coming, I promise… but first, another explanation:

If you are coming from AS2 this part will be totally unfamiliar to you. If you have worked in the past with Java, HTML, .Net or even PHP you should know that for a button to work, there needs to be a function ”listening” to the click event on that specific button.

Well, Flex—as opposed to the alien language AS2—works exactly the same (At least it looks that way. It is not actually exactly the same, but for us to better understand it right now, this will do).

On the “Flex Properties” in the right, when selecting the button we will see there’s an “On Click” text input. This is where you should put the function name that will listen to the button click event.

Lets type btnSend_ClichHandler(). Now, let’s write this function on our “code behind.”

<?xml version="1.0" encoding="utf-8" ?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
		<mx:Script>
			<![CDATA[
				import mx.controls.Alert;

				private function btnSend_ClickHandler():void{
					Alert.show('Hello ' + txtUserFullName.text);
				}
			]]>
		</mx:Script>
		<mx:Button x="10" y="40" label="Send" id="btnSend" click="btnSend_ClickHandler()" />
		<mx:TextInput x="10" y="10" id="txtUserFullName" />
</mx:Application>

Ok, so we are all set.

The final result is an SWF file (Flash) which you can load into any HTML page and it is fully compatible with all browsers and almost every operating system.

Let’s have a look on what happens in our browser when running our small app:

Download the Flex Builder 3 Trial

Flex Builder 3 isn’t free, but you can download a 60-day free trial to try it out.