PDA

Просмотр полной версии : Custom CellRenderer


vvk80
30.10.2007, 17:37
Здравствуйте!

вот сейчас мучаюсь над следующей проблемой:
нужно создать этакую панельку с неограниченным количеством добавляемых элементов, чтобы по клику на элемент открывался другой ролик в соседней области (что-то вроде красивого меню с картинками).

Элементы будут трех видов: с картинкой и текстом, только текст, только картинка.

После копания пришел к выводу, что максимально для этого подходит TileList компонент. Начал копать в сторону создания кастомных CellRenderer ячеек.

Собственно вопрос:
Как мне отключить полностью отключить все адобовские скины бэкграунды, mouseOver и т.д??? Понятно что можно в библиотеке все стереть, но это не совсем корректный путь имхо...

Любая помощь/советы/указания/ссылки по поводу реализации customного CellRenderer со своими програмными highlight-ами приветствуются!

Результат кода (нагло содрал адобовский ImageCell, и подстраиваю его под свои нужды)...

package HelperClasses.MovieClipClasses
{

import fl.controls.listClasses.CellRenderer;
import fl.controls.listClasses.ICellRenderer;
import fl.controls.listClasses.ListData;
import fl.controls.listClasses.TileListData;
import fl.controls.TextInput; //Only for ASDocs
import fl.containers.UILoader;
import fl.core.InvalidationType;
import fl.core.UIComponent;
import flash.display.Graphics;
import flash.display.Shape;
import flash.display.Sprite;
import flash.events.*;

//--------------------------------------
// Styles
//--------------------------------------
//[Style(name="selectedSkin", type="Class")]

//[Style(name="textPadding", type="Number", format="Length")]

//[Style(name="imagePadding", type="Number", format="Length")]

//[Style(name="textOverlayAlpha", type="Number", format="Length")]

public class MyCellRenderer extends CellRenderer implements ICellRenderer
{

//protected var textOverlay:Shape;
private var container:Sprite = new Sprite();

protected var loader:UILoader;

private static var defaultStyles:Object = {
imagePadding:1,
textOverlayAlpha:0.7
};


public static function getStyleDefinition():Object {
return mergeStyles(defaultStyles, CellRenderer.getStyleDefinition());
}


public function MyCellRenderer()
{
super();

loader = new UILoader();

loader.addEventListener(IOErrorEvent.IO_ERROR, handleErrorEvent, false, 0, true);

loader.autoLoad = true;
loader.scaleContent = true;
container.addChild(loader);
container.addEventListener (MouseEvent.ROLL_OVER, _onRollOver);
container.addEventListener (MouseEvent.ROLL_OUT, _onRollOut);
container.buttonMode = true;
container.mouseChildren = false;
addChild(container);
this.mouseChildren = true;
}
private function _onRollOver(evt:MouseEvent):void
{
trace("RollOver");
}

private function _onRollOut(evt:MouseEvent):void
{
trace("RollOut");
}


override public function get listData():ListData {
return _listData;
}

override public function set listData(value:ListData):void {
_listData = value;
label = _listData.label;
var newSource:Object = (_listData as TileListData).source;
if (source != newSource) { // Prevent always reloading...
source = newSource;
}
}


<p>Valid image file formats include GIF, PNG, and JPEG.</p>
public function get source():Object {
return loader.source;
}
public function set source(value:Object):void {
loader.source = value;
}


override protected function configUI():void {
super.configUI();

//textOverlay = new Shape();
/*var g:Graphics = textOverlay.graphics;
g.beginFill(0xFFFFFF);
g.drawRect(0,0,100,100);
g.endFill();*/
}
override protected function draw():void {
super.draw();
}

override protected function drawLayout():void {
var imagePadding:Number = getStyleValue("imagePadding") as Number;
loader.move(imagePadding, imagePadding);

var w:Number = width-(imagePadding*2);
var h:Number = height-imagePadding*2;
if (loader.width != w && loader.height != h) {
loader.setSize(w,h);
}
loader.drawNow(); // Force validation!

// Position textfield
if (_label == "" || _label == null) {
if (container.contains(textField)) {container.removeChild(textField); }
//if (contains(textOverlay)) { removeChild(textOverlay); }
} else {
var textPadding:Number = getStyleValue("textPadding") as Number;
//textField.width = Math.min(width-textPadding*2, textField.textWidth+5);
//textField.height = textField.textHeight + 5;
textField.multiline = true;
textField.wordWrap = true;

textField.x = width;
textField.y = height-45 ; //

/*textOverlay.x = imagePadding;
textOverlay.height = textField.height + textPadding*2;
textOverlay.y = height - textOverlay.height - imagePadding;
textOverlay.width = width - imagePadding*2;
textOverlay.alpha = getStyleValue("textOverlayAlpha") as Number;*/

//addChild(textOverlay);
container.addChild(textField);
}

//background.width = width;
//background.height = height;
background = null;
}

protected function handleErrorEvent(event:IOErrorEvent):void {
dispatchEvent(event);
}

}
}

