AIR for Android

Things on a real device will tell you…

While at the recent 360|Flex conference, some users of the my conference app on the Samsung Galaxy Nexus S were having display issues. There was something causing the width variable to be set incorrectly, and thus all the alignment code to be wrong.

This was puzzling, I had checked the application on my Xoom, and the alignment code worked fine.  So, during lunch I borrowed a device and took a look at what was going on. The application is written pure ActionScript (no Flex Mobile), and the stage is set to a standard 480 by 800 pixels.

During the init process I set theAppWidth = this.stage.stageWidth and theAppHeight = this.stage.stageHeight. This had returned the device width and height on the devices I had tested on. But on the Nexus S the code was returning 480 by 800, and not 720 by 1184. Hum….

So, I changed the code to reference this.stage.fullScreenWidth and this.stage.fullScreenHeight. This did return the correct values, and thus alignment code was working again.

The moral of this story is that you have to spend time (and money) to have a collection of real devices to test on.

Thanks again to Doug Arthur for letting borrow his device to resolve this.

360 Flex is coming!!

360 Flex Conference360|Flex 2012 is just around the corner! I, like many of my friends are wrapping up our presentations. I am honored to be presenting again at one of the best tech conferences I have attended. It is no surprise that I am talking about mobile, it is was a do for a living. But the mobile space is a rapidly evolving one, with lots of technical choices that have to be made before you create the next “killer” app. I am going to share my thoughts  on several of the major mobile development technologies during my talk on Monday.

For the talk I have building the same app with 5 different solutions (jQuery Mobile, PhoneGap, Appcelerator, Flex Mobile, and Sencha Touch). It has been crazy process (and I am not done with them yet). But, it has given me a lot of insight into the strength and weakness of each solution. One nice thing, 4 of the solutions will have representatives at the 360Flex, so if I get something wrong I am sure they will tell me. But, you want to know more about a specific solution, this would be the time to do so.

Hope to see there!

Look who is teaching!

UCSD ExtensionI am happy to announce that I will begin teaching at UCSD Extension this spring quarter. The class is entitled “Mobile Apps for Multiple Platforms“. I have been approached about teaching before, but this opportunity was too good to pass up. It is a short course of only 6 sessions. I am basing it in part on my upcoming presentations at 360|Flex and D2W.

Here is the course description:

Learn how to design and develop mobile apps using powerful technologies, such as Sencha, PhoneGap, Titanium and Adobe AIR, a technology that enables you to create an app once and then export it to iOS devices – iPhone and iPad – Android, and to the BlackBerry Playbook, all with minor adjustments, all at maximum performance, accessing all the necessary APIs of each device (Camera, GPS and more). Learn how to design amazing apps for multiple screens, how to sign and publish them to the Apple App Store, Android Market and BlackBerry AppWorld. Learn how to tackle fragmentation, guaranteeing consistency, saving you and your clients time and money.

So if you are in the San Diego area, and want to learn more about the various cross-platform mobile solutions, this class will be a great starting point!

FlashTent Talk Slides Posted

Recently Hawaii Flash and Everything Flash hosted a free all-day online conference, which I had the pleasure to present a talk on Adobe AIR for Mobile. I have posted my slides on my SlideShare account. The session was recorded, but I am not sure when it will be made available.

Thanks to all that attended and asked some great questions. Sorry I had to leave early, but I had ‘parenting’ chores…

 

Understanding StageWebView and the viewport tag

My current solution for displaying dynamic interactive maps in my Android applications is to display a HTML-based Google Map within an instance of StageWebView. For the most part this has worked well, except for the long start up process. This often gives the appearance of the application being frozen. So, I sought a solution to try to improve the user experience.

The first step was to find a way to hide the StageWebView until it had finished its initialization and contacted the server. Since this component is of the ‘Stage’ type, this means that the normal display manipulation will not work. Instead, I created the viewport of the StageWebView offscreen. Now, I just need to know when it has contacted the server and the first page has been loaded. For this, you can listen for the Location Changed event. (Note, there appears to be a bug in AIR for Android 3.0, where this event is only fired upon the first URL that is accessed. This is important later).

Once the page has been loaded into our StageWebView, I reset the viewport to be on-screen. Since I have a loading spinner animating on the stage, this delay is now neatly masked.

Loading Indicator

Loading spinner

However, my screen still shows a white StageWebView. Then the map tiles are displayed, followed by the map controls. So how can I improve this portion of the process?

StageWebView initializing

The white StageWebView

In exploring the Google Map forums, I came across the notion of first serving a static Google Map, then waiting for the “tiles_loaded” event to be fired to swap the static map with the dynamic one. This was as simple as adding an <img> tag for the static map, and an event listener. In my web browser, this solution worked flawlessly.

Since there is a Location_Changing event that StageWebView is supposed to fire when the URL is changing, I thought I could tie into this by changing the page’s URL with an # attribute. But I then learned that this event does not currently properly fire on Android devices. I had planned to keep the StageWebView off-screen until the dynamic version of the map was ready before changing its viewport location.

Instead, I was forced to display the static map, then allow the loading of tiles and the map controls to occur visibly to the user. I soon ran into another problem. I had defined the width of the static map to be 480 pixels wide (I would have custom versions of the html page per device width), but once the html file was loaded into the StageWebView, I was able to scroll the image horizontally. What was going on!? Everything was working fine in my desktop browsers.

Map with scroll bars

Note the scroll bars

