Simple Youtube Flex application

I wanted to build a simple Flex application for working with Youtube API, most of the blogs that i found on the internet talk about how to use as3-youtube-data-api for building that type of application, so i tried to build Flex application using that library but could not get it working, so i decided to build a simple demo application that makes use of Youtube API without any library

My Sample application lets you search for video first and then when you double click on a video, it will display that video below the search result for display



This the source code of my sample Youtube Flex application

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
backgroundColor="0x000000" viewSourceURL="srcview/index.html" >
<mx:Script>
<![CDATA[
import com.adobe.serialization.json.JSON;
import mx.collections.ArrayCollection;
import mx.collections.XMLListCollection;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
[Bindable]
protected var dp:ArrayCollection;
protected function onResult(event:ResultEvent):void{
var feed:Object = JSON.decode(event.result as String).feed;
dp = new ArrayCollection(feed.entry);
}
protected function onFault(event:FaultEvent):void{
trace("Fault: " + event.fault.faultString);
}
protected function dgLabelFunction(row:Object,column:DataGridColumn):String{
if (column.dataField=="title")
return row.title.$t;
else if (column.dataField=="content")
return row.content.$t;
else return row.published.$t;
}
protected function getURL():String{
trace("Entering getURL()");
var videoUrlStr:String = dg.selectedItem.link[0].href;
var startingIndex:int = videoUrlStr.indexOf("?v=") +3;
var endingIndex = videoUrlStr.indexOf("&feature");
var tokenLength:int = endingIndex - startingIndex;
var v:String = videoUrlStr.substr(startingIndex, tokenLength);
var videoUrl = "http://www.youtube.com/v/" + v;
return videoUrl;
}
private function displayYouTube(videoUrl:String):void{
trace("Changing value of URL " + videoUrl);
swfloader.source = videoUrl;
}
]]>
</mx:Script>
<mx:HTTPService id="youTubeService" url="http://gdata.youtube.com/feeds/api/videos"
resultFormat="text" result="onResult(event)" fault="onFault(event)">
<mx:request>
<q>{searchTxt.text}</q>
<alt>json</alt>
</mx:request>
</mx:HTTPService>

<mx:HBox top="10" left="10">
<mx:Label text="Search YouTube:" color="0xFFFFFF"/>
<mx:TextInput id="searchTxt" enter="youTubeService.send()"/>
<mx:Button label="Go!" click="youTubeService.send()"/>
<mx:Label id="msg" text="Double click result to open video" visible="false"/>
</mx:HBox>
<mx:HBox width="100%" top="40" left="10" color="#000000">
<mx:DataGrid id="dg" width="620" height="220" doubleClickEnabled="true"
dataProvider="{dp}" doubleClick="displayYouTube(getURL())">
<mx:columns>
<mx:DataGridColumn dataField="title" labelFunction="dgLabelFunction"
headerText="Title" width="150"/>
<mx:DataGridColumn dataField="content" labelFunction="dgLabelFunction"
headerText="Content" width="200" />
<mx:DataGridColumn dataField="published" labelFunction="dgLabelFunction"
headerText="Published" width="150"/>
</mx:columns>
</mx:DataGrid>
</mx:HBox>
<mx:SWFLoader x="10" y="268" source="" id="swfloader"
autoLoad="true" scaleContent="true"/>
</mx:Application>


In my Sample application i have a mx:HTTPService pointing to http://gdata.youtube.com/feeds/api/videos, when you enter some text in the search box and click on GO it makes a HTTP request to the Http Service by making HTTP GET call to http://gdata.youtube.com/feeds/api/videos?alt=json&q=cricket, in this value of q is cricket because thats my search criteria.

The response is a JSON feed cricket video. I am decoding the feed and displaying it in the spreadsheet format using this code

protected function onResult(event:ResultEvent):void{
var feed:Object = JSON.decode(event.result as String).feed;
dp = new ArrayCollection(feed.entry);
}


Every row in the spread sheet has displayYouTube() has event listener for double click, when you double click on any row in the spread sheet i am building a URL to that video and assiging it as value of source for SWFLoader that is part of the mxml.

protected function getURL():String{
trace("Entering getURL()");
var videoUrlStr:String = dg.selectedItem.link[0].href;
var startingIndex:int = videoUrlStr.indexOf("?v=") +3;
var endingIndex = videoUrlStr.indexOf("&feature");
var tokenLength:int = endingIndex - startingIndex;
var v:String = videoUrlStr.substr(startingIndex, tokenLength);
var videoUrl = "http://www.youtube.com/v/" + v;
return videoUrl;
}
private function displayYouTube(videoUrl:String):void{
trace("Changing value of URL " + videoUrl);
swfloader.source = videoUrl;
}


When you click on any of the video it will build a URL like http://www.youtube.com/v/q9ew_nITQWY and set it as value of SWFLoader source attribute.

No comments: