Which event to use to draw a grid inside a Flex UI Component

Question

I am in need to provide a Snap To Grid functionality inside a BorderContainer. All the functionality is done but I am stuck with one issue which is drawing the grid.

1. Tried using the Creation_Complete event, works fine but as soon as a child is added, the grid vanishes.

2. Overrode the updateDisplayList - This was the best option so far (everything works fine), but the issue is whenever I move (or rather when moving) a control inside (I use ObjectHandles library) the updateDisplayList method is called which redraws the grid -> makes the moving process VERY laggy.

This is how I fill the grid.

numRows = Math.ceil(this.unscaledHeight/gridSize);
numCols = Math.ceil(this.unscaledWidth/gridSize);

this.graphics.beginFill(0x000000, 1.0);

for (var i:int= 0; i < numRows; i++)
{               
    for (var j:int = 0; j < numCols; j++)
    {       

        this.graphics.drawCircle(j * gridSize, i * gridSize, 1);
    }
}

this.graphics.endFill();

I only want to draw it once, and draw it only when the container is resized. Is there any event that will help me achieve this? Or is there any efficient method of that will help me draw a grid? Any comments and suggestions are welcome. Thanx a lot in advance :)

Answer 1

updateDisplayList() is the method which has unscaledWidth and unscaledHeight as parameters.

So you can avoid unnecessary redrawing the following way:

private var previousUnscaledWidth:Number;
private var previousUnscaledHeight:Number;

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
    …
    if (unscaledWidth != previousUnscaledWidth || unscaledHeight != previousUnscaledHeight)
    {
        // Your drawing routine here

        previousUnscaledWidth = unscaledWidth;
        previousUnscaledHeight = unscaledHeight;
    }
}

You can place this code inside your custom ActionScript component which has UIComponent as base class. And place this grid inside BorderContainer:

<s:BorderContainer>
    <MyGrig left="0" right="0" top="0" bottom="0" />
    <!-- Another container's content here -->
</s:BorderContainer>