AIR is meant to facilitate applications that work when online and offline. For example, if you developed an AIR application to manage your blog, you would want to be able to write blog posts whether you were online or offline. To accomplish this, the application would do one of two actions depending on whether it had an internet connection. If it were online, it would take your post and upload it. If it weren't online, it would store it (either in a file or in a local SQLite database).
VERSION: This tutorial is current for AIR Beta 3.
Today, you are going to build a very simple AIR application. If will be a window that will have three main items: a search box, a submit button, and an image that indicates if you are connected to the Internet. If a user types something into the text input and hits the search button, it will open up your browser and search for that term on Google. However, if you are not connected to the Internet, the "search" button will be disabled.
AIR has two specific functions for monitoring your internet connection, URLMonitor [ Flex | Javascript ] and SocketMonitor [ Flex | Javascript ]. These classes both implement the ServiceMonitor Class [ Flex | Javascript ]. To monitor your connection you just follow the steps below:
- Create a URLRequest with the URL that you want to monitor. You can set its mode to "HEAD" to avoid getting the entire page every time.
- Create a new URLMonitor and assign it the URL that you want it to monitor.
- Add a new Event Listener for the URLMonitor that listens for the StatusEvent.STATUS event and create the function to act on that event.
- Set how often you want to the URLMonitor to run and start it.
If any of this seems confusing, don't worry, you will look at each item in the code below. Also, the full source code will be available for both examples.
Coding the Example
For the application, you are going to create a function that gets run when the application starts. This will be where you will create your URLRequest and URLMonitor objects. For Flex, this will be a function that responds to the CreationComplete event, for the HTML/Javascript example, this will be a function that responds to the "onload" event of the body tag.
Flex Code:
import flash.net.navigateToURL;
import flash.net.URLRequest;
// DEFINE The Variable that will hold the URLMonitor
private var monitor:URLMonitor;
private function init():void {
// URLRequest that the Monitor Will Check
var url:URLRequest = new URLRequest("http://www.davidtucker.net/index.php");
// Checks Only the Headers - Not the Full Page
url.method = "HEAD";
// Create the URL Monitor and Pass it the URLRequest
monitor = new URLMonitor(url);
// Set the Interval (in ms) - 3000 = 3 Seconds
monitor.pollInterval = 3000;
// Create the Event Listener that Will Be Fired When Connection Changes
monitor.addEventListener(StatusEvent.STATUS,on_connection);
// Start the URLMonitor
monitor.start();
}
JavaScript Code:
function onLoad() {
// URLRequest that the Monitor Will Check
var request = new air.URLRequest( "http://www.davidtucker.net/index.php" );
// Checks Only the Headers - Not the Full Page
request.method = "HEAD";
// Create the URL Monitor and Pass it the URLRequest
monitor = new air.URLMonitor( request );
// Create the Event Listener that Will Be Fired When Connection Changes
monitor.addEventListener( air.StatusEvent.STATUS, doStatus );
// Start the URLMonitor
monitor.start();
}
Hopefully you can see that there is not a great deal of difference between the two. Calling an AIR function within Javascript is just as easy as it is in Flex.
NOTE: If you want this javascript to function properly, be sure to include the AIRAliases.js file and the servicemonitor.swf file in your application. If you do not, this code will not function properly. Your code can function without the AIRAliases.js - the method names are just longer. However, you cannot use the URLMonitor or SocketMonitor without the servicemonitor.swf file.
Flex Application
Source Code
HTML / Javascript Application
Source Code
