Adobe Flex is a development platform for rich internet applications (RIA), based on the Adobe Flash platform. Flex projects, (like flash) compile into the .swf format, and therefore boast cross-browser compatibility (assuming the user has the flash player installed). Flex comes in two forms, for experienced developers, the open source sdk (software development kit), and a commercial IDE (integrated development environment) built on Eclipse. Here I will focus on the IDE, Flex Builder. In this article I will very briefly go over the basics of what Flex is and how to put a Flex application together.

    Flex builder differs from Flash in several important ways, but first let's note the     similarities:
1)flex and flash are both based on the actionscript language, which is an ECMA compliant object-oriented programming language.
2)they both result in compiled .swf files that can be embedded in html in the same way.
3)the resulting .swf can communicate with each other, so one can embed and control a flash .swf within a Flex .swf
    
    These are some of the similarities, but it's the differences which make flex such an     interesting development platform:
1.unlike Flash, Flex uses an XML-based language, MXML which developers can use to based their projects on. This has the advantage of providing a quick and easy way of creating GUIs (graphical user interfaces) using the built in component set, or custom components, as we'll soon see.
2.Flex has a much more robust component set, including charting, layout components, and almost anything you would need for a basic application. These components can be instantiated with MXML. It is also possible, however to create a Flex project entirely in actionscript.
3.In addition to MXML, Flex uses Actionscript 3.0 (it is based on this language, and actually translates all of your MXML to actionscript while compiling the .swf) The Actionscript gives you the power of all the interactivity, and customization of base classes, that you have in Flash
4.Unlike Flash, Flex's IDE is not frame-based (although you do have enterFrame events, and a frame rate), which does away with an approach that, with the advent of actionscript 3.0, has become increasingly unnecessary.
5.Flex makes it easier to integrate with certain other languages, namely, XML and CSS
6.Flex enables the use of “contraint-based” layouts, which make it easy to create fluid layouts for your applications.


Getting started with your first Flex app – MXML

The first concept we should talk about is MXML. This is an XML based language which has the following characteristics:
1)It needs to be 'well formed' in the sense that each opening tag must have a closing tag, and the node heirarchy needs to remain consistent.
2)The Flex components are contained within the mx namespace -  that is to say they are declared in MXML in the following way <mx:ComponentName/> Any custom components you create must have their own namespace declared in order to be recognized as valid nodes in the mxml.
3)each component has a number of properties that can be referenced within the mxml tag. Make sure you read the Flex language reference when using new components, so you are aware what your options are. http://livedocs.adobe.com/flex/2/langref/index.html

Here is an example of a very basic Flex app using mxml, there is one button in the center of the stage labelled “button”. Let's examine the mxml:


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Button x="464" y="273" label="Button" verticalCenter="0" horizontalCenter="0"/>
</mx:Application>

We can see the basics of what's happening: after the xml declaration, we have an <mx:Application> node, with a few properties. the <mx: prefix to the tag references component's namespace in this case it's declared as xmlns:mx="http://www.adobe.com/2006/mxml" (xmlns means XML namespace).

[ note: When you create custom components yourself, they will need their own namespace, which will be the path to the class file, for example, if I wrote a custom component( class) called “CustomButton”, and the class file was in a folder called “customClasses”, my xml namespace would be: xmlns:customClasses=”customClasses.*”. the .* after customClasses references every class file in that folder. Therefore to instantiate my new class I would write:
<customClasses:CustomButton/> ]

Within the <mx:Application> tags there is a node for the button, which is pretty self explanatory, but I also included the horizontalCenter and VerticalCenter, which is one of the contraint-based properties which allows my design to remain fluid while a user resizes their window. Buttons and all other components have a number of properties you can assign, check the Flex language reference to view them, and their default values.

Using actionscript in a Flex project:

Since Flex is based on actionscript, it's not a surprise that actionscript can be used in many ways in your flex project:
1)the entire project can be coded in actionscript
2)actionscript can be embedded into your MXML file using the <mx:Script> tags
3)actionscript can be used to create custom classes/components, and to extend any of the flex classes.
4)actionscript functions can be called from within components declared with MXML
for example: <mx:Button click=”myClickFunction();”/>

Embedding actionscript into your MXML:

