Flex Serialization for inbuilt components like...HBox, VBox, Panel, Canvas, DataGrid...

Question

Here is the problem...I'm working on a flex application(actionscript)...

I have a Panel in my application which contains 2 buttons and 3 canvas components at certain posstions...now I want to store the current state of panel in some file or database...and afterwards I want to load the same panel again in my application when I come back and run the application...

so I tried to convert whole panel into ByteArray object using its readObject() and writeObject() methods...but when I read the ByteArray and add the panel in my application using addChild() method it doesn't add anything and there was no error or fault...

writeObject creates ByteArray that I am able to print but when i get it back and add child, I am not able to get the panel and it's children...

if anyone can help...it would be appreciated...thanks in advance...

Here is the example code...explaining what i want to do...

<mx:Script>
    <![CDATA[
        import mx.controls.Alert;
        import mx.rpc.events.ResultEvent;
        import mx.collections.ArrayCollection;

    [Bindable] private var photoFeed:ArrayCollection;

    var buffer:ByteArray;

    private function init():void{

        addEventListener(KeyboardEvent.KEY_DOWN, keyHandler);
        searchTerms.setFocus();
        buffer = new ByteArray();
    }

    private function keyHandler(event:KeyboardEvent):void{
        if(event.charCode == 13){

                    myButton.label = "Exit";

            try{
                buffer.writeObject(myData);

            }catch(error:Error){
                Alert.show(error.toString(),"Encoding Error");
            }

            removeChild(myData);
            reloadButton.visible = true;
            Alert.show("HBox is deleted","Alert");
        }
    }

    private function reloadHBox():void{

        Alert.show("Trying to load Hbox","Alert"); 
        try{
            buffer.position = 0;
            var obj:HBox = buffer.readObject() as HBox;

        }catch(error:Error){
            Alert.show(error.toString(),"Decoding Error");
        }

        addChild(obj);

        Alert.show("Hbox is reloaded","Alert"); 
    }

    ]]>
</mx:Script>

<mx:Button id="reloadButton" label="Reload HBox" visible="false" click="reloadHBox()"/>

<mx:HBox width="100%" id="myData">
    <mx:Label text="Hi Rashmin here..."/>
    <mx:TextInput id="searchTerms" name="searchTerms" text="Hello How are you?"/>
    <mx:Button id="myButton" label="Enter"/>
</mx:HBox>

I want to regenerate the HBox so need some help...

Answer 1

Creative idea, but I'm not surprised it doesn't work. Can you share some code?

That said, I'd just write up an algorithm to save the state (x, y coordinates / height width etc... ) and reset that info when you load it.

Answer 2

You could create an object that stores your panel position

 private var positions:Object;
 positions = { panel1Position: new Point( panel1X , panel1Y)
                          //etc.... };

Set some default values to start with and your components would get their positions from your positions object.

  private function init():void
  {
     panel1.x = positions.panel1Position.x;
     //etc...
  }

To save your values, use a SharedObject

 var objectName:String = "Put some identifier here";
 var sharedObject:SharedObject = SharedObject.getLocal( objectName , '/' );
 sharedObject.data.positions = positions;

To retrieve your values, you just need

 var sharedObject = SharedObject.getLocal( "the identifier you've set above" , '/' );
 positions = sharedObject.data.positions;

You can then update your components x & y values. Anyway, this is the general idea, for more info check the SharedObject class:

http://www.adobe.com/livedocs/flash/9.0/ActionScriptLangRefV3/

You can apply the same principle with your panel states, if you can identify each state with an integer for instance, save the state integer in your sharedObject.