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.

1 comment: