Nice thing about my job is how varied it is – this time around I’m jumping into HTML AIR apps and the first thing on the list (actually this is the second, the first thing is setting up the AIR debugger… ) is to be able to detect the presence of the network. Its not too difficult, here we go…
Assumptions
First, I assume that you have Dreamweaver with the AIR extension installed. Next I assume that you know how to create the AIR runtime.
If you want to debug this then you should have the AIR SDK present on your machine – debugging is out of scope of this article but will pen some notes on how to do it at some point.
Setup
What I have done here is written an object that will do the “hard work” for you, its just copy and paste. Before we get to that you must first set up your HTML page with the necessary includes – note the script tags in the following bare-bones example:
<html>
<head>
<title>Untitled Document
<script language="javascript" src="scripts/AIRAliases.js"></script>
<script src="servicemonitor.swf" type="application/x-shockwave-flash"></script>
</head>
<body>
</body>
</html>
You will notice that the first SCRIPT tag references AIRAliases.js (available in the “frameworks” folder within the AIR SDK) – this is necessary only if you are using the shortcut reference to AIR specific methods/functions, which I am. Next you will notice the second SCRIPT tag with the reference to “servicemonitor.swf” (also available in the AIR SDK). This second file is an ActionScript library that encapsulates the service monitor framework which is separate from the AIR framework.
Code
Lets now take a look at the bit of code that I’ve written which is where the network detection setup happens:
var network = (function(){
var monitor;
function initNetwork(b,u,l){
if (air){
setNetworkDefaults(b);
startNetMonitor(u,l);
}
}
function startNetMonitor(u,l){
monitor = new air.URLMonitor(new air.URLRequest(u));
monitor.addEventListener(air.StatusEvent.STATUS,l);
monitor.start();
}
function setNetworkDefaults(b){
air.URLRequestDefaults.manageCookies = air.URLRequestDefaults.useCache = b;
}
function getMonitorStatus(){
return monitor.available;
}
return{
initNetwork:initNetwork,
getMonitorStatus:getMonitorStatus
}
})();
This is designed to be left as-is, you configure it via its initNetwork method where you set your own function to be called when the network status changes. The getMonitorStatus method allows you to go get the network status whenever you want.
Lets see how to use them:
network.initNetwork(urlRequestDefaults,URLtoMonitor,CallBackFunc)
As mentioned this inits the monitor, the following table describes the required arguments.
| Argument | Type | Description |
| URLtoMonitor | String | This is the URL to monitor. You could set it as ‘http://www.google.com’ if you are simply looking to monitor the network in general, or maybe it makes sense to use a specific URL so that you know if your web services are up or not. |
| CallBackFunc | Function | This is your custom callback function which will be called each time the network status changes. A simple boolean is returned. |
| urlRequestDefaults | Boolean | The ability to set 2 AIR network defaults to true or false as you wish – this isn’t related to network monitoring, just the network in general. This will set the values for the following two AIR network options:
IMO passing false here is a good idea. |
An example of initing the network monitor also must involve a load listener so that it is inited after the document has been loaded:
...
window.addEventListener('load',
function(){
network.initNetwork(false,'http://www.cnn.com',myCallback);
}, false
);
...
network.getMonitorStatus()
You can call this at any point to get the current network status. A little redundant yet maybe useful to some. This will return a boolean.
Lastly, if the variable “network” is reserved by your particular application then feel free to change it.
To test your code run your AIR app and make sure that it is either printing out something to the ADL console orprinting something to the screen that tells you the status of the network. Maybe something like this:
...
window.addEventListener('load',
function(){
network.initNetwork(false,'http://www.cnn.com',myCallback);
}, false
);
...
function myCallBack(bool){
var el = document.getElementsByTagName('body');
el[0].innerHTML = bool ? 'Network is present' : 'Network is disconnected';
}
...
Now, assuming you have all the other code in place and are looking at your AIR app on your desktop, simply enable/disable your network by unplugging your Ethernet or disabling WiFi. Give it a few seconds and you will see your app telling you your network status.
