An Absolute Beginner’s Tutorial On Flex 3 Article

Taking Things Further: ActionScript 3.0

While MXML defines the structure of your Flex application, ActionScript 3.0 defines your application’s behaviour.

Now, you may be thinking, “Hang on. If I can do so much with MXML, why do I need ActionScript 3.0?” Well here’s the confusing part; MXML is actually a pretty form of ActionScript 3.0. In fact, MXML is converted to ActionScript 3.0 when you compile it. Let’s look at an example that shows how similar MXML and ActionScript 3.0 are. The following code creates the same component (a Button), first in MXML, and then in ActionScript 3.0:

<?xml version="1.0" encoding="utf-8"?>   

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

    layout="absolute" creationComplete="init()">   

  <mx:Button label="This one is done by MXML" x="10" y="10" />  <mx:Script>   

    <![CDATA[   

    import mx.controls.Button;   

    //Init Function is executed when the application boots   

    private function init():void {   

      //Create a new button   

      var newButton:Button = new Button();   

      //Modify Properties   

      newButton.label = "This one is done by ActionScript";   

      newButton.x = 10;   

      newButton.y = 40;   

      //Add the new button to the stage (Screen)   

      this.addChild(newButton);   

    }   

    ]]>   

  </mx:Script>         

</mx:Application>

The application that results when you compile this file will look like this:

As you can see, both approaches for creating a button produce the same result — but there’s far less typing involved with MXML than with ActionScript 3.0. Designing an application with ActionScript 3.0 would be a nightmare. MXML was created to simplify the work for you.

You still need to use ActionScript in your application, however; you’ll need to define what happens when that button is clicked, for example. Look at it in this way: you design your application with MXML, and you make it work with ActionScript 3.0. By using MXML and ActionScript, you’re separating the structural code from the programming logic. This is an important philosophy to remember when building Flex applications — especially when you’re building complex components down the track.

ActionScript 3.0 is an ECMAScript-based scripting language, which means that it adopts the ECMA scripting language standards. ActionScript 3.0 is a giant leap forward from is predecessor, ActionScript 2.0. The reason for this is that ActionScript 3.0 is now a truly object oriented programming (OOP) language. In fact, the entire framework of Flex is made up of object classes that have been written by Adobe.

If you want to develop complex RIAs, I’d recommend that you invest some time in understanding OOP. Most of the programming done in Flex is event-driven, which means that functions are run when a component triggers an event (for example, when a mouse clicks a button on the page). The Adobe Livedocs site has some great examples of object-oriented ActionScript.

The full details of ActionScript 3.0 syntax and OOP are beyond the scope of this article, but if you’ve done any JavaScript programming before, you are certainly well on your way.

Resources

Flex 3.0 is rapidly gaining steam; as a result there are some fantastic resources out there for anyone who wants to get started in building RIAs with Flex. Here’s a sample:

• Flex Livedocs
• Flex.org
• FlexCoders
• Open Source Flex
• The Flex CookBook
• Flex 3 Getting Started

Summary

This article barely skimmed the surface of the Flex framework, although we did cover the basics of what the framework provides, and how MXML and ActionScript 3.0 work together. While this was a very gentle introduction to the concepts behind Flex, it should give you enough grounding in the concepts to go forth and experiment on your own.

Now that you’ve taken your first step in Flex development, the next step is to actually understand the components, play around with them to build your first application, and apply some ActionScript to really give it some life.

Frequently Asked Questions (FAQs) about Flex 3.3