Take the 2-minute tour ×

In flex builder 4.5 i'm working on a project like cacoo. I want to save diagrams(display object,ui components,text) before close the application into somewhere than I would be able to access after the application open again.

more clear:-If user edit some uml diagram on this project and save it for edit later and close application.after some days he/she want to edit previously saved diagram. now how i'm save this diagram for future edit.

share|improve this question
What you are using Flex or adobe AIR. –  Raja Jaganathan Jan 3 '13 at 9:08
thanks for ur assist,i'm using Flex 4.5 web application not AIR –  Dev Jan 3 '13 at 9:33
Please use a meaningfull title for your question; something other than the name of the IDE you use. Other than that, what exactly do you mean by "save diagrams"? Save a picture? Save the state of your application? Or just a part of it? ... Please be more precise. –  RIAstar Jan 3 '13 at 9:56

3 Answers 3

up vote 1 down vote accepted

If save/open dialog will work for you, you can yse FileReference API. Before doing this, you have to implement serialization/deserialization of your state into/from String/ByteArray/XML object.

private var fileReference:FileReference;

// due to security restrictions, this method must be called from an
// event handler that responds to a user event (mouse click or key
// press), otherwise it will fail.

private function saveState(serializedState:*, fileName:String):void {
    fileReference = new FileReference();

    fileReference.addEventListener(Event.COMPLETE, onSaved);
    fileReference.addEventListener(IOErrorEvent.IO_ERROR, onSavingError);

    try {
        fileReference.save(serializedState, fileName); // will open save dialog
    } catch (e:Error) {
        trace("error saving data: " + e.toString());

private function onSaved(e:Event):void {

private function onSavingError(e:ErrorEvent):void {

private function freeListeners():void {
    fileReference.removeEventListener(Event.COMPLETE, onSaved);
    fileReference.removeEventListener(IOErrorEvent.IO_ERROR, onSavingError);

Similarly with restoring the state (use FileReference.browse(), then FileReference.load()).

If you need to save/restore app state without any dialogs, then you should probably use AIR (or SharedObject, as Raja Jaganathan suggested). But it seems to be not the case, as you want the user to be able to re-open the diagram in another system. To achieve this, you should allow the user to save his work to the appropriate place, so later he can move it to another machine/system and re-open it with your application.

Another alternative is to store everything on the server and provide the user with a list of saved files (like Cacoo does). If you go this way, you'll have to implement the corresponding server-side API. It may be REST API or smth like RTMP server. In the case of REST API, use FileReference.upload() to upload the data to your server, and URLLoader.load() to obtain it back.

share|improve this answer
i'm using flex 4.6 web application. so AIR will not be used. –  Dev Feb 12 '13 at 11:08
@raja was correct but in case UIComponent decedents i'm not able to copy these type of objects. –  Dev Feb 12 '13 at 11:10
Sure. But you can copy the state, not actual objects that represent this state. For example, you can save positions/labels of your diagram components, and then re-create corresponding Flex objects. –  sam.kozin Feb 12 '13 at 11:13
Moreover, this is the only correct way of saving UML diargam when you want to edit it later. Save the state, not it's representation. –  sam.kozin Feb 12 '13 at 11:16
how we create corresponding objects.i'm get objects in base class Object form. –  Dev Feb 12 '13 at 11:16

You can store your diagram state through SharedObject for better you create one class which hold all of your state of Diagram so that later you can use

SharedObject using http://livedocs.adobe.com/flex/3/html/help.html?content=lsos_5.html

you can use registerClassAlias for custom class stored in sharedobject.

myClassInstance = new MyClass();
myClassInstance.x = 100;
myClassInstance.y = 100;
myClassInstance.text = "diagrams";

registerClassAlias("com.path.to.MyClass", MyClass);
myStuff = SharedObject.getLocal("myAppStuff");
myStuff.data.whatINamedIt = myClassInstance;

now when get it back out... you can say:

myStuff = SharedObject.getLocal("myAppStuff");
var mySavedClass:MyClass = myStuff.data.whatINamedIt as MyClass;

Read mySavedClass instance value then inject to your diagram model when open again.

To implement application close event


share|improve this answer
thanks mr.raja, but if user open his/her previously edit diagram in another system then will he/she able to edit the same previous diagram?? –  Dev Jan 3 '13 at 10:49
i think it will not work for different systems. –  Dev Jan 3 '13 at 11:11
For that you need to send to state of Diagram value to server some period of times(like 2 min) then when ever your that user log in again get those information from server then set to your model. –  Raja Jaganathan Jan 3 '13 at 11:12
how to store this value on server?can user able to edit previously edited diagram on different system(computer)? –  Dev Jan 3 '13 at 11:27
Ofcourse it is possible in (any)another system your app running in server right then why worrying about it. Store value via table then get back those value when user loggedin. –  Raja Jaganathan Jan 3 '13 at 11:47

Sprite or MovieClip other DisplayObject objects can not be direct serialized. So you should stored objects information (origin x,y, width, height, color, child info...). using a ByteArray or Array or Dictionary ... and that save to ShareObjects. later roll back from ShareObject and re-create Original Object. MovieClip or Sprite appropriate purpose is container.

Here is my test code.

1. create a Movieclip. purpose is container.

enter image description here

2. draw a rectangle using a graphics. And set the coordinates.

var drawWidth:Number = 500;
var drawHeight:Number = 300;

var rect:MovieClip = new MyRect();
rect.x= 300;
rect.y= 100;

3. Stores the information in the array.

var myRectInformation:Array = new Array();
var bmd:BitmapData = new BitmapData(rect.width, rect.height,true,0);
//is byteArray.
myRectInformation.push(bmd.getPixels(new Rectangle(0,0,bmd.width,bmd.height)));

4. save to SharedObjects, array.

var mySaveData:SharedObject = SharedObject.getLocal("myStorage")
mySaveData.data.myRectInformation = myRectInformation;

5. this is load from SharedObject data stored. and recreate Objects.

var rect:MovieClip = new MyRect();
var loadBmd:BitmapData = new BitmapData(mySaveData.data.myRectInformation[2], mySaveData.data.myRectInformation[3], true, 1);
loadBmd.setPixels(new Rectangle(0,0,loadBmd.width,loadBmd.height), mySaveData.data.myRectInformation[4]);
var bmp:Bitmap = new Bitmap(loadBmd);
rect.x = mySaveData.data.myRectInformation[0];
rect.y = mySaveData.data.myRectInformation[1];
share|improve this answer

Your Answer


