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>

So now I’m sitting in my hotel room, waiting to leave for the airport in half an hour. It gets me thinking about the past couple of days and the Flash Israel event.

First of all, for everyone who has been thinking about bringing Phidgets or Arduino on a plane: don’t do it. I mean, I did eventually make it to Israel in one piece (I’m not yet sure I’ll be getting back safely as well), but the security nowadays is so tight I actually needed a couple of hours to get past the security check. Even getting into the mall where the event was held turned out to be quite the challenge. Imagine a stranger walking up to security and then saying he’s carrying some batteries with some wires attached to that, which powers some electronic components… Right, that does sound suspicious, doesn’t it? But in the end they finally understood that it was actually quite harmless.

With that said, let’s turn the attention to the event. It has been a very good 2 days for me, meeting a lot of interesting people and kick-ass developers here in Tel Aviv. These guys do amazing stuff. I even learned that lots of things have been invented here in Israel, such as the flash drive and the firewall. Didn’t have a clue…
I also met a couple of guys who were already into Arduino programming and have gotten some insight to some great applications for that technology. I may find some inspiration there for my next Phidgets project.

The speakers at the event were top-notch as well. You had the ones we all know: Lee Brimelow, Kevin Schmidt, Ben Forta and Grant Skinner and their presentations rocked, as usual. But then you had a couple of unfamiliar faces (at least to me) and they definitely surprised me with their sessions. Apart from the fact their were a couple of presos in Hebrew, which I don’t understand at all, there was large variety of interesting topics, ranging from game development to LiveCycle Data Services.

Since it was my first time at this event and even my first time in Israel, I didn’t quite know what to expect. But the crowd here was very interactive and I loved being here. So, that means I say a big thank you to Almog Koren for inviting me over here and I certainly hope to be back next year.

A couple of weeks ago I was lucky enough to be invited to present at Flash Israel on February 22-23. There were a lot of topics I could choose from, but looking at the list of speakers that were already selected, such as Ben Forta, Lee Brimelow, Grant Skinner, … I knew I had to come up with something mind blowing.

So, after doing some soul searching I reached back to my experience with Phidgets and Arduino. Over the past year I’ve been experimenting with both and found out I love playing around with electronics. Now the great thing about these two brands is that their components can be accessed through Flash technology.

This is exactly what I’ll be talking about, showing some actual real-world applications as well; even using the mobile phone to control these devices. I can’t tell you exactly what I’ll be doing because that would ruin the scoop of my main demo. But I can tell you there’s a laser involved! So if you happen to be in the neighborhood of Tel Aviv, Israel next week, be sure to come over and enjoy all the awesome speakers.

If you’ve been here a while ago, you may remember that I had such a solarlogger component in my sidebar. But then I decided to remove it and turn it into a mobile application. Now, next to the standard gauge that displays the current power output, I’ve added a chart that displays the power output throughout the day. Below you can see an example of what it looks like on a sunny day. (screenshot taken from HTC Desire phone, hence the portrait orientation)

Unfortunately, in Flex 4.5 there are no charts available. That’s really a shame and I really do hope Adobe is going to put that in as well, because I can see multiple applications that use these charts. Oh well… But we have to live with it now and find another solution. Christophe Coenraets wrote an excellent blog post about using FXG to draw some lightweight charts in a mobile Flex application, but after some thorough testing I’ve found some redrawing issues with using the FXG and rotating the device.

The solution I came up with, is simply drawing the graph yourself using ActionScript. What you need is some container that provides you with a graphics property on which you can draw the graph, clear the current drawing and get cracking at it. In the code below you can clearly see that I’m drawing each line part of the graph manually, ending in a horizontal line until the end of the graph, filling the result with a semi-transparent color. Within this application, I’ve used a tag to get me the graphics property to draw on.

var d:Date = solarData.getItemAt(solarData.length - 1).date;
d.setHours(6, 0, 0, 0);
minTime = d.time;
d.setHours(22, 0, 0, 0);
maxTime = d.time;
 
group.graphics.clear()
group.graphics.lineStyle(2, 0X009900, 1);
group.graphics.moveTo(0, group.height);
group.graphics.beginFill(0x009900, 0.5);
 
var xPos:Number;
var yPos:Number;
for (var i:int = solarData.length - 1; i >= 0; i--)
{
	// Calculate the y coordinate on the value axis
	yPos = group.height - (solarData.getItemAt(i).P_MomentTotal / maxPower) * group.height;
	// Calculate the x coordinate on the time axis
	xPos = (solarData.getItemAt(i).date.time - minTime) / (maxTime - minTime) * group.width;
	group.graphics.lineTo(xPos, yPos)
}
group.graphics.lineTo(xPos, group.height);
group.graphics.lineTo(group.width, group.height);
group.graphics.endFill();

