One of the first decisions that you must make when using custom item renderers and item editors is how to
implement them. Flex lets you define item renderers and item editors in three different ways:
Drop-in item renderers and item editors Insert a single component to define an item renderer or item editor. For
more information, see “Using a drop-in item renderer or item editor” on page 788.
Inline item renderers and item editors Define one or more components using child tags of the list control to
define an item renderer or item editor. For more information, see “Using an inline item renderer or item editor”
on page 789.
Item renderer and item editor components Define an item renderer or item editor as a reusable component. For
more information, see “Using a component as an item renderer or item editor” on page 790.
The following sections describe each technique.
Using a drop-in item renderer or item editor
For simple item renderers and item editors, such as using a NumericStepper control to edit a field of a DataGrid
control, you can use a drop-in item editor. A drop-in item renderer or drop-in item editor is a Flex component that
you specify as the value of the itemRenderer or itemEditor property of a list control.
In the following example, you specify the NumericStepper control as the item editor for a column of the DataGrid
control:
In this example, when the user selects a cell of the column to edit it, Flex displays the NumericStepper control in
that cell. Flex automatically uses the data property to populate the NumericStepper control with the current value
of the column.
You use the editorDataField property to specify the property of the item editor that returns the new data for
the cell. By default, the list control uses the text field of the TextInput control to supply the new value; therefore,
the default value of the editorDataField property is "text". In this example, you specify that the value field
of the NumericStepper supplies the new value for the cell.
You can use only a subset of the Flex components as drop-in item renderers and item editors—those components
that implement the IDropInListItemRenderer interface. For more information on using drop-in item renderers
and item editors, and for a list of controls that support drop-in item renderers and item editors, see “Creating
drop-in item renderers and item editors” on page 797.
Using an inline item renderer or item editor
In the section “Using a drop-in item renderer or item editor” on page 788, the example shows how easy it is to use
drop-in item renderers and item editors. The only drawback to using them is that you cannot configure them. You
can specify the drop-in item renderers and item editors only as the values of a list control property.
To create more flexible item renderers and item editors, you develop your item renderer or item editor as an inline
component. In the next example, you modify the previous example to use a NumericStepper control as an inline
item editor. With an inline item editor, you can configure the NumericStepper control just as if you used it as a
stand-alone control.
In this example, you define the NumericStepper control as the item editor for the column, and specify a maximum
value of 50 and a step size of 1 for the NumericStepper control.
For more information on creating inline item renderers and item editors, see “Creating inline item renderers and
editors” on page 800.
Using a component as an item renderer or item editor
One disadvantage of using drop-in and inline item renderers and editors is that you define the item renderer or
editor in the application file; therefore, it is not reusable in another location in the application, or in another appli-
cation. You can create a reusable item renderer or item editor as a Flex component, and then use that component
anywhere in an application that requires the item renderer.
For example, the following code uses a NumericStepper control to define a custom item editor as an MXML
component :
The custom MXML component defines the item editor as a NumericStepper control. In this example, the custom
item editor is named NSEditor and is implemented as an MXML component in the NSEditor.mxml file. You place
the file NSEditor.mxml in the myComponents directory beneath your main application directory.
You can then use this component anywhere in an application, as the following example shows:
When the user selects a cell in the quant column of the DataGrid control, Flex displays a NumericStepper control
with the current cell value.
You might have several locations in your application where users can modify a numeric value. You defined this
item editor as a custom component; therefore, you can reuse it anywhere in your application.
For more information on creating item renderers and item editors as components, see “Creating item renderers
and item editor components” on page 807.
Using editable controls in an item renderer
Item renderers do not impose restrictions on the types of Flex components that you can use in them. For example,
you can use controls, such as the Label, LinkButton, Button, and Text controls, to display data, but these controls
do not let the user modify the contents of the control.
Or you can use controls such as the CheckBox, ComboBox, and TextInput controls that both display data and let
users interact with the control to modify or change it. For example, you could use a CheckBox control to display
a selected (true value) or unselected (false value) cell in a DataGrid control.
When the user selects the cell of the DataGrid control that contains the CheckBox control, the user can interact
with the control to change its state. To the user, it appears that the DataGrid control is editable.
However, an item renderer by default is not connected to the editing mechanism of the list control; it does not
propagate changes to the list control’s data provider, nor does it dispatch an event when the user modifies the cell.
Although the list control appears to the user to be editable, it really is not.
In another example, the user changes the value of the CheckBox control, and then sorts the DataGrid column. But
the DataGrid sorts the cell by the value in the data provider, not the value in the CheckBox control, so the user
perceives that the sort works incorrectly.
You can manage this situation in several ways, including the following:
• In your item renderer, do not use controls that let users modify them (CheckBox, ComboBox, and others).
• Create custom versions of these controls to prohibit user interaction with them.
• Use the rendererIsEditor property of the list control to specify that the item renderer is also an item editor.
For more information, see “Example: Using an item renderer as an item editor” on page 844.
• Write your own code for the item renderer and hosting control to pass data back from the item renderer when
you do let users interact with it. For more information and an example, see “Example: Passing multiple values back
from an item editor” on page 840.
Setting the itemRenderer or itemEditor property in ActionScript
The itemRenderer and itemEditor properties are of type IFactory. When you set these properties in MXML,
the MXML compiler automatically casts the property value to the type ClassFactory, a class that implements the
IFactory interface.
When you set these properties in ActionScript, you must explicitly cast the property value to ClassFactory, as the
following example shows:
Shown below is the code for the RenderState.mxml item renderer:
Flex creates instances of item renderers and item editors as needed by your application for display and
measurement purposes. Therefore, the number of instances of an item renderer or item editor in your application
is not necessarily directly related to the number of visible item renderers. Also, if the list control is scrolled or
resized, a single item renderer instance may be reused to represent more than one data item. Thus, you should not
make assumptions about how many instances of your item renderer and item editor are active at any time.
Because Flex can reuse an item renderer, ensure that you fully define its state. For example, you use a CheckBox
control in an item renderer to display a true (checked) or false (unchecked) value based on the current value of
the data property. A common mistake is to assume that the CheckBox control in the item renderer is always in
its default state of unchecked. Developers then write an item renderer to inspect the data property for a value of
true and set the CheckBox control to checked if found.
However, you must take into account that the CheckBox may already be checked. So, you must inspect the data
property for a value of false, and explicitly uncheck the control if it is checked.
Accessing the listData property
If a component implements the IDropInListItemRenderer interface, you can use its listData property to obtain
information about the data passed to the component when you use the component in an item renderer or item
editor. The listData property is of type BaseListData, where the BaseListData class defines the following
properties:
| Property | Description |
| owner | A reference to the list control that uses the item renderer or item editor. |
| rowIndex | The index of the row of the DataGrid, List, or Tree control relative to the currently visible rows of the control, where the first row is at an index of 1. |
| label | The text representation of the item data based on the List class’s itemToLabel() method |
The BaseListData class has three subclasses: DataGridListData, ListData, TreeListData that define additional
properties. For example, the DataGridListData class adds the columnIndex and dataField properties that you
can access from an item renderer or item editor.
The data type of the value of the listData property depends on the control that uses the item renderer or item
editor. For a DataGrid control, the value is of type DataGridListData; for a List control, the value is of type
ListData; and for a Tree control, the value is of type TreeListData.
The TextArea control is one of the Flex controls that implements the IDropInListItemRenderer interface The item
renderer in the following example uses the listData property of the TextArea control to display the row and
column of each item renderer in the DataGrid control:
Because you use this item renderer in a DataGrid control, the data type of the value of the listData property is
DataGridListData. You use the dataChange event in this example to set the contents of the TextArea control every
time the data property changes.
The DataGrid control in the following example uses this item renderer:
This code produces the following image of the DataGrid control:
As you can see in this image, each cell of the DataGrid control displays its column and row index.
Handling data binding warnings from the compiler
Many of the following examples, and those in “Working with Item Editors” on page 821, define the application
data as an ArrayCollection of Objects. However, you might get compiler warning for these examples because the
Object class does not support data binding. That does not matter with these examples because the data is static.
If your data is dynamic, and you want it to support data binding, you can instead define your own data class that
supports binding. For example, you could create the following subclass of Object that supports data binding, and
use it instead:
By inserting the [Bindable] metadata tag before the class definition, you specify that all public properties
support data binding. For more information on data binding, see “Binding Data” on page 1229 and “Metadata
Tags in Custom Components” on page 33 in Creating and Extending Adobe Flex 3 Components.
2378
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
