The ABCs of Flex

X is for XML in ActionScript

2009-07-02T06:42:00.002-05:00

ActionScript's powerful XML support is based on E4X. E4X stands for ECMAScript for XML and is a Document Object Model (DOM) interface for XML. E4X makes XML a first-class citizen in ActionScript.

Learn more about ActionScript XML in Flex at Flex After Dark...

V is for Validators

2009-06-24T20:42:00.001-05:00

The data that a user enters in a user interface control might or might not be appropriate for the application. In Adobe Flex applications, you use a validator to ensure the values in the fields of a form meet certain criteria. For example, you can use a validator to ensure that a user enters a valid phone number value, to ensure that a String value is longer than a set minimum length, or ensure that a ZIP code field contains the correct number of digits.

Included Validators in the mx.validators package:

StringValidator - validates input as a string
RegExpValidator - validates input against a regular expression
NumberValiator - validates input is a number
EmailValidator - validates input is in valid email address format
Date Validator - validates input is in valid date format
ZipCodeValidator - validates input is in zip code format
CurrencyValidator - validates input is a valid currency expression
PhoneNumberValidator - validates input is in valid phone number format
CreditCardValidator - validates input is in valid credit card format

Learn more about Flex Validators at Flex After Dark...

T is for Timer

2009-06-11T21:12:00.001-05:00

The Timer is a utility class in the flash.utils package. A timer's job is to fire off events at specified intervals.

The below ActionScript shows how to create a Timer instance and start it.

   import flash.utils.Timer;
  import flash.events.TimerEvent;
 
  // create a timer which fires every second (1000 ms)
  var timer:Timer = new Timer( 1000 );

  // add a listener to the timer
  timer.addEventListener( TimerEvent.TIMER, handleTimerEvent );

  // start the timer
  timer.start();

Learn more about the ActionScript Timer at Flex After Dark...

S is for Styles

2009-06-02T21:00:00.001-05:00

You modify the appearance of Flex components through style properties. These properties can define the size of a font used in a Label control, or the background color used in the Tree control.

Styles in Flex are a lot like CSS (which can be helpful), but not exactly the same (which can be confusing). Some style properties also support Cascading Style Sheet (CSS) inheritance. CSS inheritance means that if you set the value of a style property on a parent container, a child of that container inherits the value of the property when your application runs.

Learn more about Styles and Stylesheets in Flex at Flex After Dark...

R is for RPC

2009-05-21T21:23:00.003-05:00

Flex's RPC package (mx.rpc) defines services for making asynchronous calls to remote services.

Types of RPC services:

HTTP - make HTTP calls to web servers
Web Services - call SOAP + WSDL based web-services
Remoting - call remote object servers such as ColdFusion or Java using BlazeDS

Learn more about Flex Remoting (RPC) at Flex After Dark...

P is for Projects in Flex Builder

2009-05-07T20:41:00.002-05:00

There are several types of projects that can be created via Flex Builder:

Flex Web project - create .swf files that run in Flash Player
Flex Desktop project - create .air files that run in Adobe AIR-Runtime
Flex Library project - create .swc library files for use in other Flex projects

Learn more about Projects in Flex Builder at Flex After Dark...

O is for Object Oriented ActionScript

2009-04-30T20:33:00.003-05:00

ActionScript is powerful, object oriented programming language. ActionScript and MXML are the languages of Flex.

ActionScript requires classes/interfaces to be declared in a package and the explicit import of used classes/interfaces that are not in the same package.


package packageName
{
  import another.packageName.*;
 
  public class ClassName extends SuperClassName implements InterfaceName
  {
     public ClassName()
     {
        // constructor
     }
  }
}

Learn more about Object Oriented ActionScript at Flex After Dark...

N is for Namespaces in MXML

2009-04-27T21:02:00.002-05:00

If you want to use custom components (outside of the mx or flash packages) in your Flex application, first you'll have to setup a namespace to tell Flex where to find your custom controls. (Using custom controls in your MXML can be a little tricky at first.)


   xmlns:mycontrols="my.custom.controls.*"
>

Learn more about MXML Namespaces at Flex After Dark...

M is for Menus

2009-04-20T20:55:00.001-05:00

The Flex Menu control creates pop-up menus of individually selectable choices, that can have cascading sub-menus. (Similar to the application menus (e.g. File, Edit) or right-click menus in most application.)

A Menu is created with a call to the Menu class static createMenu() function. Of course you'll have to pass some data representing the menu items and structure to the createMenu() call.

   // create the menu data structure
  var menuData:Array = [ "Item 1", "Item 2", "Item 3" ];
 
  // create the menu
  var menu:Menu = Menu.createMenu( parent, menuData, false );
 
  // show the menu
  menu.show()

Learn more about Menus in Flex at Flex After Dark...

L is for Libraries

2009-04-14T18:26:00.001-05:00

A Library is collection of Flex/ActionScript classes and resources compiled to a .swc file.

A library is different than a Flex application in that you cannot launch a library. Rather, a library is a code reuse and packaging mechanism.

Learn more about Flex libraries at Flex After Dark...

K is for Keyboard Shortcuts

2009-04-11T15:55:00.000-05:00

Flex Builder is a full-fledged IDE for Flex development. These keyboard shortcuts may prove handy.

Search across multiple files:

Press Ctrl + Shift + F

Import a class in an ActionScript file:

Type a class name
Press Ctrl + Space

Clone a chunk of code without having to copy and paste it:

Select a chunk of code
Press Ctrl + Alt + (Down Arrow)

Learn more about Flex Builder Keyboard Shortcuts at Flex After Dark...

J is for Java (vs ActionScript)

2009-04-05T14:24:00.001-05:00

ActionScript and Java are both powerful, object-oriented languages with many similarities.

Both Java and ActionScript:

Are object-oriented
Use single inheritance
Have a base Object class (which is automatically sub-classed)
Use strongly typed variables
Have Packages, Classes, and Interfaces
Support public, protected, and private methods and variables
Support static functions and variables
Support try/catch/finally exception handling

There are also many differences between ActionScript and Java.

Important differences between Java and ActionScript:

ActionScript has get/set functions
ActionScript supports dynamic classes
ActionScript supports closure functions
ActionScript supports optional function arguments, but does not support overloading
ActionScript does not allow private classes or constructors

Learn more about the ActionScript language, and it's similarities and differences to Java, at Flex After Dark...

I is for Images and Icons

2009-04-01T20:23:00.000-05:00

In Flex images can be embedded or loaded.

Embedded images load immediately, because they are already part of the Flex SWF file. However, they add to the size of your application and slow down the application initialization process. Embedded images also require you to recompile your applications whenever your image files change.

The alternative to embedding a resource is to load the resource at runtime. You can load a resource from the local file system in which the SWF file runs, or you can access a remote resource, typically though an HTTP request over a network. These images are independent of your Flex application, so you can change them without causing a recompile operation as long as the names of the modified images remain the same. The referenced images add no additional overhead to an application's initial loading time. However, you might experience a delay when you use the images and load them.

Learn more about Images and Icons in Flex, and see some examples, at Flex After Dark...

H is for HTTPService

2009-03-29T14:50:00.001-05:00

Flex's HTTPService is used to make HTTP requests and handle the results. When you call the HTTPService object's send() method, it makes an HTTP request to the specified URL, and an HTTP response is returned (asynchrnously).

The HTTPService is part of Flex's Remoting/RPC library.

Making an HTTP request in ActionScript:

Create an instance of mx.rpc.http.HttpService
Set the HTTP url
Set the result format
Send a request
Handle the result or fault
1. via pre-registered event listeners
2. or via responders

Learn more about the Flex HTTPService at Flex After Dark...

G is for Get/Set Functions

2009-03-25T20:53:00.000-05:00

In a lot of programming languages we're use to seeing "getter and setter" functions "wrapped" around private properties. The idea is to encapsulate the access of variables behind these "accessor" functions.

You won't see nearly as many getter/setter functions in ActionScript. It's not because of laziness or "bad OOP". It is because ActionScript has support for special get and set functions that can encapsulate property access behind function calls, but without changing the property access syntax.

public class Person
{
  private var _name:String;
 
  public function get name():String
  {
     return this.name;
  }
 
  public function set name( value:String ):void
  {
     this.name = value;
  }
}

Learn more about ActionScript Get/Set Functions at Flex After Dark...

F is for Forms

2009-03-23T20:26:00.000-05:00

Forms in Flex are supported through special container classes that assist in laying
out label and input elements. The form container classes are found in the mx.containers package.

A Form is made of the following components:

The outer Form container
One or more FormItem's, each can contain one or more input elements
Zero or more FormHeading's

Learn more about Flex Forms at Flex After Dark...

E is for E4X

2009-03-20T13:33:00.000-05:00

E4X stands for ECMAScript for XML. (Remember that ActionScript is ECMAScript.)

E4X makes XML a first-class citizen in ActionScript.

   var xmlAlbum:XML =
  <album name="Sky Blue Sky" artist="Wilco">
     <tracks>
        <track name="Either Way" seconds="187"/>
        <track name="You Are My Face" seconds="278"/>
        <track name="Impossible Germany" seconds="358"/>
        <track name="Sky Blue Sky" seconds="203"/>
        <track name="Side With The Seeds" seconds="256"/>
        <track name="Shake It Off" seconds="342"/>
        <track name="Please Be Patient With Me" seconds="199"/>
        <track name="Hate It Here" seconds="273"/>
        <track name="Leave Me (Like You Found Me)" seconds=""/>
        <track name="Walken" seconds="267"/>
        <track name="What Light" seconds="216"/>
        <track name="On And On And On" seconds=""/>
     </tracks>

Notice in the example that you are not wrapping the XML in quotes or treating it as a string. Just type the XML as a literal.

Learn more about Flex and ActionScript support for XML via E4X at Flex After Dark...

D is for Dynamic Classes

2009-03-18T20:48:00.001-05:00

ActionScript allows classes to be defined as dynamic. A dynamic class can have public properties and functions attached to it at runtime.

   public dynamic class DynamicClass
  {
     public DynamicClass()
     {
       
     }
  }

Note the dynamic keyword used in the class declaration. So even though DynamicClass has not properties or functions defined (besides those of its super-class, Object), we can still attach properties and functions to it dynamically.

Learn more about ActionScript Dyanmic Classes at Flex After Dark...

C is for Canvas

2009-03-16T21:27:00.004-05:00

The Canvas is a container used for absolute positioning of its children. The Canvas class is found in the mx.containers package.

A Canvas layout container defines a rectangular region in which you place child containers and controls. It is the only container that lets you explicitly specify the location of its children within the container by using the x and y properties of each child.

Unique characteristics of the Canvas container:

Child components are absolutely positioned using x and y coordinates
Child components can overlap
Can be used for constraint based layouts

Canvas related links:

B is for Binding

2009-03-15T14:28:00.002-05:00

Flex Data Binding enables objects and their values to be bound together so that when a source changes a target automatically gets updated.

Data binding players:

Source - the object/value we are interested in observing
Target - the object/value we going to copy the source value to
Trigger - the event from the source that triggers the copy from source to target

Binding related links:

A is for ActionScript

2009-03-14T15:35:00.001-05:00

ActionScript is the language of Flex (and Flash). ActionScript is Adobe's implementation of ECMA Script, thus is similar in many ways to JavaScript.

Characteristics of ActionScript:

Is object oriented
Uses single inheritance
Uses strongly typed variables
Has Packages, Classes, and Interfaces
Supports static functions and variables
Supports dynamic classes and objects

ActionScript related links: