HorizontalList Control Using Flex

I have created a sample Flex application that uses HorizontalList
component.

Now when I use dynamic dataprovider that is if data to display is
dynamic the HorizontalList component is working.

My code for the sample app is as under:

image.mxml

[code:as3]

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Image;
import com.events.MainButtonClickEvent;

public function cmdOpen_click(event:Event):void
{
if(grdResource.selectedIndex >= 0)
{
var ImageURL:URLRequest = new URLRequest();
ImageURL.url = grdResource.selectedItem.typeValue;
navigateToURL(ImageURL,"_blank");
}
else
Alert.show("Please select Image to open");
}
private function getResourceByProducts_result(event:ResultEvent):void
{
this.grdResource.dataProvider = new ArrayCollection(event.result.source as Array);
}

private function server_fault(event:FaultEvent):void
{
Alert.show(ObjectUtil.toString(event.fault));
}

]]>
</mx:Script>

<mx:RemoteObject id="rdoImageResource" destination="ColdFusion" source="Myapplication.coldfusion.Images.ImagesResourceGateway">
<mx:method name="getResourceByImages" result="getResourceByImages_result(event)" fault="server_fault(event)"/>
</mx:RemoteObject>

<mx:HorizontalList id="grdResource" iconField="thumbnailImage" columnCount="6" columnWidth="135" rowCount="1" rowHeight="135"
horizontalScrollPolicy="on" x="20" y="698" width="698" click="cmdOpen_click(null)" visible="false">
<mx:itemRenderer>
<mx:Component>
<mx:VBox horizontalAlign="center">
<mx:Label text="{data.reference}" id="test1" />
<mx:Image source="{data.imagename}" id="image" height="100" width="115" />
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:HorizontalList>

</mx:Application>

[/code]