Форум Flasher.ru

Форум Flasher.ru (http://www.flasher.ru/forum/index.php)
-   ActionScript 3.0 (http://www.flasher.ru/forum/forumdisplay.php?f=83)
-   -   AS3, Flash CS4: Добавляем картинку в ячейку DataGrid (http://www.flasher.ru/forum/showthread.php?t=136984)

KIVagant 02.03.2010 06:20

AS3, Flash CS4: Добавляем картинку в ячейку DataGrid
 
Вложений: 1
Не первый раз вижу в форуме по этой теме в качестве ответа ссылку на какой-то 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 (Сообщение 890294)
Не первый раз вижу в форуме по этой теме в качестве ответа ссылку на какой-то 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
http://murmadillo.tut.su/m/pricolo-table.jpg

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

"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 (Сообщение 890321)
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.


Часовой пояс GMT +4, время: 18:26.

Copyright © 1999-2008 Flasher.ru. All rights reserved.
Работает на vBulletin®. Copyright ©2000 - 2024, Jelsoft Enterprises Ltd. Перевод: zCarot
Администрация сайта не несёт ответственности за любую предоставленную посетителями информацию. Подробнее см. Правила.