So, I began looking into the various attributes of the viewport meta tag, to see if there was something I could do to adjust the viewport. If you are not familiar with this tag, the Android documentation has a great reference on it. If you read through their documentation, you will learn that web pages on high-density devices (which is required to run AIR for Android) are automatically scaled by 150%. Eureka! Now I had confirmed why the static image became scrollable, now to find the solution. Reading further, there is another interesting attribute that can be set: target-densitydpi. To quote the documentation, “You can change the target screen density for your web page using the target-densitydpi viewport property.” This property has five values; device-dpi, high-dpi, medium-dpi, low-dpi, or a value. The one of interest for us is the device-dpi. If the target-densitydpi is set to device-dpi, the page will use the device’s native dpi as the target dpi and default scaling never occurs. And with this one addition to our viewport tag, our html file will now renders correctly on-device. Here is a sample apk and the source files.

AIR for Android Publish Bug

Recently I had the pleasure of being an Teaching Assistant for Doug Winnie’s Creating Content for Mobile Devices and Tablets in Flash Professional CS5.5 lab at the 2011 Adobe MAX conference. It was a lot of fun assisting students through the process of creating an application that could adapt to various devices. However, during the two labs, we encounter two students having trouble publish updates to their devices.

If I recall correctly they both were using the lab computers, and had installed the correct drivers for their devices. They successfully publish one of the earlier steps of the lab on to the device. Later in the lab, when they tried publish a new version of their apk, it failed.

The revised file ran fine in the ADL, but if the student tried to publish or run a debug version on device, an older version was always published. We even manual deleted the apk from the device, and tried republishing.

Rusty from the Flash Player team was also TA, took a lot, as this issue was above my pay grade. He too was puzzled by the behavior.

In the end, his best guess (without having access to any of the system), was the cached build files that AIR was using to speed compiling were not getting marked as ‘dirty’ and being rebuilt. This might be do to the configuration of the lab machines, but I want to take moment and blog about it. The final solution was to quit Flash Professional, and relaunch it. This seemed to clear up the problem.

FiTC Presentation: Prototyping Mobile Applications with Flash Professional

I recently gave a presentation at the FiTC unconference on “Prototyping Mobile Applications with Flash Professional“. Thanks again to all who took time out of their busy MAX schedule to stop by. The heart of the talk was on leveraging the Code Snippets panel in Flash Professional to rapidly create low-fidelity prototypes. I was going to record a demo of this, but Paul Trani from Adobe beat me to it. So here is his video into using Code Snippets for Rapid Mobile Prototyping.

Review: Flash Development for Android Cookbook by Joseph Labrecque

The world of mobile development is a new and exciting world for many Flash and Flex programmers.  They are learning about a whole new development platform, that utilizes a variety of technologies like accelerometers, GPS, cameras, microphones, and touch screens, just to name a few. Joseph Labrecque, employed by the University of Denver as senior interactive software engineer specializing in the Adobe Flash Platform, has written a clear and concise collection of recipes on these and other mobile development specific topics.

This book is not an introduction to development on the Flash Platform. Some familiarity with ActionScript is required. Nor is this book designed to have you work through an entire project from cover to cover (like the Classroom in the Book series). It is intended more as a reference guide.

For example, the chapter on using geolocation will walk you through the various class imports that are required, as well as the methods and functions that can be accessed, but it does not place it within context of an actual application. The advantage is the reader can see just the relevant code for using geolocation in their application, without have to create a ‘real-world’ demo, which often confuses the reader in the end.

Joseph does an excellent job in showing each topic for a variety of development environments. If you develop in Flash Professional, Flash Builder, or FDT, you will find this book useful.

“Flash Development fo rAndroid Cookbook” is one of my top recommended resources to anyone starting to develop in the mobile space.

Create Mobile and Tablet content with Flash Professional CS5.5

Come to the next San Diego Flash User group for a special event! Doug Winnie, Web Community Manager from Adobe Systems, will give an early run-through of his MAX lab for everyone to follow along with. Doug will walkthrough how to create a mutli-device project using Flash Professional CS5.5 and ActionScript 3.0. Bring your laptops and your development devices to follow along!

Doug Winnie is a Web Community Manager at Adobe Systems where he works with the developer and interactive design communities to help their workflow and efficiency when working with the Flash Platform and HTML5. Doug formerly was Principal Product Manager for Adobe Edge, Adobe Flash Catalyst and Creative Suite Web Premium. Doug tweets as @sfdesigner on twitter, blogs at sfdesignerdw.wordpress.com and lives in San Francisco, CA.

When: Sept 12th @6pm

Where: Art Institute of San Diego, South Building
7675 Mission Valley Road
San Diego , CA 92108

Hope to see you there!

D2WC Short Recap & Slides

Designer / Developer Workflow Conference

I am a little late in getting around to writing about the second Designer/Developer Workflow Conference (aka D2WC) in Kansas City, Mo. This is the second time I had the pleasure of speaking here. This year’s topic was on Designing Great Mobile Apps. This was an expanded version of the talk I gave at 360|Flex. I had a wonderful time presenting it, and enjoyed all the follow up conversations.

The conference was fantastic! All the sessions I attended were well done and informative. In many cases I had to make hard choices between sessions. I only hope the recordings turn out. It was great to have some wonderful chats with the attendees.

I want to thank Dee Sadler for hosting yet another great event, and look forward to next year’s (where ever it maybe).

For a deeper write up on the conference, take a moment at read Chad Udell’s post (who I also enjoyed his preso at the conference) and Mark DuBois’ as well.