Flex: Tree-Komponente mit unterschiedlichen ItemRenderern

Da die Tree-Komponente nur eine Instanz eines ItemRenderers intern zur Darstellung der Daten verwendet, muss dieser Renderer das Aussehen aller Baumelemente beinhalten. Dies kann dazu führen, dass der ItemRenderer sehr viel Code enthält, wenn für Verzweigungen und Blätter des Trees verschiedene Funktionalitäten und Aussehen gewünscht sind. Um dies zu vermeiden, habe ich die Tree-Komponente so erweitert, dass für jedes Baumelement ein anderer ItemRenderer verwendet werden kann.

package {
import mx.controls.Tree;
import mx.core.IFactory;

/**
 * Adds support for multiple itemRenderer.
 * The default implementation of the tree supports only one type of renderer for all items.
 */
public class ExtendedTree extends Tree {

    /**
     * This method is used to retrieve a factory which creates an itemRenderer for an object.
     * The signature of the function should look like: "myCustomFunction(data:Object):IFactory"
     */
    public var resolveItemRendererFunction:Function;

    /**
     * @inheritDoc
     */
    override public function getItemRendererFactory(data:Object):IFactory {
        if (resolveItemRendererFunction != null) {
            return resolveItemRendererFunction(data);
        } else {
            return super.getItemRendererFactory(data);
        }
    }
}
}

Hier sieht man den Unterschied zwischen der erweiterte Komponente (links), welche zwei verschiedene ItemRenderer verwendet, und der normalen Tree-Komponente (rechts):

Tree-Komponente

Das Beispiel aus den Screenshoots kann hier heruntergeladen werden.

This entry was posted in Actionscript, Flex and tagged , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>