This is probably the easiest way of integrating AS into your Flex project, especially to those who are used to attaching code to frames, although you should probably keep your code chunks small and consider including an external .as file or writing custom classes if you find yourself writing lots of AS for your projects. (it is an object oriented language after all)
To insert a block of actionscript code into your MXML application use the following syntax:

<mx:Script>
    <![CDATA[
        // actionscript code goes here
    ]]>
</mx:Script>

In this case, we'll write a simple function that we can access within our document. The function simply causes the x property of the button to increase by 10 (px) each time the button is clicked:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
    <![CDATA[
        private function moveButton():void{
            myBtn.x+=10;
        }
    ]]>
</mx:Script>
    <mx:Button id="myBtn" x="200" y="200" label="Button" click="moveButton();"/>
    
</mx:Application>

As you can see, for anyone used to writing code on keyframes in a Flash FLA will find this a pretty intuitive way of writing actionscript for your Flex project.

Extending Actionscript classes:

It is often desirable to add functionality to a class (create a custom class based on another class), this is easily done within the context of your Flex project. here's a step-by-step explanation:

For this example I will create a custom class extending button, which as above will move to the right when clicked. In the above example, we wrote the actionscript function right into our project, this time we'll code it into a new class. The advantage of this approach is, of course, that once you have a new class (and presumably you've put a lot more work coding it, and added more functionality than making it move when clicked), which you can use over and over again without re-writing the code into your application each time. This is the power of object oriented programming.

1)first we will create a new actionscript class file. You can do this from scratch in any text editor, but I'll do it in the context of Flex builder to show how easy they make it. Open a new Flex project, name it, etc.
2)goto file -> new actionscript class
3)In the window that pops up, fill in the following fields as shown:
 package: custom
name: CustomButton (class names by convention are upper case)
superClass: Button
generate constructor from superclass: selected
this automatically generates the custom folder your class file will reside in, the actionscript file itself, and the starting code (the constructor, which classes need to be imported, etc) If we were doing this from scratch in a text editor, you'd have to do this all yourself of course.

4)now we create our function: (please note this is a silly example just to illustrate the process)

package custom
{
    import mx.controls.Button;
    import flash.events.MouseEvent;

    public class CustomButton extends Button
    {
        public function CustomButton()
        {
            super();
        }
        ;
        override protected function clickHandler(event:MouseEvent):void{
            this.x+=10;
        }
    }
}

Now our MXML application references the new class in the following way:

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

    <custom:CustomButton id="myBtn" x="200" y="200" label="Button" />
    
</mx:Application>

Thus, achieving the same results as above, only this time we've created a custom class that can be used over and over.

Creating custom MXML components:

You can also create custom components using MXML. this is achieved in a very similar way as actionscript components. I'll go through the same example again, this time using MXML to create our custom component.

1)in Flex click File -> new MXML component's
2)In the box that pops up, name your component CustomButton2, make it based on Button, and select your 'custom' folder for the parent folder
3)write the following code:


<?xml version="1.0" encoding="utf-8"?>
<mx:Button xmlns:mx="http://www.adobe.com/2006/mxml" click="moveButton()">
    <mx:Script>
        <![CDATA[
            private function moveButton():void{
            this.x+=10;
        }
        ]]>
    </mx:Script>
</mx:Button>

now we have a custom MXML component in our custom folder, that we can reference in our main application:

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

    <custom:CustomButton2 id="myBtn" x="200" y="200" label="Button" />
    
</mx:Application>

Styling your flex application:

There are several ways to style and skin flex components, and the topic is outside the scope of this article, I will mention CSS however, because the possibility of using CSS for our application is exciting for Flash developers-turned Flex developers. probably the easiest way to style your app is to go to the Flex style explorer: http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html

this allows you to modify your styles, see the results in real time, and automatically generate the CSS for you, which you can paste in to a CSS file, and reference in your application with:
<mx:Style source="main.css" />

for further reading on some of the ways to style Flex apps:
http://blog.flexcommunity.net/?p=7
http://blog.flexcommunity.net/?p=5

In conclusion: It is difficult to write such a short description of such a vast topic, but I think you will see that as complex as Flex is, and as numerous it's possibilities, it is actually quite easy to get started, and get your feet wet. So jump in and enjoy!

About the author: Clayton Gibb is an actionscript developer and contributer to
http://www.flexcommunity.net