Please note that due to changes in the Twitter cross domain policy, the API we will create in this tutorial will not work online, but works perfectly in an AIR application.

Requirements

Adobe Flash CS3

Try / Buy

Adobe Intergrated Runtime (AIR) for Flash CS3

Download

Source Files

Download

Pre-Requesites

Some experience in creating classes in AS3, if you dont know how to, don’t worry, you’ll learn here

Create the package

The first thing we need to do before actually coding anything is to create our class package. Creating a class package is very simple, we’ll create it right on our desktop. All you have to do is create a folder and name it “com”, that will be the main package. inthe “com” folder, create another folder identifying the name of your webservices collection, I’ll call mine “reyco1″. now in the “reyco1″ folder create another folder called “webservices”. That’s it! package creation complete. Now how easy was that? Very!

Now create create an Actionscript file, name it “WebService.as” and save it in the “webservices” folder. This is the class that all our apis, such as Twitter API will use to connect to their respective web services. Crack that puppy open and lets get to the coding goodness!

Coding the main WebService class

All AS3 classes are contained within a package. We already created our package in the first step, basically a few nested folders. So we’ll start our class as so:

package com.reyco1.webservice
{

}

Now we need to import the classes that we need from flash in order to make our class work:

package com.reyco1.webservice
{
	import flash.events.*;
	import flash.net.*;
}

Our class will extend the “EventDispatcher” class which means that we will be able to dispatch much needed events. It will have additional properties and methods which we will include in later steps. In the meantime your class should look like this:

package com.reyco1.webservice
{
	import flash.events.*;
	import flash.net.*;

	public class WebService extends EventDispatcher
	{

    }

}

Now we create the variables that we will need in order to connect to the online web services. We’ll need a URLRequest, a URLLoader and a URLVariables along with a generic data variable that will hold information returned from the web service. We want to make this data variable public so that it can be accessed from outside the class:

package com.helix.webservice
{
	import flash.events.*;
	import flash.net.*;

	public class WebService extends EventDispatcher
	{

		private var request:URLRequest;
		private var loader:URLLoader;
		private var variables:URLVariables;
		public var data:*

    }

}

Now that we have all the variables we need, we can go ahead and create our constructor. The class constructor is a special method always named the same name as the class. Constructors can accept arguments or not. Our’s will accept one, an HTTP Request (I’ll explain in a bit). We’ll call the EventDispatcher constructor by calling the “super” method and then set our request variable to accept the HTTP Request:

package com.reyco1.webservice
{
	import flash.events.*;
	import flash.net.*;

	public class WebService extends EventDispatcher
	{

		private var request:URLRequest;
		private var loader:URLLoader;
		private var variables:URLVariables;
		public var data:*

		public function WebService($servicePath:String)
		{
        	super();
			request = new URLRequest($servicePath);
		}
    }
}

Now we’ll create our one and only method. This is the method that will make the call to the webservice. Our method will accept 2 arguments: the first is a “method” (String); we can set this method to be either “POST” or “GET”, ours will default to “POST”. Usually web services will tell you which method to use in order to access their information. The second argument is “arguments” (Object); This will hold any parameters that you would need to make your service call. Again, web services will tell you if you need to send any additional information with your call, ours defaults to null.

package com.reyco1.webservice
{
	import flash.events.*;
	import flash.net.*;

	public class WebService extends DispatchExtension
	{

		private var request:URLRequest;
		private var loader:URLLoader;
		private var variables:URLVariables;
		public var data:*

		public function WebService($servicePath:String)
		{
			request = new URLRequest($servicePath);
		}

		/**
		 * Makes the web service call
		 * @param $method either POST or GET. POST is set as default
		 * @param $arguments any parameters or variables that you need to make with your web service call
		 *
		 */
		public function call($method:String="POST", $arguments:Object=null):void
		{
			variables = new URLVariables();
			if($arguments != null){
				for (var i:* in $arguments){
					variables[i] = $arguments[i];
				}
				request.data = variables;
			}
			request.method = $method.toUpperCase();
			loader = new URLLoader(request);
			loader.addEventListener(Event.COMPLETE, handleRequestLoaded);
			loader.addEventListener(IOErrorEvent.IO_ERROR, handleRequestError);
			loader.load(request);
		}
    }
}

Now let me explain what’s going on up there. Basically we set up our URLVariables by recursing through the “$arguments” parameter if it’s not set to null and set it to the “data” proerty or our URLRequest. Then we specify the call method by setting the URLRequest’s “method” property to the “$method” parameter. We then continue to set up out URLLoader instance by adding the COMPLETE and IOErrorEvent event listeners. Finally we make the service call by executing the URLLoader’s call method and passing it the URLRequest.

Now we create the handlers for our event listeners:

package com.reyco1.webservice
{
	import flash.events.*;
	import flash.net.*;

	public class WebService extends EventDispatcher
	{

		private var request:URLRequest;
		private var loader:URLLoader;
		private var variables:URLVariables;
		public var data:*

		public function WebService($servicePath:String)
		{
			request = new URLRequest($servicePath);
		}

		/**
		 * Makes the web service call
		 * @param $method either POST or GET. POST is set as default
		 * @param $arguments any parameters or variables that you need to make with your web service call
		 *
		 */
		public function call($method:String="POST", $arguments:Object=null):void
		{
			variables = new URLVariables();
			if($arguments != null){
				for (var i:* in $arguments){
					variables[i] = $arguments[i];
				}
				request.data = variables;
			}
			request.method = $method.toUpperCase();
			loader = new URLLoader(request);
			loader.addEventListener(Event.COMPLETE, handleRequestLoaded);
			loader.addEventListener(IOErrorEvent.IO_ERROR, handleRequestError);
			loader.load(request);
		}

		private function handleRequestLoaded($event:Event):void
		{
			data = $event.target.data;
			this.dispatchEvent(new Event(”RESULT”, false));
		}

		private function handleRequestError($event:IOErrorEvent):void
		{
			data = {};
			this.dispatchEvent(new Event(”FAULT”, false));
		}

	}
}

In the handlers, if the call is successfull, it sets the data variable to the data that the web service returns and fires a “RESULT” event. If the call is unsuccessful, set the data to an empty object and fires teh “FAULT” event. Now we’ll add getter and setter functions so that we may be able to dynamically set the web service path whenever we want.

package com.reyco1.webservice
{
	import flash.events.*;
	import flash.net.*;

	public class WebService extends EventDispatcher
	{

		private var request:URLRequest;
		private var loader:URLLoader;
		private var variables:URLVariables;
		public var data:*

		public function WebService($servicePath:String)
		{
			request = new URLRequest($servicePath);
		}

		/**
		 * Makes the web service call
		 * @param $method either POST or GET. POST is set as default
		 * @param $arguments any parameters or variables that you need to make with your web service call
		 *
		 */
		public function call($method:String="POST", $arguments:Object=null):void
		{
			variables = new URLVariables();
			if($arguments != null){
				for (var i:* in $arguments){
					variables[i] = $arguments[i];
				}
				request.data = variables;
			}
			request.method = $method.toUpperCase();
			loader = new URLLoader(request);
			loader.addEventListener(Event.COMPLETE, handleRequestLoaded);
			loader.addEventListener(IOErrorEvent.IO_ERROR, handleRequestError);
			loader.load(request);
		}

		private function handleRequestLoaded($event:Event):void
		{
			data = $event.target.data;
			this.dispatchEvent(new Event(”RESULT”, false));
		}

		private function handleRequestError($event:IOErrorEvent):void
		{
			data = {};
			this.dispatchEvent(new Event(”FAULT”, false));
		}

		public function set servicePath($path:String):void
		{
			request = new URLRequest($path);
		}

		public function get servicePath():String
		{
			return request.url;
		}

	}
}

That’s basically all we need for our base WebService calss! Was it easy? Hope so lets fire it up by using it in a simple Twitter API!

Using the newly created WebService class to make a simple Twitter API

Create a new Actionscript file, name it “Twitter” and save it to the webservices folder. We want this class to fire events also, so lets start off by extending the EventDispatcher class. Remember also to import the flash events package and our WebService class too:

package com.reyco1.webservice
{
	import com.reyco1.webservice.WebService;
	import flash.events.*;

	public class Twitter extends EventDispatcher
	{
    }

}

Cool, let’s create a static private var that will hold an HTTP Status method provided by the online Twitter API. You can find all the Twiiter methods over at the Twitter RESR API Docunebtation here: http://apiwiki.twitter.com/REST+API+Documentation#HTTPStatusCodes. We’re going to use only one for now. The call to get all the Tweets on the public timeline.

We’re also going to need a private variable to represent our WebService class and a public array variable which will hold the parsed xml returned byt Twitter:

package com.reyco1.webservice
{
	import com.reyco1.webservice.WebService;
	import flash.events.*;

	public class Twitter extends EventDispatcher
	{

		private static var PUBLIC_TIMELINE:String = "http://twitter.com/statuses/public_timeline.xml";

		private var twitterService:WebService;
		public var result:Array;

        }
    }
}

Ok, now let’s set up our constructor. In the constructor we will set up our instance of the WebService class. Remeber that the WebService class needs to accept a service path in it’s constructor, so we’ll pass it our PUBLIC_TIMELINE path as default. We also set the result array to an empty array;

package com.reyco1.webservice
{
	import com.reyco1.webservice.WebService;
	import flash.events.*;

	public class Twitter extends EventDispatcher
	{

		private static var PUBLIC_TIMELINE:String = "http://twitter.com/statuses/public_timeline.xml";

		private var twitterService:WebService;
		public var result:Array;

		public function Twitter()
		{
			twitterService = new WebService(Twitter.PUBLIC_TIMELINE);
			twitterService.addEventListener("RESULT", handleResult);
			twitterService.addEventListener("FAULT", handleFault);

			result = [];
		}
    }
}

before we set up the handlers for the events fired from the WebService class, let’s create the method which will make the request for the public timeline to Twitter:

package com.reyco1.webservice
{
	import com.reyco1.webservice.WebService;
	import flash.events.*;

	public class Twitter extends EventDispatcher
	{

		private static var PUBLIC_TIMELINE:String = "http://twitter.com/statuses/public_timeline.xml";

		private var twitterService:WebService;
		public var result:Array;

		public function Twitter()
		{
			twitterService = new WebService(Twitter.PUBLIC_TIMELINE);
			twitterService.addEventListener("RESULT", handleResult);
			twitterService.addEventListener("FAULT", handleFault);

			result = [];
		}

		public function requestPublicTimeline():void
		{
			twitterService.servicePath = Twitter.PUBLIC_TIMELINE;
			twitterService.call();
		}
    }
}

