[AS3] Yahoo! ASTRA - Tree Component

[SirDuke]

Has anyone worked with the "Tree Component" by Yahoo! ASTRA here?

I'd like to make 2 minor changes to the TreeCellRenderer class:
- change the font size according to the depth of the node
- make the font bold when the node is mousedOver

I can't seem to find something inside the class though as i think it inherits the styles from the labelButton class. Will i have to modify something else? Has anyone had any experience with customizing that component before?

Thanks

[SirDuke]

bump.. and:

if someone knows of any tutorial or anything else on how to change a CellRenderer function i'd really appreciate the insight.

Thanx

[allenrabinovich]

The TextField in the TreeCellRenderer is controlled by the textFormat style of the renderer itself.

Try adding the following line in the set listData function in TreeCellRenderer.as (make sure to add the path containing com/yahoo... to your classpath so that the modified TreeCellRenderer overrides the embedded code. Alternatively, you can create a new custom CellRenderer class and use that instead of the TreeCellRenderer):

setStyle("textFormat", new TextFormat("Arial", 8 + 2*data.nodeLevel));

That would make the size of the font bigger the deeper the node is in the hierarchy ("data" is the pointer to the TNode object; it has a nodeLevel property).

You can also add a custom event listener for roll over and roll out to change the style of the text to bold. You don't even need to do that inside the TreeCellRenderer. Say your tree is called "mytree". Then, the following code will do it:

import fl.events.ListEvent;
import com.yahoo.astra.fl.controls.treeClasses.*;

// Add listener functions for rolling over and out of tree items
mytree.addEventListener(ListEvent.ITEM_ROLL_OVER, rollOverItem);
mytree.addEventListener(ListEvent.ITEM_ROLL_OUT, rollOutItem);

function rollOverItem (evt:ListEvent) {
// Get the cell renderer for the item we just rolled over
var cr:TreeCellRenderer = mytree.itemToCellRenderer(evt.item) as TreeCellRenderer;
// Get the text format for that cell renderer
var tf:TextFormat = cr.getStyle("textFormat") as TextFormat;
// Set its bold value to true
tf.bold = true;
}

// Same thing as above but set bold to false
function rollOutItem (evt:ListEvent) {
var cr:TreeCellRenderer = mytree.itemToCellRenderer(evt.item) as TreeCellRenderer;
var tf:TextFormat = cr.getStyle("textFormat") as TextFormat;
    tf.bold = false;
}

Best,
Allen

[SirDuke]

WOW.

Allen that is the best first post i have ever seen. It all worked fine. Not only that but it also gives me great ideas on how to implement some other things too.

Thanx alot, i was really stuck there

[allenrabinovich]

Originally Posted by SirDuke

WOW.

Allen that is the best first post i have ever seen. It all worked fine. Not only that but it also gives me great ideas on how to implement some other things too.

Thanx alot, i was really stuck there

Well, in the interest of full disclosure, I wrote the Tree component

[SirDuke]

Well, i kind of imagined that to be honest :P

Good job

[alan247]

Hi, have just read your posts, but I’m new to flash and the Astra Tree component, and was wondering if you could please help me.
How do I override the TreeCellRenderer class of the Astra Tree Component as I want to change the font name and size.
If you could explain in simple terms that would be a great help.
Thanks for your time.
Alan.

[Heath Carlisle]

Originally Posted by allenrabinovich

The TextField in the TreeCellRenderer is controlled by the textFormat style of the renderer itself... Alternatively, you can create a new custom CellRenderer class and use that instead of the TreeCellRenderer

Best,
Allen

Super! Hey, Any details on building a customized renderer? Specifically, I am trying to allow the text field that contains the "label" text to autoSize and wrap - but these are properties of the TextField class, and, digging all the way down to ICellRenderer, I can't find where the TextFields are instantiated.

I'd like to build a freely collapsible/expandable "Outliner" (1, 1.1, 1.1.1, 2, 2.2, 2.3.4 etc..) whose vertical field sizes will auto adjust to the contained text paragraph, and whose horizontal width is fixed to allow for additional data representation.

thanks, nice work!

-h

[ven]

import fl.events.ListEvent;
import com.yahoo.astra.fl.controls.treeClasses.*;

// Add listener functions for rolling over and out of tree items
mytree.addEventListener(ListEvent.ITEM_ROLL_OVER, rollOverItem);
mytree.addEventListener(ListEvent.ITEM_ROLL_OUT, rollOutItem);

function rollOverItem (evt:ListEvent) {
// Get the cell renderer for the item we just rolled over
var cr:TreeCellRenderer = mytree.itemToCellRenderer(evt.item) as TreeCellRenderer;
// Get the text format for that cell renderer
var tf:TextFormat = cr.getStyle("textFormat") as TextFormat;
// Set its bold value to true
tf.bold = true;
}

// Same thing as above but set bold to false
function rollOutItem (evt:ListEvent) {
var cr:TreeCellRenderer = mytree.itemToCellRenderer(evt.item) as TreeCellRenderer;
var tf:TextFormat = cr.getStyle("textFormat") as TextFormat;
    tf.bold = false;
}

This doesnt work for me, and i find it weird because tf returns null. Has there been a change in the code lately?

I just want to change the font in the tree, like

mytree.setStyle("textFormat", "Arial");

or

var cr:TreeCellRenderer = mytree.itemToCellRenderer(evt.item) as TreeCellRenderer;
cr.setStyle("textFormat", new MyFont().fontName);

or

var cr:TreeCellRenderer = mytree.itemToCellRenderer(evt.item) as TreeCellRenderer;
var tf:TextFormat = cr.getStyle("textFormat") as TextFormat;
tf.font = "Verdana";

but nothing seems to work...

[ven]

Figured it out:

var myTextFormat:TextFormat = new TextFormat();
myTextFormat.font = new MyFont().fontName; // Font exported from library

myTree.setRendererStyle("textFormat", myTextFormat);