In this section, we’ll add network monitoring to the AirTube application. Using a URL- Monitor object, we can monitor whether or not the system is currently connected to the internet, and we can configure the application to run in online or offline mode automatically.
We first add a property to the ApplicationData class. The networkAvailable property is a Boolean property that we can use to determine whether the application has network availability. Listing 6.3 shows what ApplicationData looks like with this added property.
package com.manning.airtube.data { import flash.events.Event;
import flash.events.EventDispatcher;
public class ApplicationData extends EventDispatcher { static private var _instance:ApplicationData;
private var _videos:Array;
private var _currentVideo:AirTubeVideo;
private var _downloadProgress:Number;
private var _online:Boolean;
private var _networkAvailable:Boolean;
[Bindable(event="videosChanged")]
public function set videos(value:Array):void { _videos = value;
Listing 6.3 Adding a networkAvailable property to the ApplicationData class Test for network connection Connect to
socket
dispatchEvent(new Event("videosChanged"));
}
public function get videos():Array { return _videos;
}
[Bindable(event="currentVideoChanged")]
public function set currentVideo(value:AirTubeVideo):void { _currentVideo = value;
dispatchEvent(new Event("currentVideoChanged"));
}
public function get currentVideo():AirTubeVideo { return _currentVideo;
}
[Bindable(event="downloadProgressChanged")]
public function set downloadProgress(value:Number):void { _downloadProgress = value;
dispatchEvent(new Event("downloadProgressChanged"));
}
public function get downloadProgress():Number { return _downloadProgress;
}
[Bindable(event="onlineChanged")]
public function set online(value:Boolean):void { _online = value;
dispatchEvent(new Event("onlineChanged"));
}
public function get online():Boolean { return _online;
}
[Bindable(event="networkAvailableChanged")]
public function set networkAvailable(value:Boolean):void { if(value != _networkAvailable) {
_networkAvailable = value;
if(!_networkAvailable) { online = false;
videos = null;
}
dispatchEvent(new Event("networkAvailableChanged"));
} }
public function get networkAvailable():Boolean { return _networkAvailable;
}
public function ApplicationData() { }
static public function getInstance():ApplicationData { if(_instance == null) {
_instance = new ApplicationData();
239 Adding network monitoring to AirTube
}
return _instance;
} } }
You can see that the setter method does little more than simply assign the new value to the private property. In this case, we want to set the application mode to offline if the network is unavailable. Also in that event, we set the videos array to null to ensure the user can’t try to view videos that are only available online if the system doesn’t have network availability.
The next step is to add a URLMonitor object to the service class. You can edit Air- TubeService.as. First add a new private property called _monitor as shown in the fol- lowing line of code:
private var _monitor:URLMonitor;
Then modify the constructor as follows:
public function AirTubeService() { _proxied = new YouTubeService();
_proxied.addEventListener(YouTubeServiceEvent.VIDEOS_LIST_BY_TAG, getVideosByTagsResultHandler);
var databaseFile:File =
➥File.applicationStorageDirectory.resolvePath("AirTube.db");
_connection = new SQLConnection();
_connection.addEventListener(SQLEvent.OPEN, databaseOpenHandler);
_connection.openAsync(databaseFile, SQLMode.CREATE);
_monitor = new URLMonitor(new URLRequest("http://www.youtube.com"));
_monitor.addEventListener(StatusEvent.STATUS, networkStatusHandler);
_monitor.start();
}
As you can see, we’re using a URLMonitor object to monitor connectivity to www.you- tube.com. Next add a networkStatusHandler() method as follows:
private function networkStatusHandler(event:StatusEvent):void {
ApplicationData.getInstance().networkAvailable = _monitor.available;
}
This method merely sets the networkAvailable property of ApplicationData when network connectivity status changes occur. That triggers the changes to the online and videos values as well, as we saw in listing 6.3.
The only remaining step is to update AirTube.mxml to indicate the current net- work status to the user. All we need to do is add a label component as shown in the following code. The bolded label is the new code. The rest of the code is shown to give you context:
<mx:VBox width="100%">
<mx:Label text="AirTube: Adobe AIR and YouTube" />
<mx:HBox>
<mx:Label text="tags:" />
<mx:TextInput id="tags" text="Adobe AIR" />
<mx:Button label="Search For Videos" click="getVideosByTags();" />
<mx:Button label="Online" toggle="true"
selected="{ApplicationData.getInstance().online}"
click="changeOnlineStatus();" />
<mx:Label text="{ApplicationData.getInstance().networkAvailable ?
➥'Network Available' : 'Network Unavailable'}" />
</mx:HBox>
<mx:TileList id="videoList"
dataProvider="{ApplicationData.getInstance().videos}"
width="100%" height="400" columnCount="2"
horizontalScrollPolicy="off"
itemRenderer="com.manning.airtube.ui.VideoTileRenderer" />
<mx:Button label="Play Selected Video" click="playVideo();"
enabled="{videoList.selectedItem != null}" />
</mx:VBox>
This new label uses data binding to display the network availability status to the user.
That’s all we need to do to update the AirTube application to support basic net- work status changes.