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.