AS3, Flash CS4: Добавляем картинку в ячейку DataGrid

KIVagant · 02.03.2010, 06:20

Не первый раз вижу в форуме по этой теме в качестве ответа ссылку на какой-то PictureInDataGrid.rar. Странно, что никто до сих пор не возмутился. Приводимый пример ужасен для рассмотрения. Комментариев нет, логика запутанная, а именование переменных вида "sp", "cl", "s", "dp" вообще доводит до бешенства.
Простая задача размещения рисунка в ячейке DataGrid подана в виде какого-то бредового кошмара.
Поэтому для всех нуждающихся привожу пример.

1. Добавляем на сцену картинку, например moneySmall.png. В свойствах (Properties) устанавливаем "Export for ActionScript" с именем MoneySmallIcon.

2. Добавляем на сцену компонент DataGrid (перетягиваем мышкой). Если этого не сделать - получим кучу глюков. С самой сцены удаляем его, в библиотеке остаётся набор нужных объектов.
У меня был случай, когда неосторожным движением удалил какой-то из этих объектов. Очень трудно потом восстанавливать.

3. В ACTIONS - FRAME (к своим классам применить это же нетрудно) пишем скрипты.

Код AS3:

import fl.controls.DataGrid;
import fl.controls.dataGridClasses.DataGridColumn;
import fl.data.DataProvider;
 
var dataGrid:DataGrid = new DataGrid(); // Создаем таблицу
dataGrid.move(10, 10); // Координаты таблицы на сцене
dataGrid.setSize(500, 300); // Размер таблицы
dataGrid.rowHeight = 28; // Высота строк
dataGrid.setStyle("textFormat", new TextFormat('Tahoma', 12, 0x000000, null, null, null, null, null, 'left')); // Устанавливаем формат текста в ячейках
dataGrid.setStyle("headerTextFormat", new TextFormat('Tahoma', 12, 0x660000, true, null, null, null, null, 'center')); // Устанавливаем формат заголовков
 
var col1:DataGridColumn = new DataGridColumn ("SomeID"); // Создаем столбцы
col1.headerText = "№";
col1.width = 50;
 
var col2:DataGridColumn = new DataGridColumn ("Price"); // Создаем столбцы
col2.headerText = "Цена";
col2.width = 70;
col2.cellRenderer = MyCellRenderer; // Заменяем рендерер текста собственным, который объявлен в файле MyCellRenderer.as (смотрите ниже)
 
var col3:DataGridColumn = new DataGridColumn ("Comment"); // Создаем столбцы
col3.headerText = "Комментарий";
 
dataGrid.addColumn(col1); // Добавляем столбцы в таблицу
dataGrid.addColumn(col2);
dataGrid.addColumn(col3);
 
var dataP:DataProvider = new DataProvider(); // Создаем таблицу
for(var i:Number = 0; i < 20; i++) { // Генерируем случайные записи
    dataP.addItem( { SomeID:Math.round(Math.random()*100), Price:(Math.random()*100).toFixed(2), Comment:'Кукушечки '+Math.random() } );
}
dataGrid.dataProvider = dataP; // Заполнить таблицу данными, которые мы сгенерировали выше
 
addChild(dataGrid); // Добавляем на сцену таблицу

4. В корневой папке рядом с нашим PictureInTable.fla создаем файл MyCellRenderer.as с кодом.

Код AS3:

package
{
	import fl.controls.listClasses.CellRenderer;
	import fl.controls.listClasses.ListData;
	import flash.display.Bitmap;
	import flash.display.Sprite;
	/**
	 * Наш рендерер, которым мы заменяем стандартный
	 */
	public class MyCellRenderer extends CellRenderer
	{
		/**
		 * Вспомогательный объект для размещения картинок в нём, не мешая тексту
		 */
		var cellSprite:Sprite = new Sprite();
		/**
		 * Конструктор
		 */
		public function MyCellRenderer() {
			addChildAt(this.cellSprite, 0); // Добавляем в 0-ю позицию будущие картинки (под текст)
		}
		/**
		 * Наследуем метод, чтобы добавить картинку
		 */
		override public function set listData(newListData:ListData):void {
 
			_listData = newListData; // Передаем в родительский объект полученные данные
			_label = _listData.label; // Передаем в родительский объект тексты, которые должны быть в ячейках
			var bitmap = new Bitmap(); // Создаем картинку и заполняем данными из библиотеки. Картинку можно на основе _listData.label менять на своё усмотрение.
			bitmap.bitmapData = new MoneySmallIcon(0, 0); // Этот объект находится в библиотеке символов
			bitmap.x = 40; // Указываем координаты размещения внутри ячейки
			bitmap.y = 2;
			this.cellSprite.addChild(bitmap); // Здесь можно любую другую картинку добавить
		}
	}
}

Tr1te · 02.03.2010, 09:23

Огромное спасибо за подробное описание.

Alex Lexcuk · 02.03.2010, 10:52

Цитата:

Сообщение от KIVagant

Не первый раз вижу в форуме по этой теме в качестве ответа ссылку на какой-то PictureInDataGrid.rar. Странно, что никто до сих пор не возмутился. Приводимый пример ужасен для рассмотрения. Комментариев нет, логика запутанная, а именование переменных вида "sp", "cl", "s", "dp" вообще доводит до бешенства.
[/as3]

Так дайвайте рассмотрим основной код

Код AS3:

import fl.controls.*;
import fl.controls.ScrollPolicy;
import fl.data.DataProvider;
import fl.controls.listClasses.*;
import fl.events.*;
 
