3.1 User Interface Components

Flash Remoting complements the client-side UI components of the Flash
authoring environment. This rigorously pretested set of components,
all based on the
FUIComponentClass class, brings the familiar user interface
elements of HTML to the Flash developer's arsenal.
The UI components expose an API that is easy to use and consistent
across components.

Prior to Flash MX, you could create movie clips that acted as
reusable user-interface controls (a.k.a. Smart Clips), but they were
harder to use than Flash's UI components. You can
simply drag UI components from the Components panel onto your
interface or create new instances programmatically in ActionScript by
using the MovieClip.attachMovie( ) method
(assuming the Library contains the desired component symbol).

UI components add size to the final Flash movie, but the benefits of
using the components far outweigh the downside. In addition, after
adding an element of one type to the movie, each additional element
of that type does not increase the movie size; your movie is roughly
the same size whether you use one ListBox or ten ListBoxes.

Flash 2004 and Flash Pro components share a larger common framework
(which provides enhanced accessibility, focus management, and so on)
than did Flash MX components. The Flash 2004/Pro framework is
optimized for movies that include multiple components. If
you're including only one or two components and
download size is critical, you may prefer to manually implement
custom components that are more streamlined.

Table 3-1 lists the UI components that come
preinstalled with Flash MX, along with their object type and optional
code-hinting suffix. The suffixes are not required, but they enable
code hints and code completion when utilized. Data-aware components
(components that can be populated by a data provider such as a
RecordSet object) are noted. As of this writing,
the components included with Flash 2004 and Flash Pro have not been
finalized. It is anticipated that Flash 2004 will include a set of
components similar to those included with Flash MX. Flash Pro is
expected to include all the components available for Flash 2004, plus
additional
components that support features available in Flash Pro only. This
chapter focuses on the components available in Flash MX.

Table 3-1. Basic UI components, object types, and code hint suffixes

Component

Object type

Code hints suffix

CheckBox

FCheckBox

_ch

ComboBox[1]

FComboBox

_cb

ListBox[1]

FListBox

_lb

PushButton

FPushButton

_pb

RadioButton

FRadioButton

_rb

ScrollBar

FScrollBar

_sb

ScrollPane

FScrollPane

_sp

[1] Data-aware component

The methods of these standard components are fully documented in the
online Flash Help system (under Help Using Flash) and the
Reference panel (Window Reference). Each component also
has its own Property inspector (Window Properties). The
Property inspector (PI) for the ComboBox is shown in Figure 3-1.

Figure 3-1. The Property inspector exposes properties of UI components and other objects

You can use the Property
inspector to set the Instance Name and other properties of the
component.

Use the Property inspector to specify an instance name for your
component or you won't be able to address the
component by name via ActionScript.

Other component properties can be set from the PI as well, but you
should set them via ActionScript instead so that your code is
isolated from the UI and more understandable. For example, the
ComboBox component has a Change Handler property. You could enter a
function name, such as getMyUrl, in the PI to act
as the callback function?the function to be called when the
ComboBox changes. Then you could define the callback function, in
this case getMyUrl( ), in your Flash movie.
However, there is no easy way, by looking at the ActionScript, to
identify or change what triggers the callback function; you have to
select the component on stage and open the PI to see or change the
callback function specified.

Callback functions are
popular in other visual development
environments such as Delphi, C++ Builder, and Visual Basic. In these
environments, however, when you attach a function to a component
event, the association is visible in the code. This is not the case
in Flash. Therefore, if you're using the PI to set
the callback function, you should always comment your code clearly to
remind you of the function's purpose and what
triggers it:

By defining the callback function via ActionScript, the code is
centralized rather than being attached to components in your
timeline. The same can be said for defining the labels and data
values of the ComboBox or any other component. As your interfaces get
more complex, you'll appreciate all the code being
in one place rather than attached to timeline elements directly.

Components are "live" in the Flash
environment. As you make changes to the component's
properties in the PI, such as changing a label, the change is
reflected in the design environment. This can, however, affect the
overall performance of the authoring tool.

If you find the program slowing down as you add more user interface
components to the Stage, you can disable the Control
Enable Live Preview option. Changing properties via ActionScript has
no effect on the Live Preview.

Some of the UI components work with the DataGlue
class, a special ActionScript class that is installed with the Flash
Remoting authoring components. The DataGlue
class dynamically populates UI components with items from a
DataProvider, such as a
RecordSet object. The
DataGlue class is described later in this
chapter.

Here is a brief description of each of the standard UI components:

CheckBox

The
CheckBox component adds a typical
checkbox with a label. The hit area of the CheckBox is the combined
area of the label and the box. The FCheckBox.getValue(
) method returns true (if checked) or
false (if unchecked). You can specify a
CheckBox's change handler using
FCheckBox.setChangeHandler( ).

ComboBox

The
ComboBox component combines a plain
text field and a select list?a combination that is unavailable
in HTML but often used in desktop applications. A user can enter text
into the ComboBox or choose an item from the list. Use
FComboBox.setEditable(false) to disable user
input. You can obtain the value of the selected element from the
data and label properties of
the object returned by FComboBox.getSelectedItem(
). You can specify a ComboBox's change
handler using FComboBox.setChangeHandler( ).

ListBox

The
ListBox component allows for single
and multiple selections within a scrollable list. The ListBox also
responds to mouse and keyboard input. You can retrieve the values of
the selected elements from the data and
label properties of the array of objects returned
by FComboBox.getSelectedItems( ). You can
specify a ListBox's change handler using
FListBox.setChangeHandler( ).

PushButton

The
PushButton component is a simple
button with a label. You can specify a PushButton's
click handler using FPushButton.setClickHandler(
).

RadioButton

The
RadioButton component creates a
standard radio button and allows grouping of multiple radio buttons
by setting the group name using
FRadioButton.setGroupName(nameOfGroup).
You can specify a RadioButton's change handler using
FRadioButton.setChangeHandler().

ScrollBar

A
ScrollBar component can be added to a
dynamic or input TextField by dropping it from the Components panel
onto the TextField in your movie. A ScrollBar added in this manner is
automatically added as a listener of the TextField so that it can
respond to text scroll events.

ScrollPane

The
ScrollPane component adds the
ability to display movie clips within a
smaller area that become scrollable.