A Tour of New -- Flex, AIR, OpenAIM & clientLogin: Part 2
In my last post I talked about all the new developments not only in the world of AOL API development but with supporting technologies such as Flex 3 and AIR 1.0 from Adobe and a taste of the Ext JS JavaScript framework. Today I'll expand the tour to include a look at the latest version of the Ext JS framework which includes many helpful features for creating AJAX flavored AIR apps. I'll then complete an OpenAIM/Mapquest AIR mashup which will map the top 10 ranked AIM Fight users.
As you may recall, we've played around with some AIR apps for a while now, always configuring the traditional sandboxed environment which segregates the AIR system environment from the browser environment. If you're new to AIR development, it can be a little confusing exchanging data over the bridge which separates the two. However the latest release of Ext JS (2.0.2) alleviates this complexity by including an adapter for AIR, simplifying the process of developing AJAX flavored AIR applications. Where before we had a directory structure like this:
/ +--- assets | +--- script | | +--- Ext-2.0 | | +--- root.js | | +--- ui.js | | +--- AIRAliases.js | | | +--- style | +--- main.css | +--- application.xml +--- root.html +--- ui.html
It's now been chopped down to this:
/ +--- assets | +--- script | +--- Ext-2.0.2 | +--- AIRAliases.js | +--- AIRIntrospector.js | +--- application.xml +--- index.html
The biggest change with the directory structure is the elimination of the root and ui HTML and JavaScript files. They were used to define the AIR system environment sandbox and the browser environment sandbox. Thanks to the Ext AIR adapter, Ext JS will play nice in the AIR environment on its own. This makes the development of AIR AJAX apps much more natural and intuitive. The script and stylesheet hooks in this new scheme look like this:
<link rel="stylesheet" type="text/css" href="assets/script/ext-2.0.2/resources/css/ext-all.css" /> <link rel="stylesheet" type="text/css" href="assets/script/ext-2.0.2/air/resources/ext-air.css" /> <script type="text/javascript" src="assets/script/AIRAliases.js"></script> <script type="text/javascript" src="assets/script/AIRIntrospector.js"></script> <script type="text/javascript" src="assets/script/ext-2.0.2/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="assets/script/ext-2.0.2/ext-all.js"></script> <script type="text/javascript" src="assets/script/ext-2.0.2/air/ext-air.js"></script> <script src="http://btilelog.access.mapquest.com/tilelog/transaction?transaction=script& key=YOUR_KEY&ipr=true&itk=true&v=5.2.0" type="text/javascript"></script>
Generally, the asset links above should look familiar from the previous projects we've done. However notice the ext-air.css and ext-air.js files which are used specifically for AIR development. I've also added the Adobe AIRIntrospector in this project as it is an incredibly useful debugging tool for AIR development. Since we'll be using Mapquest with OpenAIM, I've added that script in there as well. Before we map, we'll need some data. Let's get started retrieving the AIM Fight ranked users.
Obtaining the locations of AIM Fight ranked users is a simple call to the Web AIM server API. My onReady block uses the following code:
Ext.onReady( function() {
var URL_GET_RANKED_USERS = "http://api.oscar.aol.com/location/getRankedUsers";
var STRING_DEVELOPER_ID = "YOUR_ID";
// AIM Fight Ranked User data
var o_rankedUsers;
Ext.Ajax.request(
{
url: URL_GET_RANKED_USERS,
method: "GET",
disableCaching: false,
params: {
f: "json",
k: STRING_DEVELOPER_ID,
maxLocations: 10
},
success: function( r, o ) {
o_rankedUsers = Ext.util.JSON.decode( r.responseText );
air.Introspector.Console.log( o_rankedUsers );
},
failure: function( r, o ) {
alert( "Error occurred retrieving AIM Fight Ranked User Data" );
}
}
);
} );
This is just a simple AJAX call using Ext which queries the AOL Web AIM service for the top 10 AIM Fight ranked user locations. After decoding the response in the success block, the AIR Introspector is used to dump a graphical representation of the object. This really makes things easier and I would recommend using the introspector at every opportunity, especially if you're new to AIR development. Not only does it dump objects for easy viewing but it also exposes the DOM, lists linked assets, computed styles, and information surrounding AJAX calls. A portion of the o_rankedUsers object in the introspector is shown in Figure 1.
Figure 1 - the
o_rankedUsers object
You can see how useful this is especially if you're working with a new API. Now that we have some basic data which includes latitude and longitude, we can map it. We'll just add the following code to the success block above to build the map with some points of interest.
// create a map o_map = new MQTileMap( document.getElementById( "outMap" ) ); // process the user information for( var i = 0; i < o_rankedUsers.response.data.locations.length; i++ ) { o_location = new MQLatLng( o_rankedUsers.response.data.locations[i].lat, o_rankedUsers.response.data.locations[i].lon ); // center the map to the top ranked user if( i == 0 ) { o_map.setCenter( o_location, 1 ); } // create the point of interest o_poi = new MQPoi( o_location ); o_poi.setInfoTitleHTML( o_rankedUsers.response.data.locations[i].name ); // add the POI to the map o_map.addPoi( o_poi ); }
The code above generates a map with points of interest plotted using the location data from the getRankedUsers method call. The output is shown in Figure 2.
Figure 2 - The Generated Map
We've touched on a couple of different topics in a short amount of time but I hope it's gotten you excited to dive in and try some of them with you own mashup.
- bricemason's blog
- Login or register to post comments