What we’re doing is dynamically setting the service path on the Webservices class. Now, you may be asking yourself, “didn’t we just add that path up in the constructor?”, the answer is, yes. Never the less, it is good practice for us to set it up here again, basically because later on when we add new methods, we’ll have to set it to the new service path anyway, so might as well get used to it from now

Afther the path is set, then we then execute the call method of our WebService class. Nothig is going to happen unless we add our event handlers, so let’s get to it!

package com.reyco1.webservice
{
	import com.reyco1.webservice.WebService;
	import flash.events.*;

	public class Twitter extends EventDispatcher
	{

		private static var PUBLIC_TIMELINE:String = "http://twitter.com/statuses/public_timeline.xml";

		private var twitterService:WebService;
		public var result:Array;

		public function Twitter()
		{
			twitterService = new WebService(Twitter.PUBLIC_TIMELINE);
			twitterService.addEventListener("RESULT", handleResult);
			twitterService.addEventListener("FAULT", handleFault);

			result = [];
		}

		public function requestPublicTimeline():void
		{
			twitterService.servicePath = Twitter.PUBLIC_TIMELINE;
			twitterService.call();
		}

		private function handleFault($event:Event):void
		{
			result = [];
			this.dispatchEvent(new Event(”FAULT”));
		}

		private function handleResult($event:Event):void
		{
			var myResult:XML = new XML(twitterService.data);
			result = parseResult(myResult);
			this.dispatchEvent(new Event(”RESULT”));
		}
    }
}

Nothing too fancy in the fault event handler. Basically, all it does is is just set the reult array to an ampty array and fires a new Fault event. Now, the good stuff is in the result event handler. The response we get from Twitter will be a String in an XML format, so once it arrives, we need make sure flash reads it as XML. Once that is done, we pass it to a method named “parseResult” which we will be seeing in the next step. Essentially, all the “parseResult” method does is take the xml returned from Twitter and parse it into an array of objects, better known as a “Collection”. Once the XML is parsed, it is set as the “result” array and a “RESULT” event is fired. Let’s see that crazy “parseResult” method:

package com.reyco1.webservice
{
	import com.reyco1.webservice.WebService;
	import flash.events.*;

	public class Twitter extends EventDispatcher
	{

		private static var PUBLIC_TIMELINE:String = "http://twitter.com/statuses/public_timeline.xml";

		private var twitterService:WebService;
		public var result:Array;

		public function Twitter()
		{
			twitterService = new WebService(Twitter.PUBLIC_TIMELINE);
			twitterService.addEventListener("RESULT", handleResult);
			twitterService.addEventListener("FAULT", handleFault);

			result = [];
		}

		public function requestPublicTimeline():void
		{
			twitterService.servicePath = Twitter.PUBLIC_TIMELINE;
			twitterService.call();
		}

		private function handleResult($event:Event):void
		{
			var myResult:XML = new XML(twitterService.data);
			result = parseResult(myResult);
			this.dispatchEvent(new Event(”RESULT”));
		}

		private function handleFault($event:Event):void
		{
			result = [];
			this.dispatchEvent(new Event(”FAULT”));
		}

		private function parseResult($result:XML):Array
		{
			var objectArray:Array = [];
			var xml:XML = $result
			var xmllist:XMLList = xml.children();

			for(var a:Number = 0; a < xmllist.length(); a++){
				var object:Object = {};
				for(var b:Number = 0; b< xmllist[a].children().length(); b++){
					var item:XML = xmllist[a].children()[b];
					if(item.localName().toString() == “user”){
						var userObject:Object = {};
						for(var c:Number = 0; c < item.children().length(); c++){
							userObject[item.children()[c].localName().toString()] = item.children()[c].toString()
						}
						object[item.localName()] = userObject;
					}else{
						object[item.localName()] = item.toString();
					}
				}
				objectArray.push(object);
			}
			return objectArray;
		}
	}
}

With the “parseResult” method, each node in the XML will be parsed into an object containing the following values:

id
in_reply_to_status_id
source
created_at
user
  -- name
  -- url
  -- screen_name
  -- description
  -- followers_count
  -- id
  -- protected
  -- profile_image_url
  -- location
in_reply_to_user_id
text
favorited
truncated

I think it’s time we test ride this puppy! Let’s get to it!

Creating a Twitter Application with our newly created Twitter API

Crack open an fla file and set the stage dimensions to 310 by 400. We’ll start off by creating a container for each Tweet. The container movieclip will hold the users profile image and a textfield to display the user’s tweet. Each of a users profile image is 48 x 48, so create a square on the stage 48 x 48 and create a static text field which says “LOADING” and place it right at the center of the box. Now convert the whole thing into a MovieClip and instance name it “imageContainer”;

Now create a dynamic text field with the following properties:

Set the text field right next to the imageContainer and create a MovieClip out of the whole thing. So essentially at this point you should have ONE MovieClip on the stage. This movie clip should contain an 48 x 48 MovieClip instance named “imageContainer” and a dynamic text field instance named “twitTxt”

Drag another 5 instances of the newly created movie clip from the library and drop them on the stage and align them one under the other like shown below and instance name then item0, item1, item2, item3, item4 and item5:

That’s it for the timeline stuff. Select the first frame and open up your actions panel. The first thing we need to do is import our Twitter class;

import com.reyco1.webservice.Twitter

Now we create an instance of our Twitter API and have it listen to the “RESULT” event:

import com.reyco1.webservice.Twitter

var twitter:Twitter = new Twitter();
twitter.addEventListener("RESULT", handleResult);

