Select to view content in your preferred language

Save UIComponent to a file (jpg)

2221
17
05-12-2011 05:05 AM
AshleyOwens
Emerging Contributor
I am attempting to save a UIComponent that includes a title, subtitle, map and textarea to a file in jpg format. Can anyone provide a simple example of this?  Thank you!
Tags (2)
0 Kudos
17 Replies
AshleyOwens
Emerging Contributor
Thank you! It works! 😄 For some reason though, the map that is saved is backwards. Have you seen this before?
0 Kudos
ReneRubalcava
Honored Contributor
That was a weird one.
It happened to me while testing, but if I waited for the addedToStage event, then add the image, it worked fine. That shouldn't happen if you wait for the creationComplete event, then view it.
0 Kudos
AshleyOwens
Emerging Contributor
Can you explain more about how to
- wait for the addedToStage event, then add the image, or
- wait for the creationComplete event, then view it

(sorry, I'm still really new with Flex!)
0 Kudos
ReneRubalcava
Honored Contributor
Sure. The image data doesn't seem to like being added to the printBox until after the printBox is added to the stage.
I updated the code sample in the link to reflect this.

// I commented out this line of code
// where printImg is created
//printBox.addElement(printImg);

// I added this listener
printBox.addEventListener(Event.ADDED_TO_STAGE, function(e:Event):void {
 trace("added to stage");
 printBox.addElement(printImg);
});


Now, the image should display and save correctly.
I have to admit, I don't know why the image displays backwards if it's added to the component before the component is added to the stage.

AddedToStage fires as soon as the component comes on screen (not necessarily viewable), but before it's done being rendered. CreationComplete should fire when the component is fully rendered and ready to be viewed.

I can't seem to find a Component Lifecycle reference online directly from Adobe, but here are some slides
http://www.flex888.com/1219/flex-4-components-life-cycle.html

Here is a diagram of the UIComponent lifecycle (I have this printed and tacked to my office wall)
http://danorlando.com/?p=122
Spark skins have a few more things that happen to manage skinning
http://help.adobe.com/en_US/flex/using/WS460ee381960520ad-2811830c121e9107ecb-7fff.html#WS460ee38196...

And I know there are quite a few god Flex books that should include a more detailed description of the lifecycle process of what happens when you create a component.

You don't usually need to worry about waiting for most of these events anymore, maybe creationComplete if you are modifying an MXML component. Flex 4 and Skinnning have made build components much easier than it used to be.

This is just an odd case because we are using a component as a reference to generate an image, so there are considerations that need to be made about when that component is actually fully rendered and ready to be captured.

Hope that helps.
0 Kudos
AshleyOwens
Emerging Contributor
You are a WEALTH of knowledge!  Thank you so much for all your help!  I am still working through some kinks, but overall it is working well and I am SO MUCH FARTHER along than I was. Thanks again!
0 Kudos
AshleyOwens
Emerging Contributor
Do you know if there's a way to save a file without doing a "preview" first? I tried adding
var fr:FileReference = new FileReference();    
fr.save(printData, "TIGER.png");
several different places and I can't get it to work. One thing I tried was creating a handler for addedToStage and included the above code, but the function was only called when the widget first loaded.
Just wondering if it was possible to execute the "preview" code, then prompt the user to save to a file immediately.  It seems there needs to be a pause in between "preview" and "save".
Thanks again for your help!
0 Kudos
AshleyOwens
Emerging Contributor
Also, is there a way to save a multi-page file? I have a title, subtitle & comments above my map, which causes my map to run off the page.
0 Kudos
ReneRubalcava
Honored Contributor
If it weren't for the mirror image issue, you could. Unfortuntely, I don't know how to get around that without first doing the preview because the Flash player has built in security that will not allow you to save a file without some sort of user interaction such as a button click. You can't do it off a timer or another other event. I have not tried to simulate a button click, but I don't think that would work.

If you want to look into a multi-page option, maybe PDF would be a better solution.
http://code.google.com/p/alivepdf/
AlivePDF is an actionscript library to save PDF files directly from Flash. It's very popular among many users on this forum and the process is similar to the way you are saving an image.
0 Kudos