Tutorial On Flex 3

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:


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





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

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

What is Flex 4

For the latest information on the next major release of Flex SDK and Flash Builder 4(codenamed “Gumbo”), check out the Flex 4 page on the Adobe Open Source site: http://opensource.adobe.com/wiki/display/flexsdk/Gumbo. The Flex 4 page includes the latest milestones, as well as links to the various public specifications. Also, you can check out the Flex 4 page on the Adobe Labs site at http://labs.adobe.com/technologies/gumbo/.

To download nightly builds of the Flex 4 SDK, check outhttp://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For the latest Flex 4 documentation, check out http://livedocs.adobe.com/flex/gumbo/langref/ andhttp://livedocs.adobe.com/flex/gumbo/html/ (as well as some Flex 4 beta chapters at the bottom ofhttp://opensource.adobe.com/wiki/display/flexsdk/Gumbo).

If you think you’ve found a bug in the Flex SDK or in Flex Builder (any versions), you can file a bug in the public bug base athttp://bugs.adobe.com/flex/.

For a list of Flex 4 specific examples on this blog, check out http://blog.flexexamples.com/tag/gumbo/.

Want a free version of Flex Builder 3? Check out https://freeriatools.adobe.com/ and see if you qualify! Then, head over to the Adobe Flash Builder 4 Beta Extension Request site to request a Flash Builder 4 beta serial number. (Flash Builder 4 beta extension serial numbers are available for all licensed Flex Builder 3 customers. This includes all commercial and education serial numbers.)

Setting tab stops on RichText control in Flex 4

You can also set tabs in a RichText control by setting the text property and using \t, as seen in the following example:

"1.0" encoding="utf-8"?>  name="Spark_RichText_tabStops_test"         xmlns:fx="http://ns.adobe.com/mxml/2009"         xmlns:s="library://ns.adobe.com/flex/spark"         xmlns:mx="library://ns.adobe.com/flex/halo">       >         >              label="direction:">                  id="dropDownList" requireSelection="true">                     >                          source="[ltr,rtl]" />                     >                 >             >         >     >        title="Spark RichText tabStops/tab test"             horizontalCenter="0" verticalCenter="0">          x="100" />          x="200" />          x="300" />            id="richTxt"                 text="Col 1{'\t'}Col 2{'\t'}Col 3{'\t'}Col 4"                 direction="{dropDownList.selectedItem}"                 tabStops="100 200 300"                 paragraphSpaceAfter="20"                 width="400" />     >   >

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

"1.0" encoding="utf-8"?>  name="Spark_RichText_tabStops_test"         xmlns:fx="http://ns.adobe.com/mxml/2009"         xmlns:s="library://ns.adobe.com/flex/spark"         xmlns:mx="library://ns.adobe.com/flex/halo"         initialize="init();">       >         [CDATA[             import flashx.textLayout.formats.Direction;             import mx.collections.ArrayList;             import mx.containers.Form;             import mx.containers.FormItem;             import mx.controls.VRule;             import mx.core.FlexGlobals;             import spark.components.DropDownList;             import spark.components.Panel;             import spark.events.IndexChangeEvent;             import spark.primitives.RichText;               private var dropDownList:DropDownList;             private var pnl:Panel;             private var richTxt:RichText;               private function init():void {                 dropDownList = new DropDownList();                 dropDownList.dataProvider = new ArrayList([Direction.LTR, Direction.RTL]);                 dropDownList.requireSelection = true;                 dropDownList.addEventListener(IndexChangeEvent.CHANGE, dropDownList_change);                   var formItem:FormItem = new FormItem();                 formItem.label = "direction:";                 formItem.addElement(dropDownList);                   var form:Form = new Form();                 form.addElement(formItem);                   Application(FlexGlobals.topLevelApplication).controlBarContent = [form];                   richTxt = new RichText();                 richTxt.text = "Col 1\tCol 2\tCol 3\tCol 4";                 richTxt.setStyle("tabStops", "100 200 300");                 richTxt.setStyle("paragraphSpaceAfter", 20);                 richTxt.width = 400;                   var vRule1:VRule = new VRule();                 vRule1.x = 100;                   var vRule2:VRule = new VRule();                 vRule2.x = 200;                   var vRule3:VRule = new VRule();                 vRule3.x = 300;                   pnl = new Panel();                 pnl.title = "Spark RichText tabStops/tab test";                 pnl.horizontalCenter = 0;                 pnl.verticalCenter = 0;                 pnl.addElement(vRule1);                 pnl.addElement(vRule2);                 pnl.addElement(vRule3);                 pnl.addElement(richTxt);                 addElement(pnl);             }               protected function dropDownList_change(evt:IndexChangeEvent):void {                 richTxt.setStyle("direction", dropDownList.selectedItem);             }         ]]>     >   >

The following example shows how you can use tab stops on a Spark RichText primitive in Flex 4 by setting the tabStops style.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 beta, check out the Adobe Flash Builder 4 page on the Adobe Labs site. To download the latest build of the Flex 4 SDK, .

"1.0" encoding="utf-8"?>  name="Spark_RichText_tabStops_test"         xmlns:fx="http://ns.adobe.com/mxml/2009"          xmlns:s="library://ns.adobe.com/flex/spark"          xmlns:mx="library://ns.adobe.com/flex/halo">     >         >              label="direction:">                  id="dropDownList" requireSelection="true">                     >                          source="[ltr,rtl]" />                     >                 >             >         >     >        title="Spark RichText tabStops/tab test"             horizontalCenter="0" verticalCenter="0">          x="100" />          x="200" />          x="300" />            id="richTxt"                 direction="{dropDownList.selectedItem}"                 tabStops="100 200 300"                 paragraphSpaceAfter="20"                 width="400">             >                  direction="ltr" fontWeight="bold">0px/>100px/>200px/>300px>                 >Col 1/>Col 2/>Col 3/>Col 4>             >         >     >   >