PDA

View Full Version : [AS3] Change text color on roll over - datagrid


Mistermind
05-26-2009, 08:12 PM
Hello there!
I'm new here and just as many of you I'm migrating from AS2 to AS3. So far I had absolutely no issues with the migration due to the fantastic easy to understand tutorials and posts in this forum. That until I found my nemesis: as3 components :o

Well here is the deal:
I'm trying to make a datagrid that will display a list of online players in a game. This list have to have their names in different colors (gold and white).
Upon mouse roll over they go on a "light green" color (JUST the text) and return to their regular state on mouse out.
It used to be easy on AS2 since I had access to specific tutorials about that, but now on AS3 I feel completely lost.
I've managed to get the text colors by a code I found that sorta "cheats" by replacing an inhibit class inside the datagrid forcing it to accept html code. This is what I've got so far (the code has been simplified for better understanding):

MultiLineHtmlCell.as
package {


import fl.controls.listClasses.CellRenderer;

public class MultiLineHtmlCell extends CellRenderer {


public function MultiLineHtmlCell() {
textField.wordWrap = true;
textField.autoSize = "left";

}

override protected function drawLayout():void {
textField.width = this.width;
textField.htmlText = textField.text;
super.drawLayout();
}
}
}

testBox.fla

import fl.events.ListEvent;
import fl.controls.dataGridClasses.DataGridColumn;
import fl.data.DataProvider;

var columnA: DataGridColumn = new DataGridColumn("name");
columnA.headerText = "Player's name";
columnA.cellRenderer = MultiLineHtmlCell;
columnA.labelFunction = nameLabelFunction;
playerList.addColumn(columnA);
var columnB: DataGridColumn = new DataGridColumn("level");
columnB.headerText = "Level";
columnB.sortOptions = Array.NUMERIC;
playerList.addColumn(columnB);

var arrDP:Array = new Array();
arrDP.push({name:"Mistermind", level:3, accType:"advanced"});
arrDP.push({name:"Calico", level:6, accType:"advanced"});
arrDP.push({name:"Andre", level:1, accType:"beginner"});

var dp:DataProvider = new DataProvider(arrDP);

function nameLabelFunction(item:Object):String {
if (item.accType == "advanced"){
return "<font color='#FF9900'>" + item.name + "</font>";
}else{
return "<font color='#FFFFFF'>" + item.name + "</font>";
}
}

playerList.dataProvider = dp;


playerList is a datagrid that is already in the stage. The code above shows the use of html code to make different colored texts on each row upon creation. What I want is, along with that, create a way to change its color on roll over:

playerList.addEventListener(ListEvent.ITEM_ROLL_OV ER, gridItemOver);

Is it possible? Should I use that event listener?

Cheers!

Mistermind
05-29-2009, 12:43 AM
Hey guys, did anyone notice that there is no longer the "rows" property on the datagrid component for AS3?

function gridItemOver(e:ListEvent):void {
e.target.rows[e.rowIndex].cells[0].setColor("0x00CCCC");
}
playerList.addEventListener(ListEvent.ITEM_ROLL_OV ER, gridItemOver);

Apparently there is only the "columns" property now. What surprised me the most is that I could not find a single comment about this issue anywhere on the web lol.