Flex 4 lifecycle and drawing stuff manually

Question

I have a component which inherrits Group. I made a property called dataSource:ArrayList. I wish to draw a Line for each of the entries.

When the 'function set dataSource' -method is invoked I do the following (simplified):

        var newLine:Line = new Line();     
        newLine.stroke = new SolidColorStroke();
        newLine.xFrom = 0;
        newLine.yFrom = 0;
        newLine.xTo = 0;
        newLine.yTo = height;
        this.addElement(newLine);

The line doesn't stretch itself to the very bottom of the parent. I'm guessing I'm messing up life cycle, but I'm not finding flex life cycle particular easy to understand, so I'm not sure how to go about this.

Answer 1

I agree with you, it probably has to do with the component not being properly measured yet when you create your lines. You could try overriding updateDisplayList and setting the height of the lines you created to be the height parameter supplied to the updateDisplayList method. Don't create the lines in updateDisplayList since it can get called multiple times during the component life cycle. Regarding the life cycle in general, here's a link to a chart I've found helpful in the past: http://danorlando.com/?p=122 Hope that helps.

Answer 2

If you don't want to interact with the line as an object on the display list, I'd simply draw it in updateDisplayList() using the Graphics api, and call invalidateDisplayList() from set dataSource()

The "right" way is slightly more verbose ;-)

private var dataSourceValid = true;

public function set dataSource(value:FooData):void {
    _dataSource = foo;
    dataSourceValid = false;
    invalidateProperties();
}

override protected function commitProperties():void {

    if (!dataSourceValid)
        commitDataSource();

    // Do it later in case we've invalidated something 
    // belonging to Flex while validating our stuff
    super.commitProperties();
}

protected function commitDataSource():void {

    // Do whatever we need to with our datasource, 
    // including adding or removing child elements.

    // ...

    // If we also need to re-draw something, then
    // invalidateDisplayList();

    dataSourceValid = true;
}

(All code typed in TextMate, so it's probably full of spelling errors and doesn't compile, but you get the idea)

Answer 3

It isn't entirely clear what you're looking to do, but by putting a dataSource property on Group it appears as if you're trying to re-invent DataGroup. Perhaps you should consider just using the latter instead, along with a custom ItemRenderer within which you could draw a line?