Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

Dynamic image display

Avatar

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

Avatar

Former Community Member
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

Avatar

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