?
Solved

How to get Image returned as binary from Webservice to display in Flex

Posted on 2009-02-13
6
Medium Priority
?
1,537 Views
Last Modified: 2013-12-25
I have a webservice that provides text fields and an image field from a backend SQL server database. I want to display this information in a datagrid in Flex. The text is displaying OK, but the images aren't. The SOAP response identifies the images as base64encoded, and I have seen in the debugger that they have been interpreted by Flex as Byte arrays. I have tried feeding the array through a Loader, but I can only get a small placeholder to show in the datagrid - not the actual images.
0
Comment
Question by:EricsTheBoy
  • 3
  • 3
6 Comments
 
LVL 19

Expert Comment

by:Jones911
ID: 23634465
You will need to use a custom item renderer to display an image in a datagrid.

Here is an example:  http://sudarshanapte.wordpress.com/2007/12/06/flex-3-adding-image-and-text-indatagrid/

Here is another example: http://tutorial9.flexcf.com/
0
 

Author Comment

by:EricsTheBoy
ID: 23634868
Dear Jones911,

Thank you for the quick response, but this in not exactly what I was after - I'm sorry, but I think I didn't put in a good enough description of the problem. The datagrid has 5 columns, to reflect the 5 fields in the database. The first 4 columns display text data, and i wanted to put the image in the 5th column. I don't need to display combined text & image in one column. The text dispalys fine in the first 4 columns, so my backend query is working fine, and as far as the text is concerned it is coming across from the web service and displaying as it's supposed to. The problem is actually getting the image(s) to display correctly in the 5th column of the datagrid.

The code for the Application is detailed below. As you will see, the <mx:Image> control is taking the {data.ImgaeFile} as it's provider, but is converting this first using a seperate function (also attached at the bottom).

The resultant datagrid doesn't show the image, but it does show a small rectangle that looks like a placeholder for the image in each cell of the 5th column - well at least for the first three rows as i only have three datarows in my database.

The data is coming over the link via SOAP, and when I inspect the SOAP response, the image field  does show as base64 encoded data (the image field in the database is a Varbinary(MAX) field.

Hope this helps to clarify the problem.

Regards, Huw.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	xmlns:comp="components.*"
	layout="absolute">
 
<mx:Script>
	<![CDATA[
		import classes.ConvertImage;
		import mx.collections.ArrayCollection;
		import mx.rpc.events.ResultEvent;
		
		[Bindable]
		private var imageData:ArrayCollection;
		
		public var currentImageElement:ImageElement;
		
		private function resultHandler(event:ResultEvent):void 
		{
			imageData=event.result.Tables.Table.Rows as ArrayCollection;
		}	
	]]>
</mx:Script>
 
<mx:WebService 
	id="imagesDBService" 
	wsdl="http://localhost:49597/ImageWSv2.asmx?wsdl"
	result="resultHandler(event)" />
 
	<mx:Button 
		label="Get Images Data" 
		click="imagesDBService.getImageData()" 
		x="10" 
		y="38"/>
		
	<mx:DataGrid  
		id="dg" 
		x="142" 
		y="37" 
		dataProvider="{imageData}">
		<mx:columns>
			<mx:DataGridColumn headerText="Image ID" dataField="ImageID"/>
			<mx:DataGridColumn headerText="Image Name" dataField="ImageName"/>
			<mx:DataGridColumn headerText="Date Taken" dataField="ImageDate"/>
			<mx:DataGridColumn headerText="Artist" dataField="ImageArtist"/>
			<mx:DataGridColumn headerText="Image" dataField="ImageFile">
				<mx:itemRenderer>
					<mx:Component>
						<mx:VBox height="10">
							<mx:Image source="ConvertImage({data.ImageFile})" autoLoad="true"/>
						</mx:VBox>
					</mx:Component>
				</mx:itemRenderer>
			</mx:DataGridColumn>
		</mx:columns>
	</mx:DataGrid>
	
	<mx:Button 
		label="Get Single Image" 
		click="imagesDBService.getSelectedImage(5)" 
		x="10" 
		y="197"/>
		
</mx:Application>
 
____________________________________________________________________
 
package classes
{
	import flash.display.Loader;
	import flash.utils.ByteArray;
	import mx.controls.Image;
	
	public class ConvertImage
	{
		public function ConvertImage(inImage:ByteArray):Image
		{
					var imgLoad:Loader=new Loader();
					var img:Image=new Image();
					
					imgLoad.loadBytes(inImage,null);
					img=imgLoad.content();
					img.addChild();
					
					return img;
		}
	}
}

Open in new window

0
 
LVL 19

Expert Comment

by:Jones911
ID: 23637420
OK so event.result.Tables.Table.Rows  is base64 encoded image?
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 19

Assisted Solution

by:Jones911
Jones911 earned 2000 total points
ID: 23637425
0
 

Accepted Solution

by:
EricsTheBoy earned 0 total points
ID: 23639550
Thank you for this. I'll have a go over the weekend and let you know how I get on.
0
 

Author Comment

by:EricsTheBoy
ID: 23680376
Dear Jones911. I'm still having problems getting the image to display, but I have a nagging feeling that my Web Service is not working correctly, and that when I do get thsat to work your solution will be just what I need. If not, I'll post again. Thank you for your help.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
Ready to get certified? Check out some courses that help you prepare for third-party exams.
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Suggested Courses
Course of the Month16 days, 13 hours left to enroll

862 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question