Home › Blogs › bricemason's blog ›

Adobe AIR Series - Truveo Sample App

Enable the Subscriptions block here!

The last few posts, we've been exploring the basics of developing AJAX based Adobe AIR applications. Today, we put it all together to create simple search functionality against the XML API of the Truveo video search service.

We'll start off by creating the file structure as shown in Figure 1 below. 

<root>
   +--- style
   |      +--- main.css
   +--- script
   |      +--- AIRAliases.js
   |      +--- main.js
   |
   +--- application.xml
   +--- index.html
Figure 1 - Truveo AIR application file structure

The application descriptor file is basic and can even be borrowed and modified from any of the previous examples showcased in this series. Likewise, the main HTML code is simple (see Listing 1). 

<html>
<head>
<title>Truveo AIR Application</title>
<link rel="stylesheet" type="text/css" href="style/main.css" />
<script type="text/javascript" src="script/AIRAliases.js"></script>
<script type="text/javascript" src="script/main.js"></script>
</head>

<body>

    <div id="cntr_outer">
        <h1>Truveo AIR Application</h1>
        
        <div id="cntr_search">
            <input id="txt_search" type="text"   value="" />
            <input id="btn_search" type="button" value="Search" onclick="doTruveoSearch();" />
        </div>  
        
        <div id="cntr_results"></div>  	
    </div>

</body>
</html>
Listing 1 - index.html

The code consists of a couple JavaScript's hooked in, a stylesheet, and basic user interface providing a text input and button. The first script file named AIRAliases.js is shipped with the AIR SDK as part of the framework. It's used simply to shorten the code we write to use AIR features. The other script file named main.js contains the main logic of the application. As you can see, we have configured an onclick event on the search button to invoke the doTruveoSearch JavaScript function. The full source code of main.js is shown in Listing 2 below. 

function doTruveoSearch() {
	// get the search criteria
	var searchCriteria = document.getElementById( "txt_search" ).value;
	
	// create a URLLoader object
	var myLoader = new air.URLLoader();
	
	// configure the request to the Truveo service
	var myRequest = new air.URLRequest( "http://xml.truveo.com/apiv3?" +
									    "appid=someAOLDevId"      +
										"&method=truveo.videos.getVideos" +
										"&query=" + searchCriteria );
	
	// set the request completion event handler
	myLoader.addEventListener( air.Event.COMPLETE, completeHandler );
	
	// perform the search
	myLoader.load( myRequest );
}

function completeHandler( evt ) {
	var msg = "";
	// clear the results container
	document.getElementById( "cntr_results" ).innerHTML = "";
	
	// get the text data returned
	var truveoData = evt.target.data;
	
	// get the data as XML
	var domParser      = new DOMParser();
	var xml_truveoData = domParser.parseFromString( truveoData, "text/xml" );
	
	// get the videos
	var videoResults = xml_truveoData.getElementsByTagName( "Video" );
	
	for( var i = 0; i < videoResults.length; i++ ) {
	// get the title
	var tmpTitle       = videoResults[i].getElementsByTagName( "title" )[0].childNodes[0].nodeValue;
	// get the description
	var tmpDescription = videoResults[i].getElementsByTagName( "description" )[0].childNodes[0].nodeValue;
	// get the thumbnail
	var tmpThumbnail   = videoResults[i].getElementsByTagName( "thumbnailUrl" )[0].childNodes[0].nodeValue;
		
		msg += "<div>";
		msg += "<p>";
		msg += "<b>" + tmpTitle + "</b><br/>";
		msg += tmpDescription;
		msg += "</p>";
		msg += "<img src=\"" + tmpThumbnail + "\" />";
		msg += "</div>";
	}

	document.getElementById( "cntr_results" ).innerHTML += msg;
}
Listing 2 - main.js

The main script file begins with the definition of the doTruveoSearch function. This uses the URLLoader and URLRequest classes of the AIR framework. They're used for configuring and executing requests for data to be downloaded. As you can see, we're sending a request to the XML interface of the Truveo search service, using the value found in the search box as the search criteria. Coupled with our execution of the request, we have also configured an event handler to account for the completed request. This is demonstrated in the completeHandler function. The handler retrieves the result of the request, creates a DOM from the text returned, and uses some DOM processing to generate the screen shown in Figure 2 below using the search string nfl.


Figure 2 - Sample request

This sample application is simple but gives us many places to go to create a more sophisticated application. For instance with a few extra lines of code, we could attach click handlers to each thumbnail and call the navigateToURL function in AIR to open the video in a new browser window. For more information on Truveo and AIR, check out the following links:

» Submitted by bricemason on November 25, 2007 - 2:12am.