Truveo Video Search

Truveo is a video search engine that allows you to search multiple video sites. This Flex piece uses their API to display the results.

Here' the code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="searchVideosService.send()" width="800" height="475">
<mx:states>
<mx:State name="videoDetails">
<mx:SetProperty target="{searchResultsDataGrid}" name="height" value="145"/>
<mx:AddChild position="lastChild">
<mx:Panel y="204" height="234" layout="absolute" id="videoDisplayPanel" horizontalAlign="center" title="{searchResultsDataGrid.selectedItem.*::title}" left="10" right="10">
<mx:VBox y="10" height="100%" horizontalCenter="0" width="95%">
<mx:HBox width="100%">
<mx:Image width="160" scaleContent="false" horizontalAlign="center" height="120" id="videoPreview" source="{searchResultsDataGrid.selectedItem.*::thumbnailUrl}"/>
<mx:VBox height="100%">
<mx:Label text="Channel: {searchResultsDataGrid.selectedItem.*::channel}" height="18"/>
<mx:Label text="Date: {searchResultsDataGrid.selectedItem.*::dateFound}" height="18"/>
<mx:Label text="Quality: {searchResultsDataGrid.selectedItem.*::quality}" height="18"/>
<mx:Label text="Formats: {searchResultsDataGrid.selectedItem.*::formats}" height="18"/>
<mx:Label text="Bitrate: {searchResultsDataGrid.selectedItem.*::bitrate}" height="18"/>
</mx:VBox>
<mx:VBox height="100%" width="100%">
<mx:Label text="Embed Code:"/>
<mx:TextArea id="embedCode" wordWrap="true" text="{searchResultsDataGrid.selectedItem.*::videoResultEmbedTag}" width="100%" height="97"/>
</mx:VBox>
</mx:HBox>
<mx:HBox width="100%" horizontalAlign="center">
<mx:LinkButton label="Watch" id="watchButton" click="watchVideo();"/>
<mx:LinkButton label="Visit Channel" id="channelButton" click="visitChannel()"/>
<mx:LinkButton label="Back to Search" id="closeVideoButton" click="backToSearch();"/>
</mx:HBox>
</mx:VBox>
</mx:Panel>
</mx:AddChild>
</mx:State>
</mx:states>
<mx:Script>
<![CDATA[
import flash.net.navigateToURL;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.collections.XMLListCollection;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
private var appId:String = '00ab829d5cf8db07c'
private var serviceUrl:String = 'http://xml.truveo.com/apiv3';
[Bindable]
private var searchResultCollection:XMLListCollection = new XMLListCollection();
private var currentSearchResultsXML: XML;
private var urlRequest:URLRequest = new URLRequest();
private function onSearchReults(e:ResultEvent):void{
backToSearch();
this.currentSearchResultsXML = e.result as XML;
searchResultCollection.source = this.currentSearchResultsXML.*::VideoSet.*::Video;
trace(searchResultCollection);
}
private function onSearchFault(e:FaultEvent):void{
trace(e.message);
searchError.text = 'There was an error perfoming the search. Please try again.'
}
private function createTitleLabel(obj:Object, dgc:DataGridColumn):String{
return obj.*::title;
}
private function createChannelLabel(obj:Object, dgc:DataGridColumn):String{
return obj.*::channel;
}
private function createDescriptionLabel(obj:Object, dgc:DataGridColumn):String{
return obj.*::description;
}
private function createThumbLabel(obj:Object, dgc:DataGridColumn):String{
return obj.*::thumbnailUrl;
}
private function playVideo():void{
this.currentState='videoDetails';
}
private function backToSearch():void{
this.currentState = '';
}
private function watchVideo():void{
this.urlRequest.url = searchResultsDataGrid.selectedItem.*::videoUrl
navigateToURL(this.urlRequest, '_blank');
}
private function visitChannel():void{
this.urlRequest.url = searchResultsDataGrid.selectedItem.*::channelUrl
navigateToURL(this.urlRequest,'_blank');
}
]]>
</mx:Script>
<mx:Style>
Label{
font-weight:bold;
}
</mx:Style>

<mx:HTTPService id="searchVideosService" resultFormat="e4x" url="{serviceUrl}?appid={appId}&amp;method=truveo.videos.getVideos&amp;query={searchTerms.text}" result="onSearchReults(event)" fault="onSearchFault(event)">
</mx:HTTPService>
<mx:ApplicationControlBar y="10" left="10" right="10" id="applicationcontrolbar1">
<mx:Label text="Truveo Video Search" fontWeight="bold" fontSize="14"/>
<mx:TextInput id="searchTerms" enter="searchVideosService.send();"/>
<mx:Button label="Search" id="searchButton" click="searchVideosService.send();"/>
<mx:Label id="searchError" color="#FF0000" width="100%"/>
</mx:ApplicationControlBar>
<mx:DataGrid left="9.9" right="10.099976"  wordWrap="true" itemClick="playVideo();" rowHeight="60" id="searchResultsDataGrid" dataProvider="{searchResultCollection}" height="414.92426" y="50.95">
<mx:columns>
<mx:DataGridColumn headerText="Title"  labelFunction="createTitleLabel"/>
<mx:DataGridColumn headerText="Channel"  labelFunction="createChannelLabel"/>
<mx:DataGridColumn headerText="Description" labelFunction="createDescriptionLabel"/>
<mx:DataGridColumn headerText="Thumb"  labelFunction="createThumbLabel" itemRenderer="renderers.DataGridImage"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>

One Response to “Truveo Video Search”

  1. Jeremy Wischusen Says:

    If you take a look at the YouTube video search Flex piece, you can see that I found an easier way than defining a label function for each column.