1 Reply Latest reply on Jun 26, 2009 10:53 AM by ConsistencyHobgoblin

    Images from SQL Server in Flex DataGrid via SOAP.

    ConsistencyHobgoblin

      I have created a Web Service in C# that delivers thumbnails from SQL Server as byte arrays.  It works.  In C# I can create a client that will display the images using the web service.  I am trying to convert the byte array to a bitmap and use that as the source to a datagrid column with an <mx:Image> in the itemRenderer.  I have tryed several different approaches.

       

      Using the web service and displaying text is straight forward and I have no problem there.  When I try to use the byte array to create bitmap data and use it in a bitmap object as the source for the <mx:Image> the image is blank.  I wonder if this is an encoding or endean issue.  I'm not sure if there is a stream object as in C# that can be used without file I/O.  I can't see how to use the loader as it requires the result be available in a completion event and therefore limits returning it from a function.  Any direction would be appreciated.  Here is my code:

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

      <?xml version="1.0" encoding="utf-8"?>

      <mx:Application

       

      xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="requestAllGenre();" width="640" height="480" xmlns:display="flash.display.*">

       

       

       

      <mx:ComboBox id="cboGenre" dataProvider="{colGenres}" labelField="GenreDescription" x="254" y="10" width="140"></mx:ComboBox>

       

       

      <mx:Label x="211" y="12" text="Genre:"/>

       

       

      <mx:DataGrid x="49.5" y="38" width="541" height="409" id="grdContent" allowMultipleSelection="false" editable="false" enabled="true" resizableColumns="true" showHeaders="true" sortableColumns="false" wordWrap="true" dataProvider="{colContents}">

       

       

      <mx:columns>

       

       

           <mx:DataGridColumn headerText="Thumbnail" dataField="ThumbnailByteArray">

       

       

                <mx:itemRenderer>

       

       

       

       

                     <mx:Component id="disp" >

       

       

                          <mx:HBox horizontalAlign="center">

       

       

                               <mx:Image id="img" source="{outerDocument.byteArrayToBitmap(data.ThumbnailByteArray)}" >

       

       

       

                               </mx:Image>

       

       

       

       

                          </mx:HBox>

       

       

       

       

                     </mx:Component>

       

       

       

       

                </mx:itemRenderer>

       

       

       

       

           </mx:DataGridColumn>

       

       

       

       

           <mx:DataGridColumn headerText="Title" dataField="ContentName">

       

       

           </mx:DataGridColumn>

       

       

       

       

           <mx:DataGridColumn headerText="Description" dataField="ContentDescription">

       

       

           </mx:DataGridColumn>

       

       

       

       

      </mx:columns>

       

       

      </mx:DataGrid>

       

       

      <mx:WebService id="ContentServ" showBusyCursor="true"wsdl="http://localhost:3628/ContentManWebService/ContentServ.asmx?wsdl" >

       

       

       

           <mx:operation name="GetAllGenre" resultFormat="object" result="genreResult(event)" >

       

       

           </mx:operation>

       

       

       

       

           <mx:operation name="GetAllContent" resultFormat="object" result="contentResult(event)" >

       

       

           </mx:operation>

       

       

       

       

      </mx:WebService>

      <mx:Script>

      <![CDATA[

       

      import mx.effects.Pause;

       

       

      import mx.utils.Base64Encoder;

       

       

      import mx.utils.Base64Decoder;

       

       

      import mx.core.Application;

       

       

      import mx.collections.ArrayCollection;

       

       

      import mx.controls.Alert;

       

       

      import mx.rpc.events.ResultEvent;

       

       

      import mx.graphics.codec.JPEGEncoder;

       

       

      import mx.events.FlexEvent;

       

       

      import flash.display.Bitmap;

       

       

      import flash.display.BitmapData;

       

       

      import flash.display.DisplayObject;

       

       

      import flash.display.Graphics;

       

       

      import flash.display.Sprite;

       

       

      import flash.events.Event;

       

       

       

      [

      Bindable]

       

       

      private var colGenres:ArrayCollection;

       

      [

      Bindable]

       

       

      private var colContents:ArrayCollection;

       

       

       

      private var bmpThumbnail:Bitmap;

       

       

      private var bImageRendered:Boolean;

       

       

      private var nWhileCount:int = 0;

       

       

       

      public function byteArrayToBitmap(ba:ByteArray):Bitmap {

       

       

           var bdatThumb:BitmapData = new BitmapData(75, 95, false);

           ba.position = 0;

           bdatThumb.setPixels(

      new Rectangle(75, 95),ba);

       

       

           var bmpThumbnailLocal:Bitmap = new Bitmap(bdatThumb);

       

       

           return bmpThumbnailLocal

      }

       

       

       

       

       

       

      private function requestAllGenre():void{

           ContentServ.GetAllGenre.send();

      }

       

       

       

       

      private function requestAllContent():void{

           ContentServ.GetAllContent.send();

      }

       

       

       

       

      // Gets called when the XML is successfully loaded.

       

       

      private function genreResult(event:ResultEvent):void{    

           colGenres = event.result

      as ArrayCollection;

           cboGenre.selectedIndex = 0;

      }

       

       

       

       

      // Gets called when the XML is successfully loaded.

       

       

      private function contentResult(event:ResultEvent):void{

           colContents = event.result

      as ArrayCollection;

      }

       

       

       

       

      private function btnSearch_OnClick(event:Event):void{

           requestAllContent();

      }

       

       

       

       

      ]]>

      </mx:Script>

       

       

       

       

       

      <mx:Button x="402" y="10" label="Search" id="btnSearch" click="btnSearch_OnClick(event)" toolTip="Click to Find Matching Content"/>