Archive for AIR for Android

Adobe AIR Launchpad – Gone MOBILE!

Posted in Adobe AIR, Adobe AIR Launchpad, Adobe MAX, Flex 4, Flex/AIR with tags , , , , , , , on October 25, 2010 by devgirl

Version 2.0 of Adobe AIR Launchpad Beta is now available. It includes support for the creation of AIR Mobile projects as well as some other important updates (start a new project or switch back and forth between mobile or desktop AIR projects without restarting the app)!

This new version allows you to create mobile projects based on the AIR for Android APIs and Flex Hero (codename for next version) SDK’s. With the new main menu you can select Desktop or Mobile for your project base and it will generate a ZIP file and directory folder containing all of your chosen options and samples that can be directly imported into Flash Builder. The Desktop option still targets the Flash Builder 4 IDE but the generated projects from the Mobile menu option are targeted for the Flash Builder Burrito IDE which is also still in development (get the Preview Release and development guides here!) I’ve tested with this Preview version of Flash Builder Burrito and I was very impressed overall by the stability and features already supported. I run it concurrently with Flash Builder 4 (and occasionally Flex Builder 3) and have not had any issues, so don’t hesitate to grab it and at least play with it and see what’s to come (and dabble with some mobile while you’re at it)!

Developers should note that the development of an AIR mobile application is quite different and further justifies a need for a tool like Adobe AIR Launchpad to aid developers in quickly getting up to speed with mobile development. The projects generated from the Mobile menu option are based on the new Spark MobileApplication tag and will include a first home view (using the new Spark View class) so you can see how to push and pop views based on the samples selected from the Mobile options (one view created per sample). In a Mobile AIR application you don’t define the content for the UI in the main application class, but instead create views. The Flex SDK automatically adds a ViewNavigator container object as a child in the MobileApplication that is used to push and pop views as desired. This is all totally new but Adobe AIR Launchpad contains a working example of how this is done in your generated project. The generated project also shows the use of other new Spark classes and options created to support mobile (MobileIconItemRenderer, navigationContent, splashScreenImage, how to set content on the ActionBar and more). Note that the generated samples for the mobile project option are created in the ‘views’ folder (as opposed to ‘samples’ folder for an AIR desktop project).

Probably the coolest thing about this is you can import your new generated mobile project into Flash Builder Burrito and run it on either the emulator or your device right from the IDE and immediately play with the samples. The following screenshots are from a generated working mobile project created by the Adobe AIR Launchpad running on a Nexus One:

The new Flash Builder debug configurations now allow you to debug your application as it is running on your phone and output is written to the console just as it is when you run an application on the desktop (wicked cool)!! If you don’t have a device to debug it on yet, you can also just run it in the emulator from the run/debug configurations in Flash Builder IDE so you can get started on mobile development immediately! No more command line and slow emulation (which you may have seen if you previously tried this); response time with the emulator is dramatically improved. Below is a screenshot of the debug configuration dialog from Flash Builder Burrito:

The Flex Mobile Project option will automatically default to a new mobile theme which is new in Flex Hero. This theme includes larger and more optimized fonts and UI components right out of the box. You can modify the styles on the application as you would any other as long as you’re aware that it’s within the Flex mobile theme and some styles may not yet be available. See the Flex Hero and Flash Builder Burrito docs for more details. The screenshots of the running mobile app on the Nexus One above show an example of some of the Spark components with the mobile theme.

Also, if you are not aware of it yet, there are various permissions required now in the AIR app-descriptor.xml file for the Android manifest. Launchpad will determine the permissions needed based on options and samples selected and set them for you. I also put in informative tooltips to help explain each option to get you going quickly without having to pore over Android docs. The screenshots below show an app-descriptor manifest and application MXML code generated by Launchpad:

I’ve been working feverishly to get as much in this release to coincide with MAX as possible but will still be adding new updates (and bug fixes) in the weeks to come and as the Flex SDK features are added and changed. You can download it now from Adobe Labs and it will auto-update as I continue to put out changes. If you get an immediate auto-update notice (to version 2.01), please go ahead and do the update as I made some changes and fixed some important things over the weekend after that AIR file was posted. Note that iOS specific support will be added in the near future as well!

I’d be happy to take suggestions on new features or hear about bugs you might find here on my blog or on the official Adobe AIR Launchpad Beta Forum.

Also, be sure to check out the new Tour de Mobile Flex (with source) James Ward recently created and made available today to see another great example of mobile development!

Advertisements

My first AIR for Android development experience

Posted in Adobe AIR, Flex/AIR with tags , , , on June 28, 2010 by devgirl

I recently got a Nexus One phone and I’m very excited about the development potential with AIR, Flash Player and Android! Since this is a whole new world to me, I thought I would write up a post summarizing my first experience with Android mobile development. I had ventured down the iPhone/Objective-C path awhile back but the syntax was so different than my Java and other development experience and with my limited time for side projects it just wasn’t working for me. Being able to leverage my ActionScript/Flex skills for the mobile world is beyond cool! Before going into the details of my first little app however, I think it’s important to go over some terminology to clear things up for those who may not know all the mobile jargon.

iPhone: a type of phone designed by Apple (multiple manufacturers). Runs the iOS Operating System, same as the iTouch and iPad. Multiple models include iPhone 3G, 3GS and the recently announced iPhone 4, which will run the iOS version 4.
BlackBerry: one of the first smartphones to become popular among business users, and developed by Research In Motion (aka: RIM). Runs a proprietary BlackBerry OS.
Nexus One: a type of phone manufactured by HTC for Google, runs the Android OS
Droid: a type of phone made by Motorola, runs the Android OS
Android: Google’s mobile OS (Operating System) originally launched in September, 2008
Eclair : The codename for Android OS version 2.1
Froyo: The codename for Android OS version 2.2 – just recently announced
HTC : a cell phone manufacturer, like Motorola
apk : An android package file extension. This is the type of file needed to install to the Android OS.
Adobe AIR 2.5 – the version of AIR that has support for Android, with tools to package apk files from the command line. With this version you can turn an AIR app into an Android app. Adobe announced the AIR for Android Public Beta program in May, here are details of the announcement.

My first app…
Since I’m a big runner, I decided it could be useful to develop a run tracker application for my phone. Serious runners tend to keep track of their mileage, pace, etc. so they can track their progress for training purposes. So with this in mind I went into Flash Builder and created my ‘RunTracker’ project. It’s made up of some tabs that allow you to input your running data and calculate pace, as well as show your history and pace trend in a simple line graph. The app uses SQLite (local database built into AIR) to save the run data. Here are a few screen shots taken from the Android emulator. The code for the project and the 2.1 (Eclair) and 2.2 (Froyo) versions of the apk are located here for reference. The Froyo version was built as a debug version (see notes about debug below).



A quick summary of the steps is outlined below. More can be found in the developer documentation at the AIR for Android Public Beta site. The Developing_AIR_apps_for_Android.pdf is a must read document and outlines all of the steps in depth. There’s also a great article by Christian Cantrell on Adobe Devnet that goes into designing apps for multiple platforms and screen resolutions that is worth a read here too.

1) Download the AIR 2.5 SDK and Android tools. Everything you need can be found in the documentation once you sign up for the AIR for Android public beta.

2) Create your AIR app to be used for mobile. NOTE: You need to change the WindowedApplication to an Application tag and then be sure to set visible to true in your app-descriptor.xml file, for example:

                <!-- Whether the window is initially visible. Optional. Default false. -->
		<visible>true</visible>

The following icon sizes should also be specified for low, medium, and high density screens respectively. This is the icon that will show on your phone menu.

    <icon>
          <image36x36>assets/icon36.png</image36x36>
          <image48x48>assets/icon48.png</image48x48>
          <image72x72>assets/icon72.png</image72x72>
   </icon>

3) Package your application using the adt command line tool and package an AIR application for Android. For example:
adt -package -target apk -storetype pkcs12 -keystore ../../myCert.p12 RunTracker.apk RunTracker-app.xml RunTracker.swf assets/runner72.png

UPDATE: If you want to create a debug version of your application so you can see errors and stack traces, you need to add -debug to the target such as:

adt -package -target apk-debug -storetype pkcs12 -keystore ../../myCert.p12 RunTracker.apk RunTracker-app.xml RunTracker.swf assets/runner72.png

Then install your apk to the device and while connected run the following command from the command line:
adb logcat

Then run the app in the device and you should see the trace of what’s happening in the console.

4) Install it to either the Android emulator or your smartphone device. NOTE: The emulator is VERY SLOW. I would HIGHLY recommend using a phone if you have one. I almost gave up on AIR for Android development when I had only tried the emulator because of the performance, but it’s a whole different experience when installing to your phone so don’t be dismayed! You can use the -r option to reinstall it after the first time. Make sure to exit out of the application before doing the re-install. You can specify a -d for the phone or -e for the emulator, but if you only have one of them connected or running it will use that one by default. For instance, since I have my phone connected and my emulator running, I would use this option to install to my phone only:

adb -d install -r RunTracker.apk

Also, as part of the development I noticed a few things to point out. Certain components don’t work so well out of the box without some tweaking. For instance on the Spark NumericStepper, the default arrow buttons were much too small to click on easily on the Nexus One. I decided to take advantage of the Flex 4 skinning features and create a custom skin for my NumericStepper with increment and decrement buttons that used icons and were bigger than the default ones. Since by default the keyboard would pop up on the Android device when the user clicked into the NumericStepper (so numbers can be entered versus using the arrow keys), I also added a restrict property to the TextInput part of my custom NumericStepper that would restrict the entered values to numeric only.

There are more features I plan to add to this little app, (geolocation APIs to actually track the run etc) and I’ll continue to play around with things as the AIR for Android features progress, but it was fun to get my feet wet and see what it was about. I encourage you to do the same. And if you’re a runner too, grab the apk and try it out!

Adobe AIR 2.0 Release Official!

Posted in Adobe AIR, Flex/AIR with tags , , , on June 10, 2010 by devgirl

Adobe AIR 2.0 was officially released today by Adobe. What does that mean to you as a developer? If you haven’t checked out the latest features in AIR 2.0 or Adobe AIR at all, now is the time! Adobe AIR allows you to build Rich Internet Applications (RIA’s) for the desktop. It offers all the benefits of an RIA outside the confines of a browser and provides access to the File System, local database (SQLite), online/offline capabilities and more. The version 2.0 released today adds native process support, multi-touch and gesture handling, microphone capabilities, socket communication and other important features worth checking out. I recently worked on a bunch of samples for Tour de Flex that show off many of the new features in Adobe AIR 2, they can be found here.

The Adobe AIR runtime and SDK are both downloadable for free. AND… one of the most exciting and compelling reasons you should make it a point to start building apps with AIR is that you will soon be able to go mobile! Check out the AIR for Android program to see how you can write AIR apps that run natively on your Android device! I’ve built a couple of apps myself for my Nexus One and I’m personally very excited about how easy it is. You can have the same application running from your desktop that could be communicating with a LiveCycle Data Services server or BlazeDS ported over to your mobile device in minutes. An example of one such application can be found here.

You can also check out the Adobe AIR Marketplace to find oodles of AIR apps for download.