var i:uint;
var totalRows:uint = 6;
var c:int;
var dp:DataProvider = new DataProvider();
 
for (i = 0; i < totalRows; i++) {
	dp.addItem({col1:new MyDatObj('XM'+i, Star), col2:'r'+i, col3:'m'+i, id:c++});
}
 
var dg:DataGrid = new DataGrid();
dg.setSize(550, 400);
dg.columns = ["col1", "col2", "col3"];
dg.dataProvider = dp;
addChild(dg);
 
dg.addEventListener(ListEvent.ITEM_CLICK, listEventHandler);
MyRenderer.visio = Pricolo;
MyRenderer.dp = dp;
dg.rowHeight = 100;
dg.setStyle('cellRenderer', MyRenderer); 
 
 
 
function listEventHandler(evt:ListEvent):void{
	var t:DataGrid = evt.currentTarget as DataGrid;
	var dP:DataProvider = t.dataProvider;
	trace("You are above row: " + evt.rowIndex + " column: " + evt.columnIndex); 
	var head:String = t.columns[evt.columnIndex].headerText;
	trace(dP.getItemAt(evt.index)[head]);//содержимое клацнутой ячейки
}

А че там разобраться то?
Я его в прошлом году за 10 мин написал, (почти все из хелпа скопипастено), как бы подсказка, Star это рисунок в библиотеке, еще есть Pricolo задний фон ячейки.
О чем можно было догадаться запустив по ctrl+enter

Насчет переменных в классах в которые лезть, я думал что никто не будет.

"sp", "cl", "s", "dp"

sp - спрайт
cl - var cl:Class;
s - строка
dp дата провайдер

Тк. выше перечисленное используется в одном экземпляре, комметировать оное смысла не вижу.

KIVagant · 02.03.2010, 13:11

Alex Lexcuk, помимо основного кода, там присутствует ещё 2 класса, смысл которых в такой простой задаче (я про MyDatObj.as) весьма загадочный. Для того, чтобы проследить логику - нужно здорово покурить кальянчику...

Добавлено через 7 минут
Alex Lexcuk, приведу несколько замечаний:
1. Добавление обычной графики как MovieClip является избыточным.
2. Класса MyDatObj.as там вообще не нужен, можно было вполне обойтись без него.
3. Некие свойства visio, texObj и загадочные манипуляции с ними в перемешку с кучей ненужных trace навевают на мысль удерживать Backspace, пока не полегчает.
4. И вообще, то что твориться в listData() в MyRenderer.as (впрочем как и в set data())— интересно рассматривать в клубах экстремального программирования, но никак не рекомендовать начинающим.

Alex Lexcuk · 02.03.2010, 15:48

Цитата:

Сообщение от KIVagant

Alex Lexcuk, помимо основного кода, там присутствует ещё 2 класса, смысл которых в такой простой задаче (я про MyDatObj.as) весьма загадочный. Для того, чтобы проследить логику - нужно здорово покурить кальянчику...

Не курите эту дрянь... Логика в том, что можно ипользуя эти два класса, натыкать разных картинок из библиотеки в ячейки датыГрид. Вот и вся логика. Насчет избыточности мовиклипа, мне как-бы пофигу.

BuKT · 27.03.2011, 08:51

Прошу переименовать тему в "добавляем фон на столбец Datagrid". Вводит в заблуждение.

[Вырезано цензурой] четыре часа про[вырезано цензурой]ся, пока понял, что произвольные картинки, меняющиеся от строки к строке нельзя этим способом проставить.

easy.proger · 27.03.2011, 09:10

Как же вы не хотите мыслить шире... почему нельзя ? ваш рендер который вы установили, не в качестве рендера текста как было сказано выше, а в качестве рендера ячейки как таковой

Так подумайте на раз, два, три, как в СВОЕМ классе поставить нужную картинку нужной ячейки ? Даю подсказку - под каждую ячейку в фабрике создается отдельный экземпляр вашего рендер класса ...

mayakwd · 27.03.2011, 11:27

KIVagant, то, что вы привели ни чем не лучше примера, который вы осудили.
Ваша версия идет полностью вразрез с концепцией программирования UIComponent'ов.

i.o. · 27.03.2011, 11:36

вы бы уж определилсь: в кадрах пишите или в классах.

ambuddy · 30.04.2013, 19:57

Цитата:

PictureInDataGrid.rar. Странно, что никто до сих пор не возмутился. Приводимый пример ужасен для рассмотрения. Комментариев нет, логика запутанная

Подтверждаю, там черт ногу сломит. А вот в примере KIVagant'a разобрался в 2 минуты, из которых 30 сек. грузился Flash IDE

Только заметил некоторую особенность при переназначении свойства listData - оно определяется каждый раз при клике на ячейке. Чтобы этого избежать можно переназначать вместо него свойство data:

Код AS3:

override public function set data(cellData:Object):void {
	_data = cellData;
	var bitmap = new Bitmap( cellData.iconBitmap );		// тут можно использовать синатксис this.data.iconBitmap.
	bitmap.x = 2;
	bitmap.y = 2;
	if(cellSprite.numChildren>0) cellSprite.removeChildAt(0);
	cellSprite.addChild(bitmap);
}

И кстати вот чтобы получить для каждой ячейки свою картинку, ее можно задать отдельным свойством (например "iconBitmap", как у меня) при заполнении таблицы и получить его содержимое через this.data.iconBitmap в любом месте нашего MyCellRenderer.