Заранее огромное спасибо!

derhab
30.10.2007, 21:13
Как мне отключить полностью отключить все адобовские скины бэкграунды, mouseOver и т.д??? Понятно что можно в библиотеке все стереть, но это не совсем корректный путь имхо...
зачем стирать? адобовцы специально дали возможность редактировать скины...даблклик и ты внутри компонента.

vvk80
31.10.2007, 10:36
зачем стирать? адобовцы специально дали возможность редактировать скины...даблклик и ты внутри компонента.

это хорошо, но мне в данном случае эти скины не нужны, я хочу сделать свои программные, так как у меня уже есть код, создающий подсветку и т.д...
мне нужно отключить адобовские скины, в этом весь вопрос...
Я думаю, здесь проблема в наследовании (может быть наследоваться от другого класса?)... или просто я не знаю метод, который управляет появлением этих скинов...

В общем требуется помощь профессионалов...:umnik2:

silin
31.10.2007, 12:40
попробуй создать пустой мувик в библиотеке (MySkin, например)
и myTile.setStyle("skin",MySkin);
зы: но это все смотреть/пробовать надо, плохо ориентируюсь в теме..

derhab
31.10.2007, 18:02
В хелпе посмотри Class StyleManager, но, думаю, тебе это не очень поможет, скины программно там не поменять...
а вот это уже интереснее - http://yarovoy.com/2007/10/26/liquid_components/

vvk80
31.10.2007, 18:43
В хелпе посмотри Class StyleManager, но, думаю, тебе это не очень поможет, скины программно там не поменять...
а вот это уже интереснее - http://yarovoy.com/2007/10/26/liquid_components/

спасибо за ссылку!!! В принципе как раз то что нужно... только вот tileList там нет...

vvk80
01.11.2007, 12:40
Уважаемые форумчане!

Продолжаю разбираться с custom CellRenderer... На кастомные программные скины забил, так как так и не понял как мне все это замутить. В итоге отрисовал вcе во Flash (точнее скопировал из Ill).

Вопрос теперь в другом: как мне что либо передать в мой кастомный CellRenderer r(например я хочу задавать разные параметры (длина, ширина, наличие картинки) для каждой из ячеек)??? Я просто не понимаю как этот класс инициализируется: один для всех ячеек или для каждой свой экземпляр...???

Формирую я свой TileList так:
private var tl:TileList;
private var dp:DataProvider = new DataProvider();
//private var
public function LeftPane():void
{
tl = this.tlMain;
tl.columnWidth = 120;
tl.direction = ScrollBarDirection.VERTICAL;
tl.rowHeight = 100;
//tl.scrollRect =
dp.addItem({label:"Lorem Ipsum Colon Sit Amet. de ryt golof guidrt", source:"Images//firstPageDraft.png", data:"B"});
dp.addItem({label:"HellowWorld", source:"Images//firstPageDraft.png", data:"B"});
dp.addItem({label:"HellowWorld", source:"Images//firstPageDraft.png", data:"B"});
dp.addItem({label:"HellowWorld", source:"Images//firstPageDraft.png", data:"B"});
dp.addItem({label:"HellowWorld", source:"Images//firstPageDraft.png", data:"B"});
dp.addItem({label:"HellowWorld", source:"Images//firstPageDraft.png", data:"B"});
dp.addItem({label:"HellowWorld", source:"Images//firstPageDraft.png", data:"B"});
dp.addItem({label:"HellowWorld", source:"Images//firstPageDraft.png", data:"B"});
dp.addItem({label:"HellowWorld", source:"Images//firstPageDraft.png", data:"B"});
dp.addItem({label:"HellowWorld", source:"Images//firstPageDraft.png", data:"B"});
dp.addItem({label:"HellowWorld", source:"Images//firstPageDraft.png", data:"B"});
dp.addItem({label:"HellowWorld", source:"Images//firstPageDraft.png", data:"B"});
tl.dataProvider = dp;
tl.setStyle('cellRenderer', MyCellRenderer);


Я так понял, что объект посылаемый через метод addItem это TileListData, который потом берется вот этой функцией
override public function set listData(value:ListData):void {
_listData = value;
label = _listData.label;
var newSource:Object = (_listData as TileListData).source;

if (source != newSource) { // Prevent always reloading...
source = newSource;
}
}
Как туда что-либо впихнуть я не понял... Может как-то создать класс, наследованный от TileListData и туда все пропихнуть... Но тогда не понятно как указать этому методу (выше), чтобы он использовал мой TileListData... В общем, нужна помощь!!!

Nirth
01.11.2007, 14:14
Вы хотите чтобы ячейки имели разные размеры? Это не возможно, компоненты List (DataGrid, List, TileList, HorizontalList, AdvancedDataGrid и тд.) созданы так чтобы все ячейки имели одинаковые размеры. У этого есть свои плюсы и минусы.