[flexcoders] How do I make sure container's child components have applied new style before ImageSnapshot?

[Ian M. Jones]

Hi,

I'm having a bit of a problem with capturing a snapshot of a VBox's  
contents with a simple colour change applied through a styleName change.

The container layout is something like:

<mx:VBox id="pieChartContainer" width="100%" height="100%"  
horizontalAlign="center">
        <mx:Label id="pieChartTitle"
                text="{currentFilter.sFilterName}"
                fontSize="14"
                fontWeight="bold"
                textDecoration="underline"/>
        <mx:PieChart id="pieChart" width="100%" height="100%"
                showDataTips="true" dataTipFunction="pieChartDataTipFunction"
                resizeEffect="{moveAndResize}">
                <mx:series>
                // Some series, not relevant to problem.
                </mx:series>
        </mx:PieChart>
        <mx:Legend id="pieChartLegend"
                dataProvider="{pieChart}"
                width="100%"
                visible="{chkPieChartLegend.selected}"
                includeInLayout="{chkPieChartLegend.selected}"
                direction="horizontal"
                resizeEffect="{moveAndResize}"/>
</mx:VBox>

Because by default my app has a dark theme with light text applied  
through CSS, before capturing a snapshot, I set the style to:

.forPrint
{
        color: #000000;
}

This means the image should have black text which is good for print etc.

I call saveToFile() to start the capture, only when the referenced pie  
chart is visible.

private function saveToFile():void
{
        pieChartContainer.styleName = "forPrint";
        callLater(saveSnapshotAndResetStyleName, [pieChartContainer]);
        pieChartContainer.validateNow();
}

private function  
saveSnapshotAndResetStyleName(component:UIComponent):void
{
        var dataBytes:ByteArray = byteArrayFromComponent(component); // The  
bit that does all the real work!
        var crossPlatform:ICrossPlatform;

        pieChartContainer.styleName = null;

        crossPlatform = CrossPlatform.getInstance();                            
        crossPlatform.saveByteArrayFile(dataBytes, currentFilter.sFilterName  
+ ".png");
}

The problem is that although the pie chart gets the change in text  
colour before the snapshot is taken, if the Legend control is included  
in the container it still retains it's light label colour.

As you can see from the code above I've tried to delay the capture  
until the refresh happens by using a combination of callLater and  
validateNow, but that doesn't seem to help.

If I comment out the resetting of the container's styleName after the  
snapshot has been taken, the Legend control is shown with the required  
black text, so the change does happen, but not before I take the  
snapshot.

Has anyone got any advice on how to make sure a container and it's  
child controls have applied a new style before using ImageSnapshot?

Thanks in advance for your help,

Ian
________________________________________
IMiJ Software
http://www.imijsoft.com
http://www.ianmjones.net (blog)