Главная » ActionScript » Работа с объектом CellRenderer

0

CellRenderer — это класс, используемый компонентами на базе класса List (List, DataGrid, TileList и ComboBox) для отображения пользовательского содержимого ячеек в их строках и выполнения манипуляций с ним. Пользовательская ячейка может содержать текст, предварительно созданный компонент, например CheckBox, или любой созданный класс экранных объектов. Чтобы визуализировать данные с помощью CellRenderer, можно либо расширить класс CellRenderer или внедрить интерфейс ICellRenderer, чтобы создать собственный класс CellRenderer.

Классы List, DataGrid, TileList и ComboBox являются подклассами класса SelectableList. Класс SelectableList включает стиль cellRenderer. Этот стиль определяет экранный объект, используемый компонентом для визуализации ячеек.

Настроить форматирование используемых стилей можно с помощью CellRenderer, вызвав метод setRendererStyle() объекта List (см. раздел «Форматирование ячеек» на странице 39). Также можно определить пользовательский класс для использования в качестве CellRenderer (см. раздел «Определение пользовательского класса CellRenderer» на странице 40).

Форматирование ячеек

Класс CellRenderer включает ряд стилей, позволяющих контролировать формат ячейки.

Следующие стили позволяют определить обложки, используемые для различных состояний ячейки

(отключенное, нажатое, наведенное и ненажатое):

•   disabledSkin и selectedDisabledSkin;

•   downSkin и selectedDownSkin;

•   overSkin и selectedOverSkin;

•   upSkin и selectedUpSkin.

Следующие стили применяются к форматированию текста:

•   disabledTextFormat;

•   textFormat;

•   textPadding.

Чтобы задать эти стили, нужно вызвать метод setRendererStyle() объекта List или метод setStyle() объекта CellRenderer. Чтобы получить эти стили, нужно вызвать метод getRendererStyle() объекта List или метод getStyle() объекта CellRenderer. Также можно вызвать объект, определяющий все стили визуализатора (в качестве названных свойств объекта), через свойство rendererStyles объекта List или с помощью метода getStyleDefinition() объекта CellRenderer.

Вызвав метод clearRendererStyle(), можно сбросить стиль и использовать значение по умолчанию. Чтобы получить или задать высоту строк списка, используйте свойство rowHeight объекта List.

Определение пользовательского класса CellRenderer

Создание класса, расширяющего класс CellRenderer, для определения пользовательского CellRenderer

Например, следующий код включает два класса. Класс ListSample создает экземпляр компонента List и использует другой класс, CustomRenderer, чтобы определить визуализатор ячейки для компонента List. Класс CustomRenderer расширяет класс CellRenderer.

1   Выберите "Файл" > "Создать".

2   В открывшемся окне "Создать документ" выберите "Файл Flash (ActionScript 3.0)" и нажмите "ОК".

3   Выберите "Окно" > "Компоненты", чтобы открыть панель "Компоненты".

4   На панели "Компоненты" перетащите компонент "Список" в рабочую область.

5   Если Flash не показывает Инспектора свойств, выберите "Окно" > "Свойства" > "Свойства".

6   Выделив компонент List, задайте свойства в Инспекторе свойств.

•   Имя экземпляра: myList

•   W (ширина): 200

•   H (высота): 300

•   X: 20

•   Y: 20

7   Выберите кадр 1 слоя 1 во временной шкале, а затем "Окно" > "Действия".

8   Введите следующий сценарий на панели "Действия".

myList.setStyle("cellRenderer", CustomCellRenderer); myList.addItem({label:"Burger — $5.95"}); myList.addItem({label:"Fries — $1.95"});

9   Выберите пункт "Файл" > "Сохранить". Присвойте файлу имя и нажмите кнопку "ОК".

10 Выберите "Файл" > "Создать".

11 В открывшемся окне "Создать документ" выберите "Файл ActionScript" и нажмите "ОК".

12 В окне сценария введите следующий код, чтобы определить класс CustomCellRenderer.

package {

import fl.controls.listClasses.CellRenderer;

import flash.text.TextFormat;

import flash.filters.BevelFilter;

public class CustomCellRenderer extends CellRenderer {

public function CustomCellRenderer() {

var format:TextFormat = new TextFormat("Verdana", 12);

setStyle("textFormat", format);

this.filters = [new BevelFilter()];

}

}

}

13 Выберите пункт "Файл" > "Сохранить". Присвойте файлу имя CustomCellRenderer.as, поместите его в тот же каталог, что и FLA-файл, и нажмите кнопку "ОК".

14 Выберите "Управление" > "Тестировать ролик".

Использование класса, реализующего интерфейс ICellRenderer, для определения пользовательского CellRenderer

