3.1 User Interface Components


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
figs/frdg_0301.gif

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:

 /////////////////////////////// // FUNCTION NAME: getMyUrl( ) // PURPOSE: callback function myComboBox_cb // EVENT: onChange /////////////////////////////// function getMyUrl ( ) {    // function body code } 

The preferred method, however, is to define your callback function inside the ActionScript code, like this:

 employees_cb.setChangeHandler(getMyUrl); function getMyUrl ( ) {    // function body code } 

or by using the method of an object, like this:

 myObject = new Object( ); myObject.getMyUrl = function (component) {   // function body code }; employees_cb.setChangeHandler("getMyUrl", myObject); 

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.

 myComboBox_cb.addItem("Choose Search Type", "0"); myComboBox_cb.addItem("Any word", "1"); myComboBox_cb.addItem("All words", "2"); myComboBox_cb.addItem("Exact Phrase", "3"); 

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.



Flash Remoting
Flash Remoting: The Definitive Guide
ISBN: 059600401X
EAN: 2147483647
Year: 2003
Pages: 239
Authors: Tom Muck

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net