Understanding Flex Mobile View and ViewNavigator

The Flex framework “Hero” makes the task of creating mobile applications for BlackBerry Tablet OS, Android, and soon iOS extremely simple. I think that one of the best looking apps for Android is MAX Companion 2010 and please bear in mind that this app was created using an early build of Flex “Hero”.

This is a reasonably complex application with lots of screens and social integration (Twitter) and yet on my Nexus One and Samsung Galaxy Tab it still works great. This is exactly where the Flex framework can shine on mobile devices: fast and easy development of applications that can connect to virtually anything (web services, REST services, RPC).

In this article I will talk about Flex Mobile Views and ViewNavigator. If you want to use Flex “Hero” to create mobile apps you need to understand how these components work.

Oh and one more thing, if you want to try this yourself you’ll need the Flash Builder “Burrito”. You can download it from here. Continue reading

Resolving empty list of devices on MacOS – Android and AIR

My fellow evangelist Tom Krcha wrote a blog post about how to make sure that your Android device is found on Windows when using Flash Builder Burrito in order to deploy your AIR application to the device. So I thought it would be worth sharing another solution I found when working with Burrito and Android devices this time on Mac OS.

What I’m experiencing from time to time on my machine is that Flash Builder doesn’t find my Nexus One although it is hooked to my machine via a USB cable and  all the settings are set (USB debugging enabled).

So my solution to this issue is to open a Terminal window and run this command: adb devices. After this I can safely use Burrito to deploy my app on my phone. Of course you need to download the Android SDK in order to have the adb (Android Debug Bridge) tool. But this seems to solve the problem every single time.

Radar – cool AIR app for Android

My fellow evangelist Mark Doherty was quite busy this summer building an AIR application for Android. Now, why I am taking my time and your time to talk about his application? Because this application is an excellent resource for learning how various capabilities of the Flash Platform fall together on Android.

This application enables users to make peer2peer video calls. It uses Google Maps in 3D mode, Twitter or Facebook for authentication (we just released a new version of the Adobe ActionScript SDK for Facebook platform), and Adobe Cirrus (formerly Stratus) for sending the data from one user to another. Of course it uses the location API to place the users on the map, and it uses Mic & Camera access as well.

Mark published this application on Android Market and built a desktop version too. You can find more about Radar on Mark’s blog.

Start making money with AIR apps for Android: AIR is available on Android Market

Adobe AIR 2.5 for Android was just released. So, if you have an Android phone running FroYo (Android 2.2) you can go to Android Market, search for “air” and install the runtime like you’d do with any other application. Next, if you want to try some AIR applications for Android, just search the Internet for AIR Android application. Or you can have a first run with the three applications I’ve built this year (on the right side of my blog you’ll find the links for these apps).

If you want to start developing AIR apps for Android, then the first thing you need to do is to sign up with the AIR prerelease group. And once you grab the AIR 2.5 SDK and the Android SDK (from Google) you are ready to start creating AIR apps. You can use your favorite text editor, Flash Builder 4, or Flash Professional. Quick note: AIR for Android doesn’t support the HTML/JavaScript/CSS workflow for creating AIR apps (AIR apps for desktop can be created using these technologies); it supports only ActionScript/Flex.

How do you get your AIR apps for Android on the Android Market? Basically you need to follow these steps:

  • set up an Android developer account (it costs $25)
  • next you have to create a certificate for signing the application. As with AIR apps, the Android Market accepts self-signed certificates. This means, you can use adt to generate a certificate if you don’t want to buy one
  • now you are ready to upload your APK files

My fellow evangelist Ryan Stewart wrote a post on this topic.

Obviously, I’ve been playing with AIR and Flash Player for Android all this year. And I’ve seen the hard work our engineering teams put in in order to make these runtimes, designed initially for the desktop, to run fast and reliably on mobile devices. I hope that people who have enjoyed Flash Player on Android will love AIR too.

About AIR Applications and Android Permissions

After I saw some tweets about issues related to accessing the Wi-Fi network from an AIR application running on Android I thought it would be worth writing a post about this topic.

If you have installed an Android application on your phone you know that during this process you are presented with a screen stating what permissions the application you are about to install will use: network communication, contact data, location, storage, and so on.

I think this is a good thing especially when dealing with applications from “not so trusted” sources. You have a last chance to decide if you are willing to install that app or not. Thus it is only natural Android apps built with Adobe AIR to follow the same rules. One more thing on security/permissions: I think it is a best practice, as a developer, to request the minimum permissions required for your application.

The way you set up these permissions is quite simple: you add an <android> node to your application descriptor file having the <application> node as the root (the application descriptor file is the XML file you already use for setting the different configuration options for your AIR application – application name, enabling the update framework, initial size and position, and so on). Here is an example:

Later Edit:

<android>
    <manifestAdditions>
        <manifest>
            <attribute name="android:installLocation" value="auto"/>
            <data>
            <![CDATA[
                <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
                <uses-permission android:name="android.permission.INTERNET"/>
                <uses-permission android:name="android.permission.WAKE_LOCK"/>
                <uses-permission android:name="android.permission.DISABLE_KEYGUARD"/>
                <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
                <uses-permission android:name="android.permission.READ_PHONE_STATE"/>
            ]]>
            </data>
        </manifest>
    </manifestAdditions>
</android>

My colleague Ashutosh Sharma kindly pointed out that this mechanism was slightly changed recently:

<android>
    <manifestAdditions>
    <![CDATA[
    <manifest android:installLocation="auto">
        <uses-permission android:name="android.permission.INTERNET"/>
        <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
        <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
        <uses-configuration android:reqFiveWayNav="true"/>
        <supports-screens android:normalScreens="true"/>
        <uses-feature android:required="true" android:name="android.hardware.touchscreen.multitouch"/>
        <application android:enabled="true">
            <activity android:excludeFromRecents="false">
                <intent-filter>
                    <action android:name="android.intent.action.MAIN"/>
                    <category android:name="android.intent.category.LAUNCHER"/>
                </intent-filter>
            </activity>
            <activity>
            </activity>
        </application>
    </manifest>
    ]]>
    </manifestAdditions>
</android>

In this example I added an additional setting in the form of android:installLocation=”auto” as the attribute for the <manifest> node in order to allow the user to install the application either on the internal memory or on the SD memory card. The same way you can add additional permissions supported by the Android OS.

Now, next time when you have problems accessing resources from your AIR app on Android, you should know that this is the first thing to look for.

50 resources to get up to speed with the Flash Platform

For the past six months we’ve been rolling out a lot of goodies, some of them in the form of final releases, others as betas. It’s no wonder you have to spend some time in order to get up to speed with the latest features of AIR 2, Flash Player 10.1 for Android, AIR 2.5, Flex 4, or Flash Builder 4. Thus, I thought it’d be a great idea to put together a list of resources to help you learn about these goodies.

So here I go, in no particular order.

Peer 2 Peer

Flash Player 10.1 and Adobe AIR 2 brings new capabilities to the table when it comes to Peer 2 Peer. The best resource to learn about this is my fellow evangelist Tom Krcha (some say his dreams are multicasted, but only a few are lucky enough to receive them :D):

Flex and server side technologies

AIR 2

AIR/Flash Player 10.1 and Android

Flex 4

Other Flash Builder 4 related resources

Enjoy!

Flash for mobile contests

This summer you have many contests to pick from if you want to create Flash content for mobile (Android 2.2) and win something while doing it. You can win fame/money/software/mobile devices — not neccesary in that order and not all at once– but you get the point :D.

For more details, check out these contests:

Good luck!

AIR apps for viewing Android pictures on desktops

This week I had time to play with another idea for Android/Desktop applications: a picture viewer. My friend Alex Chiculita from the AIR team gave me this idea. A couple of weeks ago he played with a multi-screen application that let you load a picture from a device and send the picture to all the other devices connected to the same Wi-Fi network (the app runs on Android, Windows, MacOS, and Linux).

While playing with his application I realized that I could transform it into something more helpful (at least for me). Here is the challenge: we all use our smartphones for a lot of things, including taking pictures. Having a decent digital camera (this is what a smartphone became lately on top of a mobile phone) with you all the time means you can take interesting pictures. And usually you want to show these pictures to your friends or family. However, here is the problem: while taking pictures is extremely easy, sharing them involves cables,  Bluetooth, or seeing the picture on the phone’s screen.

My solution to this problem is AndroidPictures (the above pictures show AndroidPictures in action on my mobile). This Android application lets you browse through the pictures taken with the phone and scale/rotate/pan them. On the desktop, you use the companion AIR application for AndroidPictures, which displays the pictures sent by the Android application. All you have to do to see the pictures with your family is:

  • connect your Android phone to the WI-FI network;
  • start the AndroidPictures app on your Android phone, and start the PicturesViewer app on one of/all your computers;
  • what you see on your mobile phone will be replicated on all connected computers.

Watch the video below to see how it works.

The making of

I used Adobe AIR and Flex 4.1 for creating the Android and desktop applications. In order to connect the Android application to the desktop apps I used Peer-to-Peer direct routing (the same approach used in my previous app). As I already explained, if your local subnet (for example your home Wi-Fi) supports broadcasting then you can create a NetConnection without using Stratus or a Flash Media Server (you connect the NetConnection to “rtmfp:”). This is one of the new features available in Flash Player 10.1 and Adobe AIR 2.

Once you have the clients connected, you can send messages from any one to all of them. And the cool thing about using this approach as opposed to Socket servers is that you don’t have to manually manage all the clients. Your program sends a message and the clients decide how to handle the message. You simply don’t care how many clients are connected. You can read more on my fellow evangelist Tom’s blog.

Because I wanted to use this approach for other apps, I created a simple library (you can get the library’s source code from here; unzip the archive and import the PeerToPeer.fxpl project in Flash Builder). You’ll find three ActionScript classes, and the magic happens inside of MultiCastingService class. The public interface of this service is:

  • isReady
  • neighborCount
  • userName
  • connect()
  • disconnect()
  • post()

The service throws these events:

  • ServiceEvent.CONNECTED
  • ServiceEvent.DISCONNECTED
  • ServiceEvent.PEER_CONNECT
  • ServiceEvent.PEER_DISCONNECT
  • ServiceEvent.RESULT

The simplest way to use this service would be:

    var service:MultiCastingService = new MultiCastingService();
    service.addEventListener(ServiceEvent.RESULT, onResult);
    service.addEventListener(ServiceEvent.CONNECTED, onStatusChange);
    service.addEventListener(ServiceEvent.PEER_CONNECT, onStatusChange);

    service.connect();

    private function onResult(e:ServiceEvent):void {
        if (e.what == "picture") {
            //do something with the bytes: e.body
        }
    }

    private function onStatusChange(e:ServiceEvent):void {
        if (e.type == ServiceEvent.PEER_CONNECT) {
            if (service.neighborCount > 0) {
                //others are connected; send a String message
                service.post("this is my message");
            }
        }
    }

For the Android app I had to tweak the Spark List in order to make it works with both touch and click events. For the picture interaction I used a library created by Tim Kukulski, a member of the Adobe XD team. This library makes it easy to interact with pictures by letting you use gestures like zoom, pan, or rotate.

The desktop application waits and responds to two kinds of messages: picture bytes and pictures transformations (rotation, zooming, or panning). Every time a picture is selected in the Android app, I grab its bytes and send them through the “wire”. When I transform a picture in the Android app, I grab the Matrix and send it to all the connected clients. The client applies the Matrix on the picture. And the rest is history :)

All in all it was pretty easy to put together these apps and I had a lot of fun while doing this. If I have the time, I will try to see if I can play the movies recorded with my Android by extending the current code.

Getting the apps and source-code

You can download the source code from here, install the desktop application from here, and the Android application from here. If you want to run the Android application, you need to install Adobe AIR on your Android (more info here).

If you have ideas for more applications that take advantage of having AIR running on Android phones and desktops please let me know. If you create something interesting, I’d love to hear about. I already have another cool idea, this time more complex and even more fun!

Have fun with the Flash Platform on multiple screens!

Creating multi-screen apps for Android and desktop using AIR

Today, I finished a project I’ve been working since last week: a desktop MP3 Music Player that can be controlled by any number of Android phones. I built these apps using Adobe AIR and the Flex framework. Below you can watch a video with these apps in action, running on Motorola Droid, Nexus One, and my laptop (you can watch here the video in a higher resolution).

The communication between the remote controls (AIR apps running on Android phones) and  desktop player is done using the peer to peer features of AIR 2 and Flash Player 10.1. Basically if all the parties are connected to the same subnet and if the network allows broadcasting, then you can create a group and send messages to all the members without the need of Stratus or some other service/server.

Actually, while working on this project I created a small class that enables you to quickly create clients who connect to a local network. Of course, this is only one way of connecting two or more clients. You can use sockets if you want, or one-to-one communication (peer2peer). But I think in both these cases you have to work more, because you have to manually manage all the parties involved. If you want to find out more about peer2peer features of the Flash Platform take a look at this MAX session and read my fellow evangelist Tom Krcha’s blog.

The Android app was more fun to build because I used the touch input mode along with click input. I enjoyed a lot tweaking James Ward’s code for scrolling a Flex List. Believe it or not, again I used Illustrator and Flash Catalyst a lot to create the skins or parts of them.

Until I have the time to put together an article explaining  how these apps were created, please enjoy the video and play with the apps: desktop file and APK file. And from here you can download an archive with the source code. If you need the Adobe AIR runtime or AIR SDK for Android, please sign in for the pre-release group here.

What do you think?

Test your AIR apps on an Android phone

I realized that for us (Europeans) it is a little bit harder to get our hands on a Nexus One or Droid phone. So, if you have created an AIR app for Android and you don’t have a device to test it on we can meet at one of the next events I’m doing and I will let you do the testing. Maybe we can shoot a video too :)

For now, my schedule looks like this:

  • June 2nd I’ll be in Cluj-Napoca Romania  attending a Flex Camp
  • June 3rd – 5th Timisoara Romania, attending and speaking at Drupal Camp
  • June 10th-12th Norway attending gotoAndSki()

If you live in Bucharest, just send me an email and we will figure out a date depending on when I’m not travelling.

Looking forward to seeing what you build :)