Home >
In my last blog entry I talked about how you can use Aptana Studio to build jQuery-powered AIR applications. In today's blog entry I'm going to take it a step further. First, I'll build an real application. Not a very powerful one, mind you, but something a bit more useful then the demo I created before. After that, I'll demonstrate how to publish your AIR project to an AIR file that can be distributed to the world. All you have to do at that point is slap a price tag on it and laugh your ways till millions.
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:
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:
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:
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!
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
Tag Cloud
Podcasts & Screencasts
@InsideRIA on Twitter
Follow InsideRIA on Twitter
Facebook Application Development
Wow! a very complicated program...
A littl off topic but is there a way to set the proxy of a Air application? I use multiple browsers and each have a different proxy setting, can I set them manually from the Air application?
To be honest, I don't know. I don't remember seeing any proxy support in Flex network stuff, but I could be wrong.