Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Dynamic image display

rashmingadhavi
Level 1
Level 1
Hello Falks!

I am new and novice to Flex platform and I jumped into Flex3.
I have a good background of Java.

I tried to make a sample application that reads data from
mysql5.1 DB and displays on DataGrid columns.



One of my table coumn is Image [BLOB]. When i try retriving
it via Remote Object service with BlazeDS data service, it does not
display me the Images.



I am pasting the code of my MXML.

-------------------------"Attached
Code"------------------------------------------------------------------------------------------------------------

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

<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"

layout="vertical"

verticalAlign="middle"

backgroundColor="white"

creationComplete="remoteobj.getPersonDetails()"

>

<mx:Script>

<![CDATA[

import flash.display.Bitmap;

import mx.controls.Image;

import mx.graphics.ImageSnapshot;

import mx.graphics.codec.*;

import mx.graphics.codec.JPEGEncoder;

import mx.controls.Alert;



import mx.collections.ArrayCollection;

private var reviewList:ArrayCollection;

import mx.controls.TileList;

private var myTileList:TileList;



private function getResults():void {



reviewList = remoteobj.getPersonDetails.lastResult;



var tf:TextFormat = new TextFormat();



//set textFormat font, color, and size

tf.font = "Verdana";

tf.bold = true;

tf.color = 0x990000;

tf.size = 16;

myTileList= new TileList();

myTileList.dataProvider =reviewList[0].image as Bitmap;



// set column and row values

myTileList.columnWidth = 200;

myTileList.rowHeight = 140;

myTileList.columnCount = 1;

myTileList.rowCount = 2;

myTileList.width = 210;

myTileList.height = 305;



//set styles

myTileList.setStyle("contentPadding", 5);



// add to the display (Stage)

addChild(myTileList);

}



]]>

</mx:Script>



<mx:RemoteObject id="remoteobj" destination="personmap"
/>

<mx:Image id="img" />

<mx:DataGrid id="dg" dataProvider="{reviewList}" >

<mx:columns>

<mx:DataGridColumn dataField="person_id"
headerText="PersonID" />

<mx:DataGridColumn dataField="fname"
headerText="FirstName"/>

<mx:DataGridColumn dataField="lname"
headerText="LastName"/>

<mx:DataGridColumn headerText="Image">

<mx:itemRenderer>

<mx:Component>

<mx:VBox>

<mx:Image id="myImage"

height="100" width="100"

source="@Embed{data.image}"/>

</mx:VBox>

</mx:Component>

</mx:itemRenderer>

</mx:DataGridColumn>

</mx:columns>

</mx:DataGrid>



<mx:Button label="Get Data" click="getResults()"/>



</mx:Application>



-----------------------------------------------------------------------------------------------------------------------------------------





2 Replies
cwbowman
Level 1
Level 1
Hi, did you ever get any response to this or solve this
problem? I am trying to do a very similar thing and I am not having
much luck.



Does anyone know of an example?



Craig Bowman
Zee_Yang
Level 2
Level 2
try the following these steps,

1. on the server side, return the blob data as byte[]. that
will be serialized into a ByteArray object in AS3

2. use flash.Display.Loader as the container for the image.
load the ByteArray using Loader.loadBytes(...)

3. add the Loader object to the display