Также CellRenderer можно определить с помощью любого класса, наследующего класс DisplayObject и реализующего интерфейс ICellRenderer. Например, следующий код определяет два класса. Класс ListSample2 добавляет объект List в список отображения и определяет его CellRenderer для использования класса CustomRenderer. Класс CustomRenderer расширяет класс CheckBox (который расширяет класс DisplayObject) и реализует интерфейс ICellRenderer. Обратите внимание, что класс CustomRenderer определяет методы get и set для свойств data и listData, определенных в интерфейсе ICellRenderer. Другие свойства и методы, определенные в интерфейсе ICellRenderer (свойство selected и метод setSize() уже определены в классе CheckBox.

1   Выберите "Файл" > "Создать".

2   В открывшемся окне "Создать документ" выберите "Файл Flash (ActionScript 3.0)" и нажмите "ОК".

3   Выберите "Окно" > "Компоненты", чтобы открыть панель "Компоненты".

4   На панели "Компоненты" перетащите компонент "Список" в рабочую область.

5   Если Flash не показывает Инспектора свойств, выберите "Окно" > "Свойства" > "Свойства".

6   Выделив компонент List, задайте свойства в Инспекторе свойств.

•   Имя экземпляра: myList

•   W (ширина): 100

•   H (высота): 300

•   X: 20

•   Y: 20

7   Выберите кадр 1 слоя 1 во временной шкале, затем откройте "Окно" > "Действия".

8   Введите следующий сценарий на панели "Действия".

myList.setStyle("cellRenderer", CustomCellRenderer); myList.addItem({name:"Burger", price:"$5.95"}); myList.addItem({name:"Fries", price:"$1.95"});

9   Выберите пункт "Файл" > "Сохранить". Присвойте файлу имя и нажмите кнопку "ОК".

10 Выберите "Файл" > "Создать".

11 В открывшемся окне "Создать документ" выберите "Файл ActionScript" и нажмите "ОК".

12 В окне сценария введите следующий код, чтобы определить класс CustomCellRenderer.

package

{

import fl.controls.CheckBox;

import fl.controls.listClasses.ICellRenderer;

import fl.controls.listClasses.ListData;

public class CustomCellRenderer extends CheckBox implements ICellRenderer {

private var _listData:ListData;

private var _data:Object;

public function CustomCellRenderer() {

}

public function set data(d:Object):void {

_data = d;

label = d.label;

}

public function get data():Object {

return _data;

}

public function set listData(ld:ListData):void {

_listData = ld;

}

public function get listData():ListData {

return _listData;

}

}

}

13 Выберите пункт "Файл" > "Сохранить". Присвойте файлу имя CustomCellRenderer.as, поместите его в тот же каталог, что и FLA-файл, и нажмите кнопку "ОК".

14 Выберите "Управление" > "Тестировать ролик".

Использование символа для определения CellRenderer

Также для определения CellRenderer можно использовать символ в библиотеке. Символ должен быть экспортирован для ActionScript, а имя класса для библиотечного символа должно быть связано с фалом класса, который реализует интерфейс ICellRenderer или расширяет класс CellRenderer или один из его подклассов).

В следующем примере пользовательский CellRenderer определяется с помощью библиотечного символа.

1   Выберите "Файл" > "Создать".

2   В открывшемся окне "Создать документ" выберите "Файл Flash (ActionScript 3.0)" и нажмите "ОК".

3   Выберите "Окно" > "Компоненты", чтобы открыть панель "Компоненты".

4   На панели "Компоненты" перетащите компонент "Список" в рабочую область.

5   Если Flash не показывает Инспектора свойств, выберите "Окно" > "Свойства" > "Свойства".

6   Выделив компонент List, задайте свойства в Инспекторе свойств.

•   Имя экземпляра: myList

•   W (ширина): 100

•   H (высота): 400

•   X: 20

•   Y: 20

7   Щелкните панель "Параметры", а затем дважды щелкните второй столбец в строке dataProvider.

8   В открывшемся диалоговом окне "Значения" дважды щелкните знак "+", чтобы добавить две строки элементов данных (с метками label0 и label1), затем нажмите кнопку "ОК".

9   С помощью инструмента "Текст" нарисуйте в рабочей области текстовое поле.

10 Выделив текстовое поле, задайте свойства в Инспекторе свойств.

•   Тип текста: Динамический текст

•   Имя экземпляра: textField

•   W (ширина): 100

•   Размер шрифта: 24

•   X: 0

•   Y: 0

11 Выделив текстовое поле, выберите "Модификация" > "Преобразовать в символ".

12 В диалоговом окне "Преобразовать в символ" настройте необходимые параметры и нажмите "ОК".

•   Имя: MyCellRenderer

•   Тип: MovieClip

•   Экспорт для ActionScript: выбрано

