Question

What is the best way to render to a UIComponent which hasn’t been added to the stage? (I’m using UIComponents as renderers for objects, and want to render new copies for image export, filtering, etc.)

Two strategies I’ve seen/used so far include realizing the component to ensure it calls all the lifecycle methods:

1. Add the component to Application.application, render with BitmapData.draw(), remove component. This is similar to what I’ve seen done for printing unrealized components as well.

2. Add the component to a pop up window, render with BitmapData.draw(), dismiss popup after rendering complete.

I believe both of these just rely on the UI not refreshing while the current thread/event is executing, though (1) could also rely on the component being realized out of view.

Is there a better way?

Answer 1

What I’ve used in the past with much success is the following:

1. Create a new instance of your component
2. Add an event listener for FlexEvent.CREATION_COMPLETE
3. Set visible=false on the component
4. Add the component as a child of the main Application
5. When the component is created, the event listener function will be invoked. The rest of the logic should be put in / invoked from your event listener function
6. Remove the event listener you added in step #2.
7. Use ImageSnapshot.captureImage() or captureBitmapData() to capture the visual representation of the component.
8. Remove the component from the main Application
9. Process the image data as you need to.

I’ve used this to snapshot various Flex charting components for use in PDF’s generated on the server side. After getting the BitmapData I use the PNGEncoder or JPEGEncoder classes to compress the data, then encode it in Base64 before uploading to the server.