<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http:
backgroundColor="#FFFFFF"
backgroundAlpha="0"
horizontalAlign="left"
verticalGap="15"
horizontalGap="15">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;
import mx.controls.Alert;
[Bindable]
private var photoFeed:ArrayCollection;
private function requestPhotos():void {
var params:Object = new Object();
params.format = 'rss_200_enc';
params.tags = searchTerms.text;
photoService.send(params);
}
private function photoHandler(event:ResultEvent):void {
photoFeed= event.result.rss.channel.item as ArrayCollection;
datagrid_id.dataProvider = photoFeed;
datagrid_id.visible = true;
}
private function faultHandler(event:FaultEvent):void{
Alert.show(event.fault.faultCode + " , " + event.fault.faultString);
}
private function showPopup(event:Event):void{
theImage.source = photoFeed.getItemAt(event.currentTarget.selectedIndex).content.url
desc.text = photoFeed.getItemAt(event.currentTarget.selectedIndex).title.getItemAt(0)
popup.visible = true;
}
private function hidePopup():void{
popup.visible = false;
popup.includeInLayout = false;
}
]]>
</mx:Script>
<mx:HTTPService id="photoService"
url="http:
result="photoHandler(event)"
fault="faultHandler(event)" />
<mx:HBox>
<mx:Label text="Enter Search Terms"/>
<mx:TextInput id="searchTerms" enter="requestPhotos()" />
<mx:Button label="Search"
click="requestPhotos()" />
</mx:HBox>
<mx:HBox>
<mx:DataGrid id="datagrid_id"
visible="false"
itemClick="showPopup(event)">
<mx:columns>
<mx:DataGridColumn dataField="title" headerText="Title" width="100" >
<mx:itemRenderer>
<mx:Component>
<mx:Label text="{data.title.getItemAt(0)}" textAlign="center"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="credit" headerText="Author" width="100" />
<mx:DataGridColumn dataField="thumbnail" headerText="Photo" width="100">
<mx:itemRenderer>
<mx:Component>
<mx:Image height="75"
horizontalAlign="center"
source="{data.thumbnail.url}"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
<mx:Panel id="popup"
visible="false"
click="hidePopup()"
paddingLeft="10" paddingTop="10" paddingRight="10"
layout="horizontal">
<mx:VBox width="325" height="400">
<mx:Label id="desc"/>
<mx:Image id="theImage"/>
</mx:VBox>
</mx:Panel>
</mx:HBox>
</mx:Application>
Posted by
i found a problem with this app.
When u search for something, the results show up. and then u click on one of the items in the grid, the popup of the image comes to the right. But if the image is big, then scrolling bars appear. thats ok. but the problem lies in using the scroll bars, as the code is designed such tat when the popup is cliked, the popup shud hide itself, but even using the scrollbar is considered as click and the popup hides.
So how do we make only the click on the image to be considered and not the click on the scrollbars??
--
http://www.ChandruBS.co.nr