Tuesday, March 30, 2010

Manipulating Object in a TileList

Okay, so I am filling a TileList component with custom ''ChordUnit'' MovieClip objects, each of which is associate to a ChordUnit Class.

I've established a way of determining if any of these objects are being moused over or clicked:

public function setChordBinSong(song:int, extend:Boolean):void {

%26amp;n bsp;

dpChords = new DataProvider();

...

for (var i=0; i %26lt; activeChords.length; i++) {

%26amp;n bsp;

?var myFunction:Function = function(item:Object, index:int, vector:Vector.%26lt;Object%26gt;):void {

%26amp;n bsp;

?if (item.title == activeChords[i]) {

var dirPath = chordLibPath_SM + chordGenrePath + item.imagePath + ''.jpg'';

dpChords.addItem({ source:new ChordUnit(dirPath), data:i, scaleContent:true });

?}

};

chords.forEach(myFunction, null);

}

chordBin.dataProvider = dpChords;

...

chordBin.addEventListener(ListEvent.ITEM_ROLL_OVER, chordBinItemOVER);

%26amp;n bsp; chordBin.addEventListener(ListEvent.ITEM_ROLL_OUT, chordBinItemOUT);

%26amp;n bsp; chordBin.addEventListener(ListEvent.ITEM_CLICK, chordBinItemCLICK);

...

private function chordBinItemOVER(e:ListEvent):void {

%26amp;n bsp;

}

private function chordBinItemOUT(e:ListEvent):void {

}

private function chordBinItemCLICK(e:ListEvent):void {

%26amp;n bsp;

trace (e.rowIndex + '' : '' + e.columnIndex + '' :: '' + e.item + '' :: '' + e.index);

%26amp;n bsp;

var obj = dpChords.getItemAt(e.index);

trace (obj);

obj.visible = false;

obj.testFunc();

}

Manipulating Object in a TileList

You need to work with the ICellRenderer associated with the data provider item.

private function chordBinItemCLICK(e:ListEvent):void {
trace (e.rowIndex + '' : '' + e.columnIndex + '' :: '' + e.item + '' :: '' + e.index);
var obj = dpChords.getItemAt(e.index);

var renderer:ICellRenderer = e.currentTarget.itemToCellRenderer(obj);

// Note: the ICellRenderer is a UIComponent

// cast it as an Object so we can use known properties/vars
var uiObj:Object = renderer as Object;
uiObj.visible = false;
uiObj.testFunc();
}

Manipulating Object in a TileList

Yes, this mostly works!?This allows me to affect the properties of the object (such as visibility), yet I am still not able to access any function methods on the associated class:

private function chordBinItemCLICK(e:ListEvent):void {

trace (e.rowIndex + '' : '' + e.columnIndex + '' :: '' + e.item + '' :: '' + e.index);

var obj = dpChords.getItemAt(e.index);

var renderer:ICellRenderer = e.currentTarget.itemToCellRenderer(obj);

// Note: the ICellRenderer is a UIComponent

// cast it as an Object so we can use known properties/vars

var uiObj:Object = renderer as Object;

uiObj.visible = false;

uiObj.testFunc();

}

The error indicates that itemToCellRenderer(obj) is returning a MyTileListRenderer instance, not a CellUnit. Where is the CellUnit instance created?

The CellUnit instance (and there are several) is created within the document class ''ChordLib.as'', which also contains the code above.

Here is the function that creates the instances of CellUnit:

// SET CHORD BIN?//////////////////////////////////////////

?public function setChordBinSong(song:int, extend:Boolean):void {

?dpChords = new DataProvider();

?// determine chord set

?if (extend == true) {

?} else if (song == -1) {

? //activeChords = chordTitles;

?} else {

? activeChords = songChordSets[song];

?}

?// fill dataProvider

?for (var i=0; i %26lt; activeChords.length; i++) {

? var myFunction:Function = function(item:Object, index:int, vector:Vector.%26lt;Object%26gt;):void {

?if (item.title == activeChords[i]) {

?var dirPath = chordLibPath_SM + chordGenrePath + item.imagePath + ''.jpg'';

?dpChords.addItem({ source:new ChordUnit(dirPath), data:i, scaleContent:true }); // *** ** *

}

};

chords.forEach(myFunction, null);

}

chordBin.dataProvider = dpChords;

chordBin.columnWidth = 78;

chordBin.rowHeight?= 110;

chordBin.direction = ScrollBarDirection.HORIZONTAL;

chordBin.setStyle(''contentPadding'', 5); ?// **

chordBin.setRendererStyle(''imagePadding'', 0); // **

chordBin.scrollPolicy?= ScrollPolicy.ON;

// set style for labels

chordBin.setRendererStyle(''textFormat'', textFormat2);

// set the background skin

chordBin.setStyle(''skin'', lightBackground);

//set the cell renderer

chordBin.setStyle(''cellRenderer'', MyTileListRenderer);

//chordBin.addEventListener(Event.CHANGE, selectChordBin);

chordBin.addEventListener(ListEvent.ITEM_ROLL_OVER, chordBinItemOVER);

chordBin.addEventListener(ListEvent.ITEM_ROLL_OUT, chordBinItemOUT);

chordBin.addEventListener(ListEvent.ITEM_CLICK, chordBinItemCLICK);

}

There is also a ''MyTileListRenderer'' class that is referred to above:

chordBin.setStyle(''cellRenderer'', MyTileListRenderer);

Yes - although I made an attempt to unify these two classes (and the ''MyTileListRenderer'' is necessary for some styling of the TileList Cell) -- the two Classes appear to need to remain separate (but perhaps there is a way?)

CellUnit needs to associate to the MovieClip in the librart, as well as receive a 1 parameter:

public function ChordUnit(dirPath:String):void {

How about using the render's source property?

private function chordBinItemCLICK(e:ListEvent):void {

// ...

var renderer:MyTileListRenderer= dpChords.itemToCellRenderer(e.item) as MyTileListRenderer;

trace(renderer.source)

// ...

}

hmmm, an interesting approach.?I installed it like this:

private function chordBinItemCLICK(e:ListEvent):void {

trace (e.rowIndex + '' : '' + e.columnIndex + '' :: '' + e.item + '' :: '' + e.index);

var obj = dpChords.getItemAt(e.index);

var renderer:MyTileListRenderer= dpChords.itemToCellRenderer(e.item) as MyTileListRenderer;

trace(renderer.source)

// Note: the ICellRenderer is a UIComponent

// cast it as an Object so we can use known properties/vars

var uiObj:Object = renderer as Object;

uiObj.alpha = 0.5;

uiObj.testFunc();

}



Oops! My mistake. That should obviously be e.currentTarget.itemToCellRenderer

Ah, yes - that works!?It calls the testFunc() inside CellUnit:

private function chordBinItemCLICK(e:ListEvent):void {

var renderer:MyTileListRenderer = e.currentTarget.itemToCellRenderer(e.item) as MyTileListRenderer;

renderer.source.testFunc();

}

No comments:

Post a Comment