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}&amp;orderby=published&amp;start-index=1&amp;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>

One Response to “YouTube Video Search”

  1. PowerNRJ Says:

    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.