MACROMEDIA FLEX-GETTING STARTED WITH FLEX, Начало работы, Страница: 54 / 86

54 Chapter 3: Using ActionScript
Types of custom components
You can create the following types of components in ActionScript:
•
User-interface components
User-interface components contain both processing logic and
visual elements. These components usually extend the Flex component hierarchy. You can
extend from the UIObject and UIComponent classes, or any of the Flex components, such as
Button, ComboBox, or DataGrid. Your custom ActionScript component inherits all of the
public methods and properties of its parent class.
•
Nonvisual components Nonvisual components define no visual elements. By definition, a
nonvisual component is an ActionScript class that does not extend the UIObject,
UIComponent, or MovieClip classes. Using nonvisual components can provide greater
efficiency at runtime.
Techniques for separating ActionScript from MXML
This section follows a single sample application and shows how it uses several different methods
of separating ActionScript from the MXML. The Temperature application takes input from a
single input field and uses a function to convert the input from Farenheit to Celsius. It then
displays the resulting temperature in a Label control.
The following figure shows the sample Temperature application:
There are several ways to separate MXML and ActionScript in this simple application that calls a
single function:
•
One MXML document (ActionScript event handling logic in MXML tag)
•
One MXML document (function call in MXML tag event)
•
One MXML document and one ActionScript file
•
One codeless MXML document and one ActionScript component
The following sections describe these methods.
One MXML document (ActionScript event handling logic in MXML tag)
The following code shows the ActionScript event handling logic inside the MXML tag’s
click
event:
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
<mx:Panel title="My Application" marginTop="10" marginBottom="10"
marginLeft="10" marginRight="10" >
<mx:HBox>
<mx:Label text="Temperature in Farenheit:"/>
<mx:TextInput id="farenheit" width="120"/>