•   Экспортировать в первый кадр: выбрано

•   Класс: MyCellRenderer

•   Базовый класс: flash.display.SimpleButton

Если Flash отображает предупреждение класса ActionScript, нажмите кнопку "ОК" в окне предупреждения.

13 Удалите экземпляр символа нового фрагмента ролика из рабочей области.

14 Выберите кадр 1 слоя 1 во временной шкале, затем откройте "Окно" > "Действия".

15 Введите следующий сценарий на панели "Действия".

myList.setStyle("cellRenderer", MyCellRenderer);

16 Выберите пункт "Файл" > "Сохранить". Присвойте файлу имя и нажмите кнопку "ОК".

17 Выберите "Файл" > "Создать".

18 В открывшемся окне "Создать документ" выберите "Файл ActionScript" и нажмите "ОК".

19 В окне сценария введите следующий код, чтобы определить класс MyCellRenderer.

package {

import flash.display.MovieClip; import flash.filters.GlowFilter; import flash.text.TextField;

import fl.controls.listClasses.ICellRenderer; import fl.controls.listClasses.ListData; import flash.utils.setInterval;

public class MyCellRenderer extends MovieClip implements ICellRenderer {

private var _listData:ListData; private var _data:Object; private var _selected:Boolean;

private var glowFilter:GlowFilter;

public function MyCellRenderer() { glowFilter = new GlowFilter(0xFFFF00); setInterval(toggleFilter, 200);

}

public function set data(d:Object):void {

_data = d;

textField.text = d.label;

}

public function get data():Object {

return _data;

}

public function set listData(ld:ListData):void {

_listData = ld;

}

public function get listData():ListData {

return _listData;

}

public function set selected(s:Boolean):void {

_selected = s;

}

public function get selected():Boolean {

return _selected;

}

public function setSize(width:Number, height:Number):void {

}

public function setStyle(style:String, value:Object):void {

}

public function setMouseState(state:String):void{

}

private function toggleFilter():void {

if (textField.filters.length == 0) {

textField.filters = [glowFilter];

} else {

textField.filters = [];

}

}

}

}

20 Выберите пункт "Файл" > "Сохранить". Присвойте файлу имя MyCellRenderer.as, поместите его в тот же каталог, что и FLA-файл, и нажмите кнопку "ОК".

21 Выберите "Управление" > "Тестировать ролик".

Свойства CellRenderer

Свойство data представляет собой объект, содержащий все свойства, заданные для CellRenderer. Например, в следующем классе, который определяет пользовательский класс CellRenderer, расширяющий класс CheckBox, функция set для свойства data передает значение data.label свойству label, унаследованному от класса CheckBox.

public class CustomRenderer extends CheckBox implements ICellRenderer {

private var _listData:ListData;

private var _data:Object;

public function CustomRenderer() {

}

public function set data(d:Object):void {

_data = d;

label = d.label;

}

public function get data():Object {

return _data;

}

public function set listData(ld:ListData):void {

_listData = ld;

}

public function get listData():ListData {

return _listData;

}

}

}

Свойство selected определяет, выделена ячейка в списке или нет.

Применение объекта CellRenderer к столбцу объекта DataGrid

Объект DataGrid может иметь несколько столбцов, для каждого из которых можно указать разные визуализаторы. Каждый столбец объекта DataGrid представлен объектом DataGridColumn, а класс DataGridColumn включает свойство cellRenderer, для которого можно определить объект CellRenderer столбца.

Определение объекта CellRenderer для редактируемой ячейки

Класс DataGridCellEditor определяет визуализатор, используемый для редактируемых ячеек в объекте DataGrid. Он становится визуализатором ячейки, если свойствоeditable объекта DataGrid имеет значение true и пользователь щелкает ячейку для редактирования.. Чтобы определить CellRenderer для редактируемой ячейки, задайте свойство itemEditor для каждого элемента в массиве columns объекта DataGrid.

Использование изображения, SWF-файла или фрагмента ролика в качестве объекта CellRenderer

Класс ImageCell, являющийся подклассом CellRenderer, определяет объект, используемый для визуализации ячеек, в которых основным содержимым является изображение, SWF-файл или фрагмент ролика. Класс ImageCell включает следующие стили для определения внешнего вида ячейки:

•   imagePadding — заполнитель, отделяющий край ячейки от края изображения, в пикселах;

•   selectedSkin — обложка, используемая для указания выбранного состояния;

•   textOverlayAlpha — прозрачность слоя, расположенного за меткой ячейки;

•   textPadding — заполнитель, отделяющий край ячейки от края текста, в пикселах.

Класс ImageCell является классом CellRenderer по умолчанию для класса TileList.

Источник: Использование компонентов ActionScript 3.0 – 2008

По теме:

  • Комментарии