Let’s set up the handler for the result event. In the handler we pass the first 6 of the objects in the result array to a “populateItem” method along with its index. Let’s take a look at the event handler and then we’ll see what that “populateItem” method looks like.

import com.reyco1.webservice.Twitter

var twitter:Twitter = new Twitter();
twitter.addEventListener("RESULT", handleResult);

function handleResult($event:Event):void
{
	var result:Array = twitter.result;
	for(var a:Number = 0; a < 6; a++){
		populateItem(a, result[a]);
	}
}

Below we’ve added the “populateItem” method. Basically, this method adds the tweet to the text field in the item on stage along with adding the image to it’s imageContainer.

import com.reyco1.webservice.Twitter

var twitter:Twitter = new Twitter();
twitter.addEventListener("RESULT", handleResult);

function handleResult($event:Event):void
{
	var result:Array = twitter.result;
	for(var a:Number = 0; a < 6; a++){
		populateItem(a, result[a]);
	}
}

function populateItem($itemIndex:Number, $twitObject:Object):void
{
	this["item"+$itemIndex].twitText.text = $twitObject.text;
	var imageLoader:Loader = new Loader();
	this["item"+$itemIndex].imageContainer.addChild(imageLoader);
	var imagePath:URLRequest = new URLRequest($twitObject.user.profile_image_url);
	imageLoader.load(imagePath);
}

Now all we have to do is call the “requestPublicTimeline” method of our Twitter API and we’re DONE!!

import com.reyco1.webservice.Twitter

var twitter:Twitter = new Twitter();
twitter.addEventListener("RESULT", handleResult);

function handleResult($event:Event):void
{
	var result:Array = twitter.result;
	for(var a:Number = 0; a < 6; a++){
		populateItem(a, result[a]);
	}
}

function populateItem($itemIndex:Number, $twitObject:Object):void
{
	this["item"+$itemIndex].twitText.text = $twitObject.text;
	var imageLoader:Loader = new Loader();
	this["item"+$itemIndex].imageContainer.addChild(imageLoader);
	var imagePath:URLRequest = new URLRequest($twitObject.user.profile_image_url);
	imageLoader.load(imagePath);
}

twitter.requestPublicTimeline();

Publishing your file as an AIR application

Publishing a flash file as an AIR application cannot be any easier:

• Download the runtime installation file.
• Double-click the runtime installation file.
• In the installation window, follow the prompts to complete the installation.

Once installed, follow these steps:

• Open your Flash FLA file.
• If you’re opening a new Flash File (ActionScript 3.0), save it. If you don’t save it, a warning appears when you do the next step.
• Select Commands > AIR - Application And Installer Settings. An alert box appears, asking if you want to convert the file to Adobe AIR publish settings.
• Click OK to convert the FLA file to Adobe AIR publish settings. The AIR - Application And Installer Settings dialog box appears.

Simply publish your and all should work! I hope you have enjoyed this article and have been able to learn lots of stuff! In the next few tutorials, I’ll be adding more complex methods to our Twitter API and Hopefully at the end of the series, we’ll have a fully working Twitter Application!

In this second, and final, part we’ll be learning how to save and edit the file and how to setup the bindings between the xml and our component.

Download the source files

On a side note, we’ll be using the application storage folder to save the data because AIR doesn’t allow us to write to the application folder itself.

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" initialize="{init()}"
	layout="absolute" height="451" width="542">
<!-- // -->
	<mx:Script>
		<![CDATA[
			import mx.collections.XMLListCollection;
			private var myXml:XML;
			private var myLoader:URLLoader;
			[Bindable]
			private var myContactsCol:XMLListCollection;

Note the introduction of the [Bindable] above ‘private var myContactsCol:XMLListCollection;’ this tells the Flex components that they can use this variable to listen to changes and to change it’s values.

public function init():void
			{
				var dataFile:File = new File('app-storage:/data.xml');
				if(dataFile.exists){
					var myReq:URLRequest = new URLRequest('app-storage:/data.xml');
					myLoader = new URLLoader()
					myLoader.addEventListener(Event.COMPLETE, dataComplete);
					myLoader.load(myReq);
				}else{
					createFile()
				}

			}

We start by initializing the application, as we saw in the previous part, but this time we need to check if the XML file already exists in our
application storage. And if it doesn’t we need to create it.
Note: You’ll notice that we’re referencing the file as app-storage:/data.xml, app-storage is a shortcut that AIR give you to your local storage location on the users machine.

private function createFile():void
			{
				var xmlToSave:XML = new XML('<flashEnabled><contacts>' +
						'<contact>' +
						'<name>Contact1</name>' +
						'<telephone></telephone>' +
						'<email></email>' +
						'</contact>' +
						'</contacts>' +
						'</flashEnabled>')
				var saveStr:String = xmlToSave.toXMLString();

				var file:File = new File('app-storage:/data.xml');
				var fs:FileStream = new FileStream();
				fs.open(file, FileMode.WRITE);

				fs.writeUTFBytes(saveStr);
				fs.close();
				init();
			}

Since the file wasn’t found we’ll create it, we start by creating our base XML object and retrieving a string with xml identation, then we open a File reference to it and finally
we write the file using writeUTFBytes that will automatically save our string to the XML file with UTF-8.

private function dataComplete(e:Event):void
			{
				myXml = new XML(myLoader.data.toString());
				myContactsCol = new XMLListCollection(myXml..contact);

			}

			private function updateList():void
			{
				myContactsCol = new XMLListCollection(myXml..contact.(name.toLowerCase().indexOf(search_txt.text.toLowerCase()) != -1 ))
			}

Here you’ll also notice that we no longer need to invalidate the list or reset the datagrid’s dataprovider, this is because we now use Binding.

private function saveData(e:Event):void
			{
				var xmlToSave:XML = new XML('<flashEnabled><contacts>'+myContactsCol.toXMLString()+'</contacts></flashEnabled>')
				var saveStr:String = xmlToSave.toXMLString();

				var file:File = new File('app-storage:/data.xml');
				var fs:FileStream = new FileStream();
				fs.open(file, FileMode.WRITE);

				fs.writeUTFBytes(saveStr);
				fs.close();
			}

This is where we’ll save the file, it’s essentially the same as create file, but with the contents of our current contact xml collection as nodes.

private function addItem():void
			{
				myContactsCol.addItem(new XML('<contact>' +
						'<name>Contact1</name>' +
						'<telephone></telephone>' +
						'<email></email>' +
						'</contact>'))
			}

			private function removeItem():void
			{
				myContactsCol.removeItemAt(myDg.selectedIndex);
			}

		]]>
	</mx:Script>

Here we have the add and remove item from our collection. So first lets go over adding an item, we essentially need to create an empty node and add it to the xml collection.
This can be achieved in a myriad of ways, but I reckon this might be the easiest.
Then for the removing part it’s as easy as removing the item that corresponds to the current index of the data grid.

Design

<mx:DataGrid bottom="60" top="10" left="10" id="myDg" dataProvider="{myContactsCol}" editable="true" right="10">
		<mx:columns>
			<mx:DataGridColumn headerText="Name" dataField="name"/>
			<mx:DataGridColumn headerText="Telphone" dataField="telephone"/>
			<mx:DataGridColumn headerText="Email" dataField="email"/>
		</mx:columns>
	</mx:DataGrid>
	<mx:Label x="10" text="Search:" bottom="10"/>
	<mx:TextInput x="65" id="search_txt" bottom="10"/>
	<!-- Code block 9 -->
	<mx:Button x="233" label="Go!" id="go_btn" click="{updateList()}" bottom="10"/>
	<mx:Button label="Save" click="{saveData(event)}" id="saveButton" bottom="10" right="10"/>
	<mx:Button x="286" label="Add" click="{addItem()}" bottom="10"/>
	<mx:Button x="343" label="Remove" click="{removeItem()}" bottom="10"/>

</mx:WindowedApplication>

With all the UI elements in place we can now set the two properties we need for the datagrid to work properly, the editable=”true” so that we can edit the contents of each item,
and the to set the dataprovider to myContactsCol so that it will bind to it.

Afterward we just have the normal buttons and layout to call the appropriate methods on click and you’re all set.

I hope that this will help you get some insight on how to use Bindings and how to modify and write files using AIR so that you can apply it to your own projects,
in the previous part of this article we mentioned the application self update, but since then Adobe has release the air update framework and therefore there’s no longer
need to use our own library to achieve a self updating application.

If you have any questions feel free to expose them here and I’ll address them as soon as I can.

Requirements

Flex 3

Try/Buy

Sample files:

YouTube.zip
Let’s start by building the search user interface.

Searching YouTube

YouTube provides a set of RSS feeds that keep you up to date with the latest videos. These feeds take lots of parameters to refine what you are looking for, one of those is an arbitrary keyword search.
The Flex code below uses the YouTube search feed to request a set of videos based on the user’s search criteria. The code then uses the e4x language extensions in ActionScript 3 to parse the feed and present the video thumbnails in a TileList.

<?xml version="1.0" encoding="utf-8"?> 

  <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"  title="YouTube  Search"> 

  <mx:Script> 

  <![CDATA[ 

  import
 mx.rpc.events.ResultEvent; 

  import
 mx.rpc.http.HTTPService; 

namespace
 atom = "http://www.w3.org/2005/Atom"
; 

    namespace
 media = "http://search.yahoo.com/mrss/"
; 

private
 function
 onSearch() : void
 { 

    var
 search:HTTPService = new
 HTTPService(); 

    search.url = "http://gdata.youtube.com/feeds/api/videos/?vq="
+escape(txtSearch.text)+"&orderby=updated"
; 

    search.resultFormat = 'e4x'
; 

     search.addEventListener(ResultEvent.RESULT,onSearchResult); 

    search.send(); 

  } 

  private
 function
 onSearchResult( event:ResultEvent ) : void
 { 

    use
 namespace
 atom; 

    use
 namespace
 media; 

    var
 movies:Array = []; 

    for
 each
( var
 entry:XML in
 event.result..entry ) { 

      var
 group:XML = entry.group[0]; 

      movies.push( { 

         id:group.player.@url.toString(), 

         description:entry.content.toString(), 

         thumbnail:group.thumbnail[0].@url.toString() } ); 

    } 

    thumbList.dataProvider =  movies; 

  } 

  ]]> 

  </mx:Script> 

  <mx:HBox  width=”100%”> 

  <mx:TextInput  width=”100%” id=”txtSearch” /> 

  <mx:Button  label=”Search” click=”onSearch()” /> 

  </mx:HBox> 

  <mx:TileList  id=”thumbList” width=”100%” height=”100%”> 

  <mx:itemRenderer> 

  <mx:Component> 

  <mx:HBox  paddingBottom=”5″ paddingLeft=”5″ paddingRight=”5″  paddingTop=”5″> 

  <mx:Image  source =”{data.thumbnail}” height=”100″ width=”150″ horizontalAlign=”center” verticalAlign=”middle” toolTip=”{data.description}”> 

  </mx:Image> 

  </mx:HBox> 

  </mx:Component> 

  </mx:itemRenderer> 

  </mx:TileList> 

  </mx:WindowedApplication>

