Image in datagrid from html parsed with regex

[summer]

Hi!

My problem is I would like to display images in a dataGrid, but the url is not directly available from the XML so I have to run it through a regex first. But how do I do that?

this is how it looks:

<mx:DataGridColumn headerText="Image" dataField="url" itemRenderer="mx.controls.Image" />


and basically what i want to do is something like this

<mx:DataGridColumn headerText="Image" dataField="findUrl(url)" itemRenderer="mx.controls.Image" />


but that doesn't work.

I'm a noob at flex :eek:

Complete code

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
creationComplete="startApp()"
width="751"
height="650"
alpha="1.0"
>

<mx:Script>
<![CDATA[
import mx.rpc.events.ResultEvent;

private function startApp():void
{
do_output();
//setInterval(do_output,5000);

}

private function do_output():void
{
imageRequest.send();
}

private function findUrl(s:String):String
{
//var pattern1:RegExp = new RegExp("http://[.\w/&;]+.jpg", "i");
var pattern1:RegExp = /http:\/\/[.\w\/&;]+.jpg/;

var str:String = s;

var r:String = pattern1.exec(str);

output.htmlText = "<img src=\"" + r + "\">";

return r;
}
]]>
</mx:Script>

<mx:HTTPService
id="imageRequest"
url="http://api.flickr.com/services/feeds/photos_public.gne"
/>

<mx:Button id="hejsa" label="Get Data" click="imageRequest.send()" cornerRadius="6" y="55" x="60" width="95" height="37"/>


<mx:DataGrid change="findUrl(productGrid.selectedItem.content)" variableRowHeight="true" x="60" y="100" id="productGrid" dataProvider="{imageRequest.lastResult.feed.entry}" width="619" height="309" fontFamily="Verdana" color="#008040" borderColor="#ff8000" alpha="1" enabled="true" >
<mx:columns>
<mx:DataGridColumn headerText="Image" dataField="url" itemRenderer="mx.controls.Image" />
<mx:DataGridColumn headerText="Content" dataField="content" />
<mx:DataGridColumn headerText="Published" dataField="published" />
</mx:columns>
</mx:DataGrid>
<mx:TextArea text="hej" width="624" height="263" id="output" />


</mx:Application>



I hope someone can help me! :confused:

[dr_zeus]

You're looking for the dataFunction property.

<mx:DataGridColumn headerText="Image" dataFunction="{findUrl}" itemRenderer="mx.controls.Image" />

...

private function findUrl(item:Object):String
{
var pattern1:RegExp = /http:\/\/[.\w\/&;]+.jpg/;
var str:String = item.url;
var r:String = pattern1.exec(str);
output.htmlText = "<img src=\"" + r + "\">";
return r;
}

[summer]

Hi and thanks for trying to help me out!

Sadly, I still can't get it to work. The documentation mentions something called labelFunction and the description seems to fit. But even that doesn't work :confused:

[dr_zeus]

You're right, there is no dataFunction. I don't have much experience with the DataGrid because I tend to work on applications with more interesting visual components. ;)

I only assumed that there would be a corresponding dataFunction property to go with the dataField property. There usually is... In the List component, for example, there's a labelField and a labelFunction. This sounds like a good feature request (http://www.adobe.com/go/wish) to send to Adobe.

For now, I'll just have to say I don't know, and I hope someone more experienced with DataGrids can help.

[summer]

aha! found exactly what is was looking for:
http://www.adobe.com/devnet/flex/quickstart/httpservice/

thanks anyway!