Detecting the network connection type with Flex 4.5

As you may already be aware of, Flex 4.5 is the next version of Flex that is also optimised for mobile development. That means that you can create compelling Rich Internet Applications with the Flex framework and deploy them on mobile Android devices, as well as the BlackBerry PlayBook (and iOS devices in the near future).

One of the great features of mobile RIAs is the fact that you can connect your application to all kinds of different server technologies, such as PHP, Java, ColdFusion, .NET, ... in exactly the same way as you would in your desktop AIR application. You can even work with the DataService component to use real-time data connections over the RTMP channel. Just think about real-time stock updates, video streaming, trader applications on mobile, collaboration across multiple devices ... The sky really is the limit. Or is it?

I think all of this always sounds very nice, but people tend to forget one important thing when working on a mobile device and that is that if you're not on a WiFi connection, your data contract can become very expensive when you use the sever connections. However, in Flex 4.5 there is a way to actually check whether you are working on your data contract or on a WiFi connection.

In the application you can access all of the device interfaces and check to see whether they are active or not. The only thing you need to know is which interface to look for. In the code below, you can see how I check for the "WiFi" and "mobile" interfaces. Based on what I find, I just check whether it is active. Remember, some people may have the possibility to work via a data contract, but didn't sign up for it, so finding the "mobile" interface isn't enough.

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        title="Connection Test"
        creationComplete="initView()">
    
    <fx:Script>
        <![CDATA[
            private function initView():void {
                var interfaces:Vector.<NetworkInterface> = NetworkInfo.networkInfo.findInterfaces();
               
                for(var i:uint = 0; i < interfaces.length; i++) {
                    if(interfaces[i].name.toLowerCase() == "wifi" && interfaces[i].active) {
                        lbl.text = "WiFi connection enabled";
                        break;
                    } else if(interfaces[i].name.toLowerCase() == "mobile" && interfaces[i].active) {
                        lbl.text = "Mobile data connection enabled";
                        break;
                    }
                }
            }

        ]]>
    </fx:Script>
    
    <s:Label id="lbl" horizontalCenter="0" verticalCenter="0"/>
</s:View>

In this example I'm simply setting the text property of a label, but you can also use this in a real world application to determine the update rate for your server data, for example.

There is one thing you should not forget to do when creating such an application. You have to set the proper permissions in the <applicationName>-app.xml file, in the android section. That section should contain the ACCESS_NETWORK_STATE and the ACCESS_WIFI_STATE permissions in order for it to work. If you don't include this, you will get an empty Vector returned from the findInterfaces method.

<android>
    <manifestAdditions><![CDATA[
    <manifest>
        <!-- See the Adobe AIR documentation for more information about setting Google Android permissions -->
        <uses-permission android:name="android.permission.INTERNET"/>
        <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
        <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
    </manifest>
]]></manifestAdditions>
  </android>

This post has also been published on my personal website ( http://www.flexpert.be/2011/04/detecting-the-network-connection-type-with-flex-4-5/) and on the website of multimediacollege ( http://www.multimediacollege.be/2011/04/detecting-the-network-connection-type-with-flex-4-5/), an Adobe Authorised Training Centre in Belgium. Please follow these blogs if you want to learn more about Flex, Flash, ActionScript development and workflows.