Learning Flex – Lesson 5, Part II

Building Custom ActionScript Classes

Building an application in MXML results in an ActionScript class. The MXML is converted to ActionScript, combined with any code within a Script tag and the resulting class is compiled into a swf. When you compile test.mxml, a file named test-generated.as is created with the line

public class Test extends mx.core.Application

If you want to see the generated as files, add -keep-generated-actionscript to the flex compiler arguments. In FlashDevelop, you can do this by selecting project,properties… and clicking the compiler options tab. Click on the + next to the Additional Compiler Options and enter the value in the column to the right of [0].

Value or Data Transfer Objects

This kind of object is implemented as an ActionScript class and can be considered a container for data. They are often used for transfer of information to the back end of an application (potentially a database).

Each class is defined within a package similarly to Java. In fact, ActionScript classes look very similar to Java classes. One of the differences is how variables are declared ( var variableName:type; rather than Type variableName; ).

The [Bindable] metadata tag specified before a class name means that all public properties in the class can be bound to controls or other data structures. This can be placed before individual properties to limit it’s scope.

Externalizing Model Data

You can read the data for a model from an XML file by specifying the source property as the location of the file. The data will then be automatically parsed into an ActionScript compatible data structure. Data retrieved from a model tag is untyped so non strings must be cast to their type before use.

Debugging with Trace Statements

Flex has a global method called trace() that allows you to output data to the console when running the debugger version of the Flash player. It takes a string as the value and outputs the current value to the console. Defining a toString():String function within a custom class allows trace statements to automatically call this function if an object of that class is provided in a trace statement.


Learing Flex – Lesson 4, Control Basics

Text Control

There are a number of text controls for Flex;

  • Label – single line, non user editable.
  • TextInput – single line, can be edited.
  • TextArea – can  display multiple lines of text, may be editable, scrollbars if text exceeds the screen space available.

All text controls support HTML 1.0 and a variety of fonts and styles.

Image Control

The Image control can load JPG, SVG, GIF, SWF and PNG files. GIF and PNG files may use an Alpha level to produce degrees of transparency.

The @Embed directive instructs the compiler to add the image to the generated swf – this is useful for Air applications that may be used offline but will increase the size of the generated file. Images will be automatically loaded by default but setting the autoLoad property to false means that the image will not appear until the load() method is called on the image.

Other properties allow you to specify if the image can be scaled (scaleContent) and if the aspect ratio can be changed (maintainAspectRatio).

Events that are often used with images include mouseOver and mouse Out – combining these with state changes allows you to  change the behaviour of the app when the user moves the mouse cursor over the image (such as put up more detail or perhaps a larger image).

Form Container

A Form Container allows you to mark fields as required or optional, handle error messages and perform data validation.

A Form may contain one or more FormHeading tags to provide title(s) and FormItem tags which contain a label property for each item on the form.

Form children are arranged in a vertical format and left aligned by default.

Focus Management

Forms (and all other top level containers) have a built in focus manager.  This has a getFocus() method that can be called to determine what component currently has focus and a setFocus() method to force the focus to a particular component.

Radio Buttons

Radio Buttons must reference a RadioButtonGroup so that the application knows they are grouped together and can enforce only one being selected at a time. The RadioButton does this by specifying the id of the group for its groupName property.

The data value property is used to determine if the button has been selected and an initial value can be set using the selected property.

Data Binding and Models

Data binding allows you to map properties of controls to dynamic data structures such that when that data changes, the change is reflected in the control.

The Model tag allows you to build client side data models. It converts XML structures into a format that Flex can use. By assigning an id to a model, you can use dot notation to address items within the structure.

Here’s an example:

<mx:Model id="pet">

pet.name would give you fluffy. In this case you could consider “animal” as a class and pet as an object of that class.

To bind a control property to a data element, you use {} around the element name. An example would be <mx:Label text="{pet.name}"/>

Data binding really comes into play when the application is receiving information from an external source.