YouTube Video Search
Uses the YouTube API to display videos in customized Flex Datagrid component. Came up with a little trick on this one on how to create a single label function for the datagrid that reference the name spaced XML sent back from YouTube (see code below).
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” width=”800″ height=”475″>
<mx:states>
<mx:State name=”searchResults”>
<mx:AddChild position=”lastChild”>
<mx:DataGrid wordWrap=”true” left=”10″ right=”10″ creationCompleteEffect=”{dgGrow}” rowHeight=”120″ id=”searchResultsGrid” dataProvider=”{videoListXMLCollection}” labelFunction=”createLabel” top=”51″ height=”414″>
<mx:columns>
<mx:DataGridColumn headerText=”Title” dataField=”title”/>
<mx:DataGridColumn headerText=”Description” dataField=”content”/>
<mx:DataGridColumn headerText=”Thumb” dataField=”content”>
<mx:itemRenderer>
<mx:Component>
<mx:Image horizontalAlign=”center” creationCompleteEffect=”{dgImageFade}” source=”{data.mediaNs::group.mediaNs::thumbnail.@url[0]}”>
<mx:Script>
<![CDATA[
import flash.net.navigateToURL;
private var mediaNs:Namespace = new Namespace('http://search.yahoo.com/mrss/')
]]>
</mx:Script>
<mx:Fade duration=”2000″ id=’dgImageFade’/>
</mx:Image></mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn><mx:DataGridColumn headerText=”Link” dataField=”player”>
<mx:itemRenderer>
<mx:Component>
<mx:LinkButton label=”Watch Video” click=”gotoVideo();”>
<mx:Script>
<![CDATA[
import flash.net.navigateToURL;
private var mediaNs:Namespace = new Namespace('http://search.yahoo.com/mrss/')
private function gotoVideo():void{
navigateToURL( new URLRequest(data.mediaNs::group.mediaNs::player.@url), '_blank');
}
]]>
</mx:Script>
</mx:LinkButton>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</mx:AddChild>
</mx:State>
</mx:states>
<mx:Resize id=”dgGrow” target=”{searchResultsGrid}” heightFrom=”0″ heightTo=”414″/>
<mx:Script>
<![CDATA[
Security.allowDomain('*');
import mx.controls.dataGridClasses.DataGridColumn;
import mx.collections.XMLListCollection;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
private var ytDeafultNS:Namespace = new Namespace('http://www.w3.org/2005/Atom');
private var mediaNs:Namespace = new Namespace('http://search.yahoo.com/mrss/')
private var youtubeURL:String = 'http://gdata.youtube.com/feeds/api/videos';
[Bindable]
private var videoListXMLCollection:XMLListCollection = new XMLListCollection();
private var searchXML:XML;private function onSearchResults(event:ResultEvent):void{
this.searchXML = event.result as XML;
this.videoListXMLCollection.source = this.searchXML.*::entry;
this.currentState = ’searchResults’;
//trace(this.videoListXMLCollection)}
private function onSearchFault(event:FaultEvent):void{
trace(event.message);
}
private function createLabel(obj:XML, col:DataGridColumn):String{
return obj.ytDeafultNS::[col.dataField];
}
]]>
</mx:Script>
<mx:HTTPService id=”searchService” url=”{youtubeURL}?vq={searchTerms.text}&orderby=published&start-index=1&max-results={numberOfResults.value}” resultFormat=”e4x” result=”onSearchResults(event)” fault=”onSearchFault(event)”/>
<mx:ApplicationControlBar y=”10″ left=”10″ right=”10″>
<mx:FormHeading label=”Search YouTube”/>
<mx:FormItem label=”Search Terms”>
<mx:TextInput id=”searchTerms” enter=”searchService.send();” text=” “/>
</mx:FormItem>
<mx:FormItem label=”Number of Results to Show”>
<mx:NumericStepper id=”numberOfResults” value=”10″ minimum=”1″ maximum=”100″/>
</mx:FormItem>
<mx:Button label=”Search” id=”searchButton” click=”searchService.send();”/>
</mx:ApplicationControlBar>
</mx:Application>
Hello
I try this code buit I can’t see thumbnails. How does work the thumbnails (in the column: “thumb”)? I copy this code to test for my project.