Custom CellRenderer

vvk80 · [+3 09.12.07]

Здравствуйте!

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

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

После копания пришел к выводу, что максимально для этого подходит 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

Цитата:

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

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

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

vvk80 · [+3 09.12.07]

Цитата:

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

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

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

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

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 · [+3 09.12.07]

Цитата:

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

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

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

vvk80 · [+3 09.12.07]

Уважаемые форумчане!

Продолжаю разбираться с 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 и тд.) созданы так чтобы все ячейки имели одинаковые размеры. У этого есть свои плюсы и минусы.