My new project is a simple one based on the very well done Twitter API. The application will consist of one simple form field. The end user enters a search term, hits the button, and then results from Twitter are displayed below.
Begin the project by following the steps I mentioned in the previous entry. I named my project jqTwitterAIR, but really anything would be fine.
I cleaned out the HTML file generated by default and used the following HTML within the BODY tags:
<div id="searchFormDiv">
<form id="searchForm">
<input type="text" id="searchTerm" value="camden"> <input type="button" id="searchButton" value="Search">
</form>
</div>
<div id="results"></div>
<div class="acode" style="overflow: auto; padding: 10px;" ><div style="overflow-x: visible;"><mt:CodeBeautify language="actionscript">
<br/><br/>
The design here is rather simple. A div on top to hold the form and a div beneath it for the results. What's with the default value camden in the search box? Once you've run your AIR application a few hundred times you get <i>real</i> tired typing in sample data. I was going to remove that before writing this blog entry, but it's one of those "obvious" tips for development that I thought I'd share.
<br/><br/>
Ok, now for the JavaScript. I begin with a simple event handler (tied to the document loading) that listens to my form.
<br/><br/>
<div class="acode" style="overflow: auto; padding: 10px;" ><div style="overflow-x: visible;"><mt:CodeBeautify language="actionscript">
$(document).ready(function() {
$("#searchButton").click(function() {
var searchTerm = $("#searchTerm").val()
searchTerm = $.trim(searchTerm)
if(searchTerm == '') return false
$("#results").html("<i>Searching...</i>")
searchTwitter(searchTerm)
return false
})
})
There isn't much here really. I get the value from the form field, trim it, and if there is actually data I add a simple loading message to the results page and then call my searchTwitter function. Notice the return false statement. This stops the form from actually submitting.
Next up is the searchTwitter function:
function searchTwitter(str) {
var searchURL = "http://search.twitter.com/search.json?"
$.getJSON(searchURL,{q:str},function(r) {
$("#results").html("")
//r.results are the results
if (r.results != null) {
for (var i = 0; i < r.results.length; i++) {
var result = r.results[i]
drawTwitterResult(result)
}
$(".twitterResult").corner("round")
}
})
}
This code makes use of the Twitter API. (Which, from what I can see, kicks major butt. It was incredibly easy to use and returns quite a lot of useful information. Hey Google, take a look - this is how APIs should be done.) In this case the API returns JSON so I made use of the jQuery getJSON function. Also notice that AIR will have no problem calling this external URL. Strictly speaking, you don't need AIR for this. Twitter's API supports JSONP, but for this example I figured I'd use the power of AIR. Once the results are returned, I clear out the loading message and call a new function on each result. Oh, I also made use of a nice rounded corners plugin. (You can find it here: http://jquery.malsup.com/corner.) As we all know, you can't be Web 2.0 with square corners.
The final piece of code handles rendering the Twits:
function drawTwitterResult(tweet) {
var s = "<div class='twitterResult'>"
s+="<img src='"+tweet.profile_image_url+"' class='twitterProfileImage'>"
s+=tweet.text+="<br/>"
s+="<div class='twitterByline'>"+tweet.from_user+' at '+tweet.created_at+"</div>"
s+="<div style='clear:both'></div>"
s+="</div>"
$("#results").append(s)
}
This is fairly simple. I use a bit of CSS and lay out the image, username, date, and actual text of the twit. Clicking the run button and searching for cfjedimaster shows the following:
Alright - now that we have an AIR application we can run, how do we create a file people can install? We need to export the project as an Adobe AIR package. You can do this by clicking the orange AIR icon in the toolbar, or by selecting File/Export/Adobe AIR Package. On the first page, simply leave all the options as is.
The next step asks you to sign your AIR application. This sounds scary, but is pretty harmless. You need to create a simple certificate to go along with your AIR application. Once you get into "real" AIR development you will want to buy a certificate, but Adobe (and Aptana) make it easy to generate a certificate you can sign yourself, all for free. Click the configure certificates link to bring up the AIR Certificates panel. Click the add button and create a new certificate. Be sure to select "Create a new certificate". The name doesn't really matter, but make sure you pick a password you will remember. The only required item outside of the name and password is the publisher name.
After you've created the certificate, click OK to leave the certificates panel, and then select the certificate. Enter the password you just used and then click next.
The next page asks you which files should be included in the package. If you created any temporary files during your development you should uncheck them now. Otherwise, just leave it as is. Wrap everything up by clicking Finish. Voila - you now have an AIR file.
You can download the my AIR file here. Enjoy!
More in This Series
]]>