Flex: Converting your views into ByteArray

Probably they are times where you need to send image captures of the views in the Flex Application to one of your servers but how do you do that? As for this week, I am going to show you how to convert all your views into ByteArray before you convert them into base64 strings and send it to the server.

The following would be the source code for my demo.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    creationComplete="creationCompleteHandler(event)" 
    width="100%" height="100%">
 <mx:Script>
  <![CDATA[
   import mx.events.FlexEvent;
   //Need to import this class for capturing the view
   import mx.graphics.ImageSnapshot;
   
   //Array to stroe the data for the data grid
   private var arr:Array = new Array();
   private var arr1:Array = new Array();
   
   //Array to store data for the combobox
   private var arr_Content:Array = new Array();
   
   //ByteArray to store the captured image
   private var resultArray:ByteArray;
   
   //Upon clicking on the 'Main' button, 
   //change to the original state
   protected function btnMain_clickHandler(event:MouseEvent):void
   {
    this.currentState = "";
   }
   
   //Upon clicking on the 'Result' button, 
   //change to the 'result' view with the result Image
   protected function btnResult_clickHandler(event:MouseEvent):void
   {
    this.currentState = "result";
   }
   
   //Upon clicking on the 'Capture Now!' button, 
   //Capture the current look and feel of the selected item
   //in the combo box
   protected function btnCapture_clickHandler(event:MouseEvent):void
   {
    updateResult();
    this.currentState = "result";
   }
   
   //Function that create the ByteArray based on the selected item
   //in the combobox
   private function updateResult():void
   {
    resultArray = null;
    var imageSnap:ImageSnapshot = ImageSnapshot.captureImage(
     cmbViewName.selectedItem.data);
    resultArray = imageSnap.data as ByteArray;
   }
   
   //Upon creationComplete, let us populate the views with data
   protected function creationCompleteHandler(event:FlexEvent):void
   {
    var tempObj:Object;
    for(var i:int = 0; i < 8; i ++)
    {
     tempObj = new Object();
     for(var j:int = 0; j < 3; j ++)
     {
      tempObj["col" + (j+1)] = "Row " + (i + 1) 
       + " Col " + (j + 1); 
     }
     arr.push(tempObj);
    }
    dataGrid.dataProvider = arr;
    
    for(var i = 0; i < 20; i ++)
    {
     tempObj = new Object();
     for(var j = 0; j < 5; j ++)
     {
      tempObj["col" + (j+1)] = "Row " + (i + 1) 
       + " Col " + (j + 1); 
     }
     arr1.push(tempObj);
    }
    dataGrid1.dataProvider = arr1;
    
    this.validateNow();
    tempObj = new Object();
    tempObj.label = "Main Application";
    tempObj.data = viewAll;
    arr_Content.push(tempObj);
    tempObj = new Object();
    tempObj.label = "Top Panel";
    tempObj.data = viewBtnsPanel;
    arr_Content.push(tempObj);
    tempObj = new Object();
    tempObj.label = "Contents";
    tempObj.data = viewContent;
    arr_Content.push(tempObj);
    tempObj = new Object();
    tempObj.label = "1st Data Grid";
    tempObj.data = dataGrid;
    arr_Content.push(tempObj);
    tempObj = new Object();
    tempObj.label = "2nd Data Grid";
    tempObj.data = dataGrid1;
    arr_Content.push(tempObj);
    
    cmbViewName.dataProvider = arr_Content;
    this.validateNow();
    updateResult();
   }
   
   //Upon moving into the 'result' state, update the source 
   //of the image
   protected function state1_enterStateHandler(event:FlexEvent):void
   {
    // TODO Auto-generated method stub
    imgResult.source = resultArray;
   }
   
  ]]>
 </mx:Script> 
 <mx:states>
  <mx:State name="result" enterState="state1_enterStateHandler(event)">
   <mx:RemoveChild target="{cmbViewName}"/>
   <mx:RemoveChild target="{btnCapture}"/>
   <mx:RemoveChild target="{dataGrid}"/>
   <mx:RemoveChild target="{dataGrid1}"/>
   <mx:AddChild position="lastChild" relativeTo="{viewContent}">
    <mx:Image id="imgResult" width="100%" height="100%"
        scaleContent="false"/>
   </mx:AddChild>
  </mx:State>
 </mx:states>
 <mx:VBox width="100%" height="100%" verticalGap="10"
    left="10" right="10" top="10" bottom="10"
    id="viewAll">
  <mx:HBox width="100%" id="viewBtnsPanel">
   <mx:Button id="btnMain" label="Main" 
        click="btnMain_clickHandler(event)"/>
   <mx:Button id="btnResult" label="Result" 
        click="btnResult_clickHandler(event)"/>
   <mx:Spacer width="100%"/>
   <mx:ComboBox id="cmbViewName"/>
   <mx:Button id="btnCapture" label="Capture Now!" 
        click="btnCapture_clickHandler(event)"/>
  </mx:HBox>
  <mx:VBox id="viewContent" width="100%" height="100%" 
     verticalGap="10">
   <mx:DataGrid id="dataGrid" width="100%"/>
   <mx:DataGrid id="dataGrid1" width="100%" height="100%"/>
  </mx:VBox>
 </mx:VBox>
</mx:Application>

* Click here to view the demo of this example.
^ Click here for the source files of this demo.