The onSearch method is called from the search button. It creates a new HTTPService on the fly with the URL of the YouTube feed for the search. It then registers onSearchResult as an event handler for the result.
The onSearchResult method uses e4x to parse through each ‘entry’ tag in the RSS feed. For each movie it builds an object with three fields. The ‘id’ field holds the URL of the HTML page for the video. The ‘description’ field holds the textual description of the video. And the ‘thumbnail’ field holds the URL of the thumbnail.
When I launch this MXML in an AIR project within Flex Builder 3 I see something like Figure 1.

Figure 1-1. Just the YouTube search

In this case I’ve typed in ‘super mario’ and pressed ‘search’ to get a list of the movies that matched that criteria.
From here we need to add the ability to download the flash video, as well as play it back.

Downloading From YouTube

The user interface for the download version of the project is going to be a lot more complex than the search interface. We need to show the search results, allow for playback, and add a Save button to save the movie locally. The finished product is shown in Figure 2.

Figure 1-2. The search and the downloader

The interface is separated into two pieces, defined by panels. One panel is for searching and the other panel is shows the downloaded movies. The vertical divider allows you to scale the size of each of these panels to your preferred size.
The search section is largely the same though we will add a progress indicator (invisible in the figure) next to the search button. That progress indicator will be used during the downloads of the movies since those tend to be fairly big files.
The downloaded movies panel has the list of downloaded movies on the left, and the movie player on the right. As well as a Save button that is only visible if a movie is selected. The Save button allows the user to copy the downloaded movie out of the temporary directory onto the desktop (or wherever they choose).
The user interface portion of the MXML code for this example is shown below:

<?xml version="1.0" encoding="utf-8"?> 

  <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"  title="YouTube  Downloader" 

    height="700" width="600" paddingBottom="5" paddingLeft="5"  paddingRight="5" paddingTop="5" 

     creationComplete="updateLocalVideos()"> 

  <mx:VDividedBox width="100%" height="100%"> 

<mx:Panel  title="Search" paddingBottom="5" paddingLeft="5"  paddingRight="5" paddingTop="5" width="100%"  height="50%"> 

  <mx:HBox  width="100%"> 

  <mx:TextInput  width="100%" id="txtSearch" /> 

  <mx:Button  label="Search" click="onSearch()" /> 

  <mx:ProgressBar width="100" id="downloadProgress" visible="false" /> 

  </mx:HBox> 

  <mx:TileList  id="thumbList" width="100%" height="100%" doubleClickEnabled="true" doubleClick="onThumbClick()"> 

   ... 

  </mx:TileList> 

  </mx:Panel> 

<mx:Panel  title="Downloaded  Movies"  paddingBottom="5" paddingLeft="5" paddingRight="5"  paddingTop="5" width="100%" height="50%"> 

  <mx:HBox  height="100%"> 

  <mx:List  id="localList" width="170" height="100%" doubleClickEnabled="true" doubleClick="onMovieClick()"  > 

   <mx:itemRenderer> 

   <mx:Component> 

   <mx:HBox paddingBottom="2" paddingLeft="2"  paddingRight="2" paddingTop="2"> 

   <mx:Image source="{data.thumbnail.url}" height="100"  width="140" horizontalAlign="center" verticalAlign="middle"> 

   </mx:Image> 

   </mx:HBox> 

   </mx:Component> 

   </mx:itemRenderer> 

  </mx:List> 

  <mx:VBox  verticalAlign="middle" horizontalAlign="center" width="100%" height="100%"> 

  <mx:VideoDisplay id="player" width="300" height="200" backgroundColor="black" /> 

  <mx:Button  id="btnSave" label="Save" visible="false" click="onSave()" /> 

  </mx:VBox> 

  </mx:HBox> 

  </mx:Panel> 

  </mx:VDividedBox>

To keep the code sample short I’ve omit a bit of the original code from the display of the movies found during the search.
Don’t be put off by the quantity of tags. The MXML is quite straightforward. Most of the tags define the ‘itemRenderer’s used by the list control to show the video thumbnails. The other elements, the panels, the video display, the save button and so on, are just single elements with a few attributes to refine them.
With the interface all laid out it’s time to dig into the code. The search code remains exactly the same, but we’ve now added a thumbClick event handler which is called when the user double clicks on a thumbnail in the search panel. The thumbClick handler starts the request for the HTML page associated with the YouTube video. The onHTMLComplete method receives the HTML code for the page as text. It then calls getFLVURL to get the URL for the FLV data for the movie.
The code for this is shown below:

<mx:Script> 

  <![CDATA[ 

  import
 mx.rpc.events.ResultEvent; 

  import
 mx.rpc.http.HTTPService; 

  import
 com.adobe.serialization.json.JSONDecoder; 

namespace
 atom = "http://www.w3.org/2005/Atom"
; 

    namespace
 media = "http://search.yahoo.com/mrss/"
; 

private
 function
 onSearch() : void
 { ...} 

    private
 function
 onSearchResult( event:ResultEvent ) : void
 { ... } 

public
 function
 getFLVURL( sHTML:String ) : String { 

    var
 swfArgsFound:Array = sHTML.match( /var swfArgs =(.*?);/
 ); 

    var
 swfArgsJS:JSONDecoder = new
 JSONDecoder( swfArgsFound[1] ); 

    var
 swfArgs:Object = swfArgsJS.getValue(); 

    var
 url:String = ‘http://youtube.com/get_video.php’
; 

    var
 first:Boolean = true
; 

    for
( var
 k:String in
 swfArgs ) { 

      if
 ( swfArgs[k] != null
 && swfArgs[k].toString().length >  0 ) { 

        url += first ? ‘?’
 : ‘&’
; 

        first = false
; 

        url += k+‘=’
+escape(swfArgs[k]);    

      } 

     } 

    return
 url; 

  } 

private
 function
 onHTMLComplete( movie:Object, event:Event )  : void
 { 

    var
 loader:URLLoader = event.target as
 URLLoader; 

    var
 movieID:String = movie.id.split( /=/ )[1]; 

    var
 flvStream:URLStream = startRequest( movieID+‘.flv’
,  getFLVURL( loader.data ) ); 

    startRequest( movieID+‘.jpg’
,  movie.thumbnail ); 

   flvStream.addEventListener(Event.COMPLETE,function
(event:Event):void
 { 

      downloadProgress.visible = false
; 

      updateLocalVideos(); 

    } ); 

    downloadProgress.source =  flvStream; 

    downloadProgress.visible = true
; 

  } 

private
 function
 onThumbClick() : void
 { 

    var
 htmlLoader:URLLoader = new
 URLLoader(); 

     htmlLoader.addEventListener(Event.COMPLETE, 

      function
( event:Event ) : void
 { onHTMLComplete( thumbList.selectedItem,  event ); } ); 

    htmlLoader.load(new
 URLRequest(thumbList.selectedItem.id)); 

  }

Let me step back for a second and talk briefly about Flash Video. YouTube, like any other site that uses a Flash player to show videos, uses FLV as the movie format. What YouTube does is provide their Flash video application with enough data for it to construct a ‘source’ URL for it’s video display object. That ‘source’ URL is get_video.php along with a set of parameters. Those parameters are stored in a Javascript variable called ‘swfVars’ which is embedded in the page.
The GetFLVURL takes the Javascript from the page and extracts the ‘swfVars’. It then uses the JSONDecode class provided by the as3corelib (http://code.google.com/p/as3corelib/) to decode the Javascript into an ActionScript object. From there it construct the FLV URL from the parameters in the ActionScript object.
The weakness in this example application is that it uses this ‘screen scraping’ technique to get to the FLV URL. Unfortunately there is no easier way to do it. If the format of the YouTube HTML changes, then this code might need to be rewritten to compensate for the changes.
Once the FLV URL is constructed the onHTMLComplete method calls startRequest on both the thumbnail and the FLV to download the data and store it locally. The code for this is shown below:

private
 function
 onReqComplete( fileName:String, event:Event  ) : void
 { 

    var
 stream:URLStream = event.target as
 URLStream; 

    var
 byteLength:int = stream.bytesAvailable; 

    var
 bytes:ByteArray = new
 ByteArray(); 

    stream.readBytes( bytes, 0, byteLength  ); 

    stream.close(); 

  if
 ( File.applicationStorageDirectory.exists == false
 ) 

        File.applicationStorageDirectory.createDirectory(); 

    var
 f:File = new
 File(  File.applicationStorageDirectory.nativePath + File.separator + fileName ); 

    var
 fs:FileStream = new
 FileStream(); 

    fs.open( f, FileMode.WRITE ); 

    fs.writeBytes( bytes, 0,  byteLength ); 

    fs.close(); 

  } 

  private
 function
 startRequest( fileName:String, url:String )  : URLStream { 

    var
 req:URLStream = new
 URLStream(); 

    req.addEventListener(Event.COMPLETE, function
 ( event:Event ) : void
 { onReqComplete( fileName, event ); } ); 

    req.load( new
 URLRequest( url ) ); 

    return
 req; 

  }

The startRequest builds a URLStream object to get the data for the given URL. It then sets up onReqComplete as an event handler for when the download is complete. The onReqComplete uses the AIR File API to store the data, which is read directly into an AIR ByteArray class, into a file stored in the application storage directory. The application storage directory is maintained by AIR automatically for you.
Once the files are downloaded the updateLocalVideos method is called. This method, shown below, updates the list of local videos in the downloaded videos panel.

private
 function
 updateLocalVideos() : void
 { 

    var
 fileNames:Object = new
 Object(); 

    for
 each
 ( var
 file:File in
 File.applicationStorageDirectory.getDirectoryListing() ) { 

      var
 fName:String = file.name.split( /[.]/
 )[0]; 

      fileNames[ fName ] = true
; 

    } 

    var
 movieList:Array = []; 

    for
( var
 fileKey:String in
 fileNames ) { 

      var
 thumb:File = new
 File(  File.applicationStorageDirectory.nativePath + File.separator + fileKey + ‘.jpg’
 ); 

      var
 movie:File = new
 File(  File.applicationStorageDirectory.nativePath + File.separator + fileKey + ‘.flv’
 ); 

      if
 ( thumb.exists && movie.exists ) 

        movieList.push( {  thumbnail: thumb, movie: movie } ); 

    } 

    localList.dataProvider =  movieList; 

  }

To do that the method uses the getDirectoryListing method, provided by the AIR File API, to get all of the files in the application storage directory. It then chops off the extensions and creates a list of just the file names. From there builds the list of local movies by iterating through the file names and checking to make sure that both the ‘.flv’ file for the video, and the ‘.jpg’ file for the thumbnail, are available.
With the list of local videos in hand the method sets the dataProvider of the local list to the movie list that it generated.
From there the final few functions handle the playback and the saving of the FLV to the desktop. These methods are shown below:

private
 function
 onMovieClick() : void
 { 

    player.source =  localList.selectedItem.movie.url; 

    btnSave.visible = true
; 

  } 

  private
 function
 onSave() : void
 { 

    var
 f:File = File.desktopDirectory; 

    f.addEventListener(Event.SELECT,onSaveSelect); 

    f.browseForSave(“Save FLV”
); 

  } 

  private
 function
 onSaveSelect( event:Event ) : void
 { 

    var
 f:File = event.target as
 File; 

    var
 lf:File = localList.selectedItem.movie as
 File; 

    lf.copyTo( f, true
 ); 

  } 

  ]]> 

  </mx:Script> 

</mx:WindowedApplication>

The onMovieClick method is called when the user double clicks on a movie in the local list. It just sets the source of the VideoDisplay to the url of the local ‘.flv’ file.
The onSave method is called when the user clicks the Save button. It pops up a Save dialog using the AIR File API. If the user hits Save then the onSaveSelect method is called which copies the ‘.flv’ file from the local storage directory to the location they specify. You can see the interface for this in action in Figure 3.

Figure 1-3. The save window

On it’s face it seems like a lot of code, but it’s really not all that daunting when you break it down into it’s component pieces.

Your Next Steps

I hope you can leverage the code that I have presented in this article in your own work. There are some good reusable fragments including the file request and storage code in on ReqComplete. The JSON parsing in GetFLVURL can also come in handy when dealing with websites that lack a web services interface. Or in this case, have a web service interface that lacks the information you require.
If you do make use of this code, be sure to let me know. You can contact me directly through my website; http://jackherrington.com.

We’ve been invited by Carlos to make some tutorials on what we know best, Flash and Flex.

This will be the first part of our first tutorial: How to build a contact manager in AIR using XML.

For the first part of this tutorial we’ll be reading, parsing and searching an XML into an AIR application and going through the whole getting it to compile and exporting a release version. So first things first, you’ll need Flex 3 SDK, or Flex 3 IDE, that you can get for free over at Adobe, or the 30 day trial if you go for the builder.

After you’ve installed it we’re good to go. Open Flex, and create a new Flex Project. Select the Desktop Application option and we’re all set to start coding.

First we must start by adding an initialize handler to our application so that we know when we can start working.

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" initialize="{init()}" layout="absolute" viewSourceURL="srcview/index.html" height="451">
<!-- // -->
<mx:Script>
<![CDATA[
import mx.collections.XMLListCollection;

Then we create our variables and initiate them, set an Event handler to handle the loading of the XML File, and start the loading process.

private var myXml:XML;
private var myLoader:URLLoader;
private var myContactsCol:XMLListCollection;

The handler is simple, it casts the received data to an XML Object and initializes the XMLListCollection to our full data. (More on why we use a XmlListCollection on part 2)

public function init():void
{
var myReq:URLRequest = new URLRequest('data.xml');
myLoader = new URLLoader()
myLoader.addEventListener(Event.COMPLETE, dataComplete);
myLoader.load(myReq);
}

Now here's where the 'magic' happens the search and updating of our datagrid.

private function dataComplete(e:Event):void
{
myXml = new XML(myLoader.data.toString());
myContactsCol = new XMLListCollection(myXml..contact);
myDg.dataProvider = myContactsCol;
myDg.invalidateList()
}

I know this line might look scary but it really isn't, it's simple E4X at work, what we do is to get an XMLList out of our xml where the name node of each contact node matches our expression, in this case any name that contains our search string. And then we refresh the visual part of the datagrid.

private function updateList():void
{
myContactsCol = new XMLListCollection(myXml..contact.(name.toLowerCase().indexOf(search_txt.text.toLowerCase()) != -1 ))
myDg.dataProvider = myContactsCol;
myDg.invalidateList()
}
]]>
</mx:Script>

Now for the MXML part of our application, it’s simple enough we drag our datagrid to our workspace, name it and set the names for it’s columns, note the dataField property this related directly to the name of the XML Nodes.

<mx:DataGrid bottom="60" top="10" left="10" id="myDg">
<mx:columns>
<mx:DataGridColumn headerText="Name" dataField="name"/>
<mx:DataGridColumn headerText="Telphone" dataField="telephone"/>
<mx:DataGridColumn headerText="Email" dataField="email"/>
</mx:columns>
</mx:DataGrid>
<mx:Label x="10" text="Search:" bottom="10"/>
<mx:TextInput x="65" id="search_txt" bottom="10"/>

And finally we just set the click handler for the GO! button to update our search results.

<mx:Button x="233" label="Go!" id="go_btn" click="{updateList()}" bottom="10"/>
</mx:WindowedApplication>

Now in order to publish the application we need to create a certificate (or use an existing one), this can be easily done by using create new certificate option, which will create an unsigned certificate, or by getting one from Twathe or Verisign.

After that you just save your certificate, select it and hit finish!

We now have a fully working Air application.

In part 2 we’ll go through Editing and saving the file, how to set up our bindings so that both the Xml, and the results are updated automatically, go through the data types that we use and how to use an auto-updating library for your application.

Download the support files