adding example for data grid

03d1-datagrid/DataGridExample.mxml

@@ -0,0 +1,98 @@
+<?xml version="1.0" encoding="utf-8"?>
+<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
+    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://api.flickr.com/services/feeds/photos_public.gne"
+        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>