The Secret to Effective HTML Page Title Tags
The CS5 CSS Starter Page Series - Part 9: Quality Assurance
Quickshot - Using Subqueries and Count to Display Membership Counts Per RegionThe CS5 CSS Starter Page Series - Part 8: Adding a Custom Font
Formatting Currency Values in JavaScript
Page 1 of 3 The standard v2 UI components have a lot of basic functionality, and they are suitable in most applications. However, it would be very difficult for any developer or company to anticipate every possible requirement for everyone that uses the component or components they create. Therefore, it's quite possible that you'll find that you have a project on occasion in which one of the standard components almost works, but not quite. In those cases a custom cell renderer might be just the thing.
Cell renderers are inherent in every List-based component. That group includes List, ComboBox, Menu, MenuBar, Tree, and DataGrid. Each has a default cell renderer that it uses to render the contents of each item in the component. For example, List components, by default, display a single line of text with the possible addition of an icon to the left of the text. If you want the List to display a CheckBox in each row, for example, you need to write a custom cell renderer.
Cell renderers are actually components themselves. That means that they have two parts: a movie clip symbol and a class. In the next several sections, you will learn how to create the cell renderer class. Once you've created the class, you simply specify that class in the linkage settings for the corresponding movie clip symbol.
There are some specific guidelines you should follow when creating the cell renderer class. Specifically, you want to make sure that it implements the necessary methods, and you want to make sure you declare the necessary properties.
Cell renderer classes should implement the cell renderer "interface." The term "interface" is used in quotes because there's no formal ActionScript 2.0 interface. However, there are some methods any cell renderer class should implement.
The cell renderer's parent row uses the the values returned by the two methods to determine the initial, preferred dimensions. The methods should return numeric values indicating the width and height of the default cell contents. Generally the dimensions should not exceed the default row dimensions.
The setSize() method accepts two parameters: the width and height. The method is automatically called each time the parent component's dimensions change. Implement the method so that the contents of the cell scale appropriately. That means different things in different contexts. For example, if the cell contains a CheckBox, you probably don't want to scale the CheckBox. Instead, you may want to re-center the instance. On the other hand, if the cell contains a ComboBox, you probably want to scale it in the x-direction (though likely not in the y-direction.)
The setValue() method is the one that has the most obvious effect. The method is automatically called when the component first draws, when the component scrolls, and every time the user interacts with the component. You should use the setValue() method to update the view of the cell. The method gets passed three parameters: the suggested label, the corresponding data provider item, and a string indicating the cell state of either normal, highlighted, or selected.
Cell renderer classes also "inherit" properties and methods. Technically it's not actual inheritance because the properties and methods are not getting passed down from a super class. Instead, they are added to the cell renderer class's prototype by the parent component. This means that you have to declare them as properties to be able to use them without compiler errors.
The listOwner property is a reference to the parent component. For example, if you create a cell renderer to use with a List component, the listOwner property will reference the List instance containing the cell.
The owner property references the parent row. Every List-based component is composed of rows. The rows are further composed of cells. In most cases each row contains only one cell. However, in some cases (DataGrid) a row can contain many cells. Regardless, it can sometimes be useful to have a reference to the container row, and the owner property does just that.
The getCellIndex() method returns an object with two properties: itemIndex and columnIndex. The itemIndex property specifies the index of the row within the parent component. The columnIndex property is only relevant when the parent component uses more than one cell per row (DataGrid), and it specifies the index of the cell within the row. The rows are indexed starting at 0 from top to bottom. The cells are indexed starting at 0 from left to right.
The getDataLabel() method returns the name of the data provider element property or attribute that determines the data to use for the cell. For example, in a List component, by default, the data is specified using the data property. Consider the following simple example:
import mx.controls.List;
this.createClassObject(List, "clSample", 1);
clSample.dataProvider = [{label: "a", data: 1}];
However, it's also possible that the data field might not be named data. For example, in a DataGrid cell the data field could have any name. In any case, the getDataLabel() property takes care of those details so you don't need to concern yourself.
Keywords
flash mx 2004, actionscript 2.0, cell renderer api, customize components, setsize, listowner, ui, v2