This way, you can draw whatever you want on your application without having to use heavy components or cracking your head on Bezier curves. The graph can be drawn on any device now and is still very much lightweight. If you want to download and try out the SolarLogger application on your Android device, you can use this QR code with your barcode scanner application. Enjoy!

Well, there are 2 options you may choose from. The first one involves using ActionScript to attach an event listener. Upon initialisation of your View component, you write the following code:

private function initView():void {
    addEventListener(TransformGestureEvent.GESTURE_SWIPE, onSwipe);
}

The good thing about this method is the fact that it is exactly the same in plain ActionScript or Flash Professional projects. The second option can only be done in Flex applications and it is actually a little bit easier to implement. In fact, you just capture the gestureSwipe event on the View tag, as shown below.

<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
            xmlns:s="library://ns.adobe.com/flex/spark"
            gestureSwipe="onSwipe(event)"/>

So, that’s all there is to it for capturing the swipe on a touch enabled device, such as mobile phones, tablets or even large touch screens. But you only have one single swipe event, so how do you distinguish between a swipe left and swipe right? For that, you are going to have to use the event’s properties to determine the swipe direction. and more particularly, you’ll need the offsetX property for a horizontal swipe and the offsetY property for a vertical swipe.

private function onSwipe(event:TransformGestureEvent):void {
    // A swipe to the left means the offsetX property will be -1
    // A swipe to the right means the offsetX position will be 1
    if(event.offsetX == -1) {
        doSwipeLeft();
    } else if(event.offsetX == 1) {
        doSwipeRight();
    }
 
    // The same principle applies to the vertical swipe gesture, so
    // a swipe to the top means the offsetY position will be -1
    // A swipe to the bottom means the offsetY position will be 1
    if(event.offsetY == -1) {
        doSwipeTop();
    } else if(event.offsetY == 1) {
        doSwipeBottom();
    }
}

I then came across Phidgets motor controllers and I was immediately interested in it, mainly because it has an Flash/Flex Actionscript library that allows your Flash or Flex application to communicate with that controller. So I ordered one and started working on an application. What I came up with is a wooden maze that is placed on 4 servo motors and I can now control the maze by using a socket connection on mu Android phone running Android 2.1 (Eclair). I needed a special construction to get the rotational movement converted into a vertical movement to lift and tilt the maze and it kind of worked. I would have preferred to use linear motors instead, but they were just way too expensive for me. This did the trick as well. It was just a little harder to get the setup right. Just watch the video and keep in mind that this is merely a prototype.

If you want to investigate this source code even further, you can download the source file here.

Instead, they are now going for Hero, which is the next version of the Flex framework. That version should become a unified version, which will be cross-device. I can only hope that AIR 2.5 (which is the version for Android devices) is going to be included into the same framework, so there’s no more installing SDKs separately.

As you can see in this blogpost I wrote earlier, the applications I’m demonstrating are created with Flex (standard Flex 4/AIR2.5 that is) and they are running smoothly on Android. They have even been created via Flash Catalyst, which is definitely not optimised for mobile devices. But still they run smoothly, although I must admit that loading times could be faster. Can you imagine what performance you are going to get once this framework has been optimised? I can’t wait to get my hands on that SDK But it seems we’ll have to wait until later this year to be able to get a beta version of the SDK.

You can read the entire article on Adobe Labs.

This one works over the internet as well, since it simply downloads a CVS file every 10 minutes to automatically update the application. The design was made in Illustrator, brought into Flash Catalyst to get the arrow working and finally I took it to Flash Builder to attach the HTTPService that fetches the data. You can read the full implementation in my book "Flash Builder and Flash Catalyst: The New Workflow" as well, since it’s one of the many examples in there.

The second application is a remote control for my BTicino domotics system. I’ve been wanting to do this for a very long time now. But up until now I just couldn’t do it, because you couldn’t create this thing in Flash Lite 3. But now, with AIR on Android (and soon on other mobile platforms as well) I could create a socket connection to my MH200 controller and feed it directly with my input to control the shutters and lights. Naturally, the possibilities are only limited by your imagination.

Both applications are Flex 4 applications, which proves that, despite the fact that the Flex framework isn’t optimised for these mobile devices and Slider (special Flex framework for mobile) isn’t yet available, the application still works pretty damn well. Loading times are not that bad either. Imagine what an optimised Flex framework will be able to perform then…