The PhoneGap announcement at MAX 2011 really got a lot of people excited (including me!), and it raised a few questions about how it changes our jobs as evangelists.  PhoneGap gives us the means to build cross-platform apps with HTML5 with hooks into the device’s native APIs (see my previous post).  Having new things to show off to developers and customers is always a good thing, especially when this new thing lets us stretch our new HTML5 muscles on mobile devices.  I’m already playing around with using Adobe Edge to animate some interactions in a mobile app (stay tuned!).

As a technical evangelist talking to developers, having PhoneGap in my arsenal removes the  ”HTML vs Flash/Flex” religion  from the discussion and allows us to have a real conversation about which technology is the best solution for the requirements at hand.

Here’s an analogy:  If I worked for a company that sells tile flooring, it would be tough for me to convince someone that tile is the best choice for a particular room because they will expect me to say that tile is best for everything.  Conversely, if I worked for a company that sells wood flooring, they expect me to say wood is best.  However, if I work for a company that sells both types of flooring, I can have a real discussion about which is best on a room by room basis because I will have credibility in both types of flooring.

Now the conversation starts at a higher level and allows me to be more effective at demonstrating the value that Adobe offers to anyone building mobile apps.

There are clearly use-cases where PhoneGap will indeed be the better choice because of the lightweight nature, broader device support and the availability of the required skillset to build these types of apps.  However, there will continue to be use-cases that go beyond the capabilities of HTML5 and will demand the more capable Flash/Flex platform.  Features such as collaboration, complex UIs, handling of large data sets, real-time data processing, and rich data visualization are just a few examples where HTML5 simply won’t cut it today.  However, as the capabilities of the platforms evolve, Adobe is in a good position to provide solutions across the spectrum.

Our team is in rapid learning mode now, but that’s why we do this job.  New products, new technologies and new ways of approaching problems is what fuels us.  We’re basically professional learners.  During the next few months, you’ll see more content related to PhoneGap as well as the new features coming in Flex 4.6, and much more.  Fun, fun!

…but then when you turn it landscape, you get the white borders (or whatever your app background color is):

…so you change the splashScreenScaleMode property to “stretch” and you get this (destroys the image):

…so then you start looking into how to include multiple splash screens, which requires a custom preloader and additional image work.

Below is the same splash screen, but as you can see, I used a single square image that works with both orientations.

What about handling multiple device sizes? The same technique works, as long as you keep the content within the center square that has a width/height equal to the short side of the smallest device you intend to install on.

Below are two images; one for tablets, and one for phones. I’ve drawn the portrait and landscape edges of several popular devices.

Tablets:
The largest tablet I’ve seen is the Motorola Zoom and Samsung Galaxy Tab 10.1, both of which are 1280×800, so my diagram below assumes that it is the largest possible resolution by making the splash screen image 1280×1280:

Click for full-size

Phones:
Phones come in many resolutions. The image below assumes that the largest resolution is 960×640 (iPhone 4), so the image is 960×960:

Click for full-size

Depending on your splash screen design, you could get away with only two images, one for tablets and one for phones. I typically do three images, one for the low-resolution iPhone 3Gs, one for other phones, and one for tablets.

If you are building an app that targets multiple device resolutions, I suggest you use the code below as your preloader. It assumes three images – tablet, high-res phones, low-res phones. It selects the image based on the length of the longest edge of the screen.

// Based on original DPI-based code by Jason San Jose at http://www.adobe.com/devnet/flex/articles/mobile-skinning-part2.html#articlecontentAdobe_numberedheader_5
// Improved by Christophe Coenraets to select image based on length of longest edge of device - http://coenraets.org
// Simplied by Greg Wilson to use only 3 images for all devices
package
{
	import flash.desktop.NativeApplication;
	import flash.display.NativeWindow;
	import flash.display.Stage;
	import flash.display.StageAspectRatio;
	import flash.display.StageOrientation;
	import flash.system.Capabilities;

	import mx.core.DPIClassification;
	import mx.core.mx_internal;

	import spark.preloaders.SplashScreen;

	use namespace mx_internal;

	public class MultiDPISplashScreen extends SplashScreen
	{
		[Embed(source="assets/splash-tablet.png")]
		private var SplashImageTablet:Class;

		[Embed(source="assets/splash-high-phone.png")]
		private var SplashImageHighPhone:Class;

		[Embed(source="assets/splash-low-phone.png")]
		private var SplashImageLowPhone:Class;

		public function MultiDPISplashScreen()
		{
			super();
		}

		override mx_internal function getImageClass(dpi:Number, aspectRatio:String):Class
		{
			var min:int = Math.min(Capabilities.screenResolutionX, Capabilities.screenResolutionY);

			if (min > 960)
				return SplashImageTablet;
			else if (min > 320)
				return SplashImageHighPhone;
			else
				return SplashImageLowPhone;
		}
	}
}

CODE:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   applicationComplete="init()">

	<fx:Script>
		<![CDATA[
			import flash.sensors.Geolocation;

			protected var geo:Geolocation;
			protected var geoLastEvent:GeolocationEvent;
			protected var geoCheckCount:int;
			protected var geoTimer:Timer;

			protected function init():void
			{
				log.text = "App Starting\n";
				if(Geolocation.isSupported)
				{
					geoCheckCount = 0;
					geo = new Geolocation();
					geo.setRequestedUpdateInterval(500); 		// suggest a very frequent update of 500ms
					geo.addEventListener(GeolocationEvent.UPDATE, onUpdate);

					// Create a timer
					geoTimer = new Timer(30000,1);
					geoTimer.addEventListener(TimerEvent.TIMER_COMPLETE,onTimeout);
					geoTimer.start();
				} else {
					log.appendText("GPS not supported on this device\n");
				}
			}

			protected function onUpdate(event:GeolocationEvent):void
			{
				++geoCheckCount;
				if(geoCheckCount <= 1) return; // Throw away the first location event because it's almost always the last known location, not current location
				geoLastEvent = event;

				if(event.horizontalAccuracy <= 150)
				{
					geoTimer.removeEventListener(TimerEvent.TIMER_COMPLETE,onTimeout);
					geoTimer.stop();
					log.appendText("LOCATION: " + event.latitude + " / " + event.longitude + " - " + event.horizontalAccuracy + "\n");
					geo.removeEventListener(GeolocationEvent.UPDATE, onUpdate);
					geo = null;
				}
			}

			protected function onTimeout(event:TimerEvent):void
			{
				geoTimer.removeEventListener(TimerEvent.TIMER_COMPLETE,onTimeout);
				geoTimer.stop();
				geoTimer = null;
				if(geoLastEvent != null)
				{
					log.appendText("Timed out - best location is: " + geoLastEvent.latitude + " / " + geoLastEvent.longitude + " - " + geoLastEvent.horizontalAccuracy + "\n");
				} else {
					log.appendText("Unable to determine location before timeout\n");
				}
				geo.removeEventListener(GeolocationEvent.UPDATE, onUpdate);
				geo = null;
			}

		]]>

	</fx:Script>
	<s:TextArea id="log" width="100%" height="100%"/>
</s:Application>

Geolocation object

There are two classes that you need in order to implement location in your app – Geolocation and GeolocationEvent. When you create a Geolocation object, it turns on the GPS sensors on the device and provides you with a couple of important properties: isSupported and muted.  The isSupported property is used to determine if the device has location support. If you run this on your desktop computer or on a Barnes and Noble Nook, this property will be false because no location capability exists on the device. The muted property is slightly different. This property indicates whether the user has turned off location support for the device or denied permission for the app itself.

iOS muted BUG: There is a known bug with the muted property on iOS devices with the SDK that ships with Flash Builder 4.5.1. On iOS, the Geolocation muted property is always true, so it should be ignored in the current version. This is already fixed in the next release.

There is one method to be aware of on Geolocation — setRequestedUpdateInterval() — it’s used to request a more (or less) frequent location update event. In other words, you are telling the Geolocation object to check for location changes more (or less) often. However, it’s important to note that the OS may choose a different interval to conserve battery power. The name of the method should actually be setRequestedUpdateIntervalPLEASE() because you are only requesting the interval, not commanding it.

GeolocationEvent object

After adding an event listener to the Geolocation object to receive location change events, you will start receiving location events in your event listener. The event contains the latitude, longitude, accuracy, speed, altitude, and heading. Here’s some important facts about location events:

• The first location event received is usually NOT the current location. It is often the “last known location” or the cached location. Your app will get this first event almost immediately, but remember, it might be an out of date location along with the associated out of date accuracy. For example, I created a simple test app that logged my location. I ran it from home and let it run for a few seconds until I was getting good accuracy of about 10 meters. I shutdown the app and drove 10 miles away and ran it again. I immediately received a location event that was the location of my house with an accuracy of 10m! If you don’t know to expect this, your app could make a bad conclusion about the location. Also, the timestamp is no help here (contrary to popular belief). I talked to the Flex engineering team to confirm this. The documentation will be updated shortly. In my opinion, it’s a bug until documented. Once documented, it’s actually a cool feature.  One of the apps I’m working on has a “I am here” button that captures the current location and sends it to the server.  In my code, I ignore the first event.  The second location event is a real attempt to report my current location.  I’ll share the full code of this in the next blog post.  UPDATE: Docs will be fixed soon.
• verticalAccuracy is always wrong in my testing (Android) — There are two properties related to location accuracy – horizontalAccuracy and verticalAccuracy. The horizontalAccuracy is exactly what you think it is. However, in all of my testing across multiple devices, the verticalAccuracy is always identical to the horizontalAccuracy, which is practically impossible. I won’t go into details because it would quadruple the size of this article, but some simple web searches will confirm what I’m saying. Vertical accuracy is usually 2 to 3 times less accurate than horizontal accuracy of any GPS device (unless it uses WAAS or another augmentation system, which no Android or iOS devices supports yet). Therefore, verticalAccuracy should be ignored because it’s simply not correct. I’ve yet to figure out if this is a bug with the flash.sensors.Geolocation class or a limitation of the underlying OS. I’ve looked through the Android SDK documentation and can’t find a vertical accuracy property anywhere. If anyone can clarify, please add a comment below. If it is indeed not being reported by the underlying OS, I think it is a bug in flash.sensors.Geolocation because the expected behavior is to report either a NaN or some other obvious invalid value rather than a value that is wrong and misleading.  UPDATE: On Android, the underlying OS returns “radialAccuracy” and both horizontalAccuracy and verticalAccuracy are being set to that single value.  This is a bug that will be addressed.  Android does not return a vertical accuracy so the value should be set to either NaN or a negative number.  On iOS, the vertical accuracy is set correctly to the vertical accuracy reported by the underlying OS.
• heading is always NaN in my testing (Android) — I’ve yet to test on a device where I get a value for heading. You could write some code to calculate it based on the location history/track, but the property itself is always NaN. I highly suspect that this is a device limitation, not a bug. If anyone has seen a value for heading, let me know in the comments.  UPDATE: On iOS, I get heading information.
• Two different types of determining location and a possible bug — Most modern mobile devices have two different means of determining  location – WiFi/Cell-ID (coarse location) and GPS (fine location). GPS is much more accurate.  I have discovered what I think is a bug with how the two types of locations are used (I’m working with engineering to confirm) — If the GPS is enabled on your device, you will not receive any WiFi/Cell-ID-based location events, so if you are out of range of GPS satellites (e.g. in the basement), you will get no location events at all (other than the initial last-known-location as mentioned above). The expected behavior (IMO) is to receive WiFi/Cell-ID-based location events until the GPS signal is acquired.  You can see this behavior in the Google Maps app.  When you first run Google Maps, it will show your location almost instantly but it will have a wide circle of accuracy.  This is the WiFi/Cell-ID-based location.  Once the GPS signal is locked in, the circle shrinks to only a few meters.  However, I am unable to recreate this functionality using the flash.sensors.Geolocation class. Oddly, if you disable the GPS on your device, you will then receive WiFi-Cell-ID-based location events as expected.  This feels like a bug to me and I suspect that the code uses either WiFi/Cell-ID or GPS and is not sophisticated enough to use both as I just described.
• Location permissions –  On Android, there are two relevant permissions related to location –  android.permission.ACCESS_FINE_LOCATION and android.permission.ACCESS_COARSE_LOCATION.  I have confirmed that setting the android.permission.ACCESS_FINE_LOCATION includes the COARSE permission. In other words, you do not have to specify both permissions because FINE includes COARSE. This is confirmed at http://developer.android.com/guide/topics/location/obtaining-user-location.html.

Hopefully this clears up some confusion on Geolocation.  It’s hard to test this stuff, so if you find any evidence of my conclusions being wrong, please don’t hesitate to let me know in the comments.

Writing location-based apps is incredibly fun and really creates some interesting app opportunities.  In my next post, I’ll share some code for a typical “Here I am” app that handles the last-known-location event and implements a simple timeout.

Developers need to know enough to use the right tool for the job at hand–and that holds true for any technology, not just Flex. Yes, some developers are using Flex for things that Flex should not be used for (this has always been the case). Flex is a framework that gives us components, a declarative language (MXML), a sophisticated event model, data binding, view management and many other useful, time-saving features. When you compile a Flex app, everything is converted to pure ActionScript as step one of the build process. Is this generated ActionScript optimized for every possible use case? Of course not. The Flex product managers and engineers put a lot of effort into prioritizing where to invest engineering time based on a wide array of use cases, but they obviously can’t optimize for every possible scenario. On the other hand, a ton of engineering hours have been invested in optimizing the Flex framework, and you should take advantage of this where possible rather than investing your own time in building custom ActionScript. It simply depends on your requirements.

So, when considering whether to build an app with the Flex framework or to build it in pure ActionScript, you are really making a decision between using prewritten/generated ActionScript that was created for a multitude of use cases or to write your own ActionScript that is specific to your specific use case. Of course, the latter is sometimes going to perform better because your code will be exactly what you need it to be, but it’s usually going to take you much longer to write your app.

You can take the quest for performance to the extreme. If you want the absolute best performance possible, write your app in machine code that targets a specific device and create a different version for each processor that your app will run on. The performance will be insane because every instruction will be specific to your app, but the development effort will take years! I realize that this is a crazy comparison, but again, we developers have to make some intelligent decisions when deciding what to use. Frameworks like Flex save us time, but they do have some costs in terms of performance. By the way, the same holds true for JavaScript. I recently wrote an application that utilized a lot of jQuery. jQuery saved me a TON of time, and thankfully in my app, the performance was adequate without me having to replace any of the jQuery functions with my own JavaScript. (If you search around, you’ll find people having the same debate on when to use jQuery versus straight JavaScript though).

We are seeing new life in the Flex versus ActionScript debate because of the recently released 4.5.x version of Flash Builder, which supports building Flex apps that target iOS, Android, and BlackBerry Tablet OS. All of us who have been building mobile apps are having to think about performance a lot more than usual because these devices have dramatically fewer resources than the modern desktop/laptop computers that we’ve been spoiled by. Suddenly we are worrying about every optimization and every byte of memory just like “back in the good ol’ days”. When performance is an issue, the choice to use a framework that trades performance for a shortened development process is not to be taken lightly, so the cost versus benefit analysis is key. However, it’s not an all or nothing proposition…

The guys at HD Interactive have written some great games that are in the Apple app store, Android Market, B&N Nook store, and other markets. The games include Kung Fu Battle Slots, Pyramix, MrMixit, Neptune, and more (their home page has all of the links so you can check them out). I have been super impressed by their app performance, so I sat down with them and looked at how they do it. The apps are indeed Flex apps and they take advantage of Flex views, the component model, and the event model. However, many of the animations, transitions, and effects were written in pure ActionScript that is specific for the game because they needed the best performance possible for the specific use case. For example, some of the effects and transitions in Flex are great for most apps, but they were not fast enough to handle the types of animations and the rich graphics that HD’s games demanded, so they made the smart decision to invest some extra time writing their own animation code. They even go to Flash Pro to build some of the animations because the tooling made more sense for a couple of specific items. They are masters at using the right tool for the job at hand. They utilize Flex where it saves them time, and they write specific ActionScript as needed.

Most of the apps I’m involved in are data-driven business apps, which are very well suited for Flex. Flex saves me a huge amount of time because the framework provides a lot of the building blocks that these apps typically require. For these apps, the decision to use Flex is a no-brainer. This is usually the case for enterprise apps. However, for other apps, the decision may not be as clear. Like many decisions we developers make, the answer is “IT DEPENDS”.

From my own personal perspective, this is the most excited I’ve ever been about Flex and the most energized I’ve been since I joined the Adobe Evangelist team four years ago.  The story is solid, the value proposition is clear, and the technology delivers.  Getting developers excited about it is easy! (don’t tell my boss!).

For example:

protected var persistenceManager:PersistenceManager = new PersistenceManager();;
...
...
persistenceManager.setProperty("userLogin", userLogin);
persistenceManager.setProperty("whatever", whatever);

persistenceManager.save(); // force a save now otherwise, it sometimes won't save on iOS

Go to http://flex.org/ask during the event time and you’ll find a link.

We’ve never tried an online event quite like this, but we’re excited to try. Come check it out on Thursday, August 18th from 9am to 10:30am PDT (GMT-7).

UPDATE: A transcript from the event is available on http://flex.org/ask.  Another event will be scheduled soon – visit http://flex.org/ask often for updates.

The Politifact app is now available in 5 online stores –

• Android Market – https://market.android.com/details?id=air.com.tampabay.Politifact
• Apple App Store – http://itunes.apple.com/us/app/politifact-mobile/id444548650
• BlackBerry App World – http://appworld.blackberry.com/webstore/content/49265?lang=en
• Barnes & Noble Nook Store – http://search.barnesandnoble.com/Politifact-Mobile/Times-Publishing-Company/e/2940043855633
• Amazon Appstore for Android – http://www.amazon.com/Times-Publishing-Company-Politifact-Mobile/dp/B005FHP5K8/ref=sr_1_1?ie=UTF8&s=mobile-apps&qid=1312816567&sr=1-1

The app in the picture is Christophe’s Mobile Trader (video demo here).   This is one of four demos that I’ve been showing recently.  I have to admit – this is fun stuff and the reaction has been simply fantastic!  More soon!

The dialog box to the right is now something you can see yourself minutes after downloading Flash Builder 4.5.1.

Are you skeptical?  Many developers are. But, over the past few weeks, we’ve been showing off apps built with 4.5.1 and watched developer after developer say “wow” when they see the performance of the resulting applications (see my previous blog post for more details on how developers responded and the questions they asked).

• To see how great the performance is, check out Christophe Coenraets’ Adobe TV video – Christophe demonstrates the same app running on an iPad, iPod touch and various Android devices.  The apps even show off video collaboration over 3G across devices and across OSes!
• I recently interviewed Shashwati Keith, one of the Flex SDK QE engineers about an app that she wrote called Muni Tracker that is already available in the Apple app store and Android Market (and soon the BlackBerry PlayBook app store!).  See the Adobe TV video.
• What about games?  Here’s an Adobe TV video where I demonstrate some games built by HD Interactive.  The games are Pyramix and Mr. Mixit, both of which are available for iOS and Android now (be sure to check out the reviews!).  Pyramix was even recently on the “New and Noteworthy” list of word games in the Apple app store (more details here)!  I recently interviewed the Sean Carey and Todd Williams of HD Interactive about how these apps were developed and how they addressed the challenges of building apps for multiple device types.  We also discuss the economics of being able to build apps for multiple OSes, marketplaces, etc. See the video here.
• Serge Jespers recently did an Adobe TV video demonstrating how apps can be built for all three mobile OSes using Flash Builder 4.5.1.
• Serge also did an Adobe TV video specific to building apps on iOS (certs, provisioning, etc.)

So yes, it’s real, it’s here, it’s available for download and many developers already have solid apps in the various app stores today.

If you’ve stumbled onto this article and are asking “What the heck is Flex?”, I suggest you start here.  To sum it up, it’s OO, event driven, component-based and something you will acclimate to quickly if you are familiar with Java and similar languages.  The IDE is eclipse-based so you already know how to use it.  You can even do on-device debugging and app deployment FROM Eclipse.

Are you wondering how we get apps to work on iOS?  I recently interviewed Scott Petersen, one of the geniuses behind the magic, and posted the interview here.

Check it out at http://adobeevangelists.com/superblog/

It updates every 2 hours (on the even hour).  When you click an individual article, you will go to the original source on the author’s blog.

There is also an RSS feed at http://adobeevangelists.com/superblog/feed

Here’s a list of topics:

• Introduction to Flex 4.5 and Flash Builder 4.5
• What’s new in Flex 4.5
• New Features in Flash Builder 4.5
• Flex and PHP Integrated Development with Flash Builder 4.5 for PHP
• Build Your First Mobile Application With Flex 4.5
• Architecting Flex Applications For Re-Use Across Web, Desktop and Mobile
• Multi-Density and Multi-Platform Authoring for Smart Phones and Tablets With Flex 4.5 SDK
• Migrating from Flex 3 to Flex 4.5: Understanding Changes from Halo to Spark
• Creating Expressive Applications with Flash Builder and Flash Catalyst
• Building Mobile Applications for BlackBerry Playbook
• Coding Productivity Features in Flash Builder 4.5
• Next Generation Application Development for the Enterprise
• Building Data Driven Flex and Java Applications
• Flex and BlazeDS Integration with Spring
• Maximizing Flex Application Performance (Mobile and Desktop)
• Creating Performant Skins and Item Renderers for Mobile Applications
• Anatomy of an Enterprise Mobile Application Built with Flex 4.5

Each webinar topic is one hour long.  For more information and to register, go to http://adobe.ly/37lJOG

Facts about Flex.org:

• Flex.org is managed by the Adobe Platform Evangelism Team so it’s a bit less formal than the typical Adobe sites.
• It is a great first stop for anyone interesting in seeing what Flex is about.  It has very good introductory content about all things Flex related.  In other words, it “evangelizes” Flex.  If you want to introduce a coworker or friend to Flex, send them to the site.
• The new site has links to tutorials, technical articles and mobile specific articles – this type of content did not exist in the previous versions of Flex.org.  I think you will find that the content changes much more frequently than the previous site.
• Many of the articles are simply syndicated from our various blogs, Adobe Developer Connection, Adobe TV, the Flex Team blog and any other content that we feel is relevant and useful.
• The entire site has an RSS feed at http://flex.org/feed so go subscribe!  The individual sections have RSS feeds as well – just add “/feed” to the URL.
• The Flex showcase is still the same as before and has lots of great reference sites.  We will be adding mobile showcase items soon.  Be sure you follow http://twitter.com/flexshowcase.  We are always looking for new submissions to the Flex.org showcase.

In a few weeks, you’ll be able to build Flex apps that target Android, BlackBerry PlayBook, and iOS devices using Flash Builder 4.5.

• Shipping software availability:
  • Flash Builder 4.5 ships VERY soon and includes Android support out-of-the-box
  • An update to Flash Builder will be available in June that adds iOS and PlayBook support
• Pre-release software availability:
  • If you join the pre-release program (see below), you can get 4.5 today with Android support
  • The pre-release site will be updated in a few days with a version that adds iOS and PlayBook support

How to see for yourself

If you would like to give this a try, I recommend the following steps:

• Join the pre-release program for Flash Builder. A recent build is already available with Android support. A newer build with iOS support is coming very soon. There is also a version of Flash Builder on labs code-named “Burrito”, but it’s a bit old and missing some recent advancements. I recommend that you skip Burrito and get into the pre-release program so you can get the hot-off-the-press bits.
• Download and install Adobe AIR Launchpad — this tool is one of the best learning resources you’ll find. It will help you create your first mobile project with well commented sample code. This is a pre-release of Launchpad 2.6 that supports the current Flash Builder pre-release
• If you have an Android device, go install Tour de Mobile Flex on the device. It’s another great learning resource.

If you are new to Flex, here are a few additional resources:

• Tour de Flex – a collection of 500+ running code samples
• Flex.org – a great starting point

Imagine a world…

Imagine a world where developers can build awesome apps for the web, desktop (Windows, Mac OS X, Linux) and a huge majority of the mobile device market.  Imagine tooling that supports building, testing, and deploying these apps to all of these platforms and devices.  Imagine being able to share and reuse code from platform to platform/device to device!

I’m coming dangerously close to sounding like a marketing guy so I’ll stop there…but you have to admit, the vision is exciting to imagine… but do you really believe it? Keep reading.

Yes, it’s real

Many of you have heard us talking about the above vision for a long time.  I’m thrilled to tell you that the vision is now real.  It’s not smoke and mirrors.  It’s not clever click-thru demos.  It’s the real deal and it’s done VERY well.

The “Wow” process

Our job as technical evangelists is to prove to you that this stuff works and strive to be experts before you ever get your hands on the technology so we can answer your questions.  This forces us to live on the bleeding edge of builds from our engineering teams.  During the past 3 months, I’ve probably installed at least 10 different builds of Flash Builder 4.5 (in addition to many other products I evangelize)!  About 5 weeks ago, we started getting builds that we felt were ready to take “on tour” so we hit the road and went to show it off to some key customers and a few user groups.  Developers are never truly convinced until they get their hands on the technology and try it for themselves, and based on the results so far, developers are starting to be convinced!

The biggest surprise to developers (including myself) is the performance of Flex apps on iOS devices.  During the past several meetings with customers and user groups, I’ve passed around my iPad, iPod Touch, and various Android devices and let people interact with the apps.  Here are some typical comments and some frequently asked questions (my answers are in parenthesis).  Every one of these is a near exact quote that I’ve heard in the past 5 weeks.

• “Wow – the performance shocks me!” (me too!)
• “I didn’t know you guys could build apps for iPhone/iPad” (Yep – and also Android and BlackBerry PlayBook and of course desktop and web!  There were some changes to the Apple developer rules in September, 2010 that allows developers to use non-Apple tools to build apps for iOS devices.  This allowed us to expand our mobile strategy to include iOS in our growing list of supported platforms.)
• “I thought Flash wasn’t allowed on iOS devices” (Apple still does not allow Flash Player to be installed on iOS devices for the web browser, but these are not browser apps… they are installable apps that have been cross-compiled to Objective-C bytecode. Your apps can be packaged into a standalone .ipa file, the file extension of all iOS apps.  No separate runtime is needed.)
• “What about mobile specific stuff like GPS, accelerometer, and multitouch?” – (The Flex 4.5 SDK adds many mobile-specific APIs including all of those plus support for cameras, microphone, gestures, and more. — then I demo these APIs using Tour de Mobile Flex and Adobe AIR Launchpad — links below)
• “I’m surprised at the level of detail in the UI behavior… scrollable lists have a subtle bounce at the end and movement is smooth and fluid.  It feels like how I expect a mobile app to feel.” (Yep – I was surprised too! I even blogged about my own skepticism here)
• “So, I can write the app once and deploy it on iOS, Android, and PlayBook? Really?” (Yes, almost. Different devices have different screen sizes, pixel densities, aspect ratios, etc. An app that looks great on an iPad might need some tweaks to also work well on an HTC Inspire phone. An app that works great on an iPhone may need some UI tweaks to better take advantage of a tablet screen like the Motorola Xoom or a BlackBerry PlayBook. The Flex 4.5 SDK provides APIs to query screen dimensions and density so you can dynamically make UI adjustments based on the device. Also, module loading is not supported on iOS nor is loading any external SWFs that contain ActionScript. This is due to Apple’s app restrictions on loading and interpreting external code.)
• “Is it easy to convert a non-mobile app built with Flex into a mobile app?” (It depends on the app. You probably don’t want to take a million line Flex project and try to deploy it to a mobile device that has a fraction of the CPU and memory of a desktop machine. However, some apps can be modified to work on mobile devices fairly easily after some UI tweaks and adjustments to take advantage of the touch-screen environment. Either way, it will be dramatically faster than writing the app from scratch using another technology.)
• “How does Flash Builder handle iOS application signing and provisioning?” (You will still need an Apple cert and provisioning profile for your app like any other iOS app. Flash Builder prompts you for the signing cert and the provisioning profile in the build configuration. Once you have these in place, Flash Builder will create the final .ipa for you.)
• “Can I create iOS apps using a Windows machine?” (Yes, it works the same as on Mac OS X.)
• “How do I handle application auto-updates?” (It’s no different than if you used the Android SDK or Apple SDK – updates are handled through the various marketplaces/app stores based on the version number assigned. No special code is required.)
• “Do apps built with Flex perform as well as apps built with the native SDK for each platform?” (It depends on the app.  For many apps, yes it will.  For apps with very complex animations such as with intense game graphics, you might want to turn to the native SDK.)

After 20 minutes of Q&A, most developers start shifting their questions to “How do I get this so I can try it out?”.  Last week, I showed this stuff at two user group meetings – Tampa and Nashville.  Both meetings resulted in several ongoing email threads with developers who are excited to get their hands on this stuff.  Every customer visit that my team has made in the past few weeks has had similar results.

Check it out now!

Hopefully I’ve at least made you raise an eyebrow in this blog post.  Rather than rambling on and on about how others have reacted, take a look for yourself.  Below are some videos that Christophe Coenraets, James Ward, Michael Chaize, and Lee Brimelow have put together showing off Flex apps on mobile.  Each video demonstrates what I’ve been talking about.  They are short and to the point, so it’s worth going through them.

• http://coenraets.org/blog/2011/03/flex-on-the-ipad/
  
• http://coenraets.org/blog/2011/04/flex-powered-multi-touch-data-visualization-on-the-ipad-android-and-the-blackberry-playbook/
  
• http://coenraets.org/blog/2011/04/flex-charts-on-the-ipad/
  
• http://www.jamesward.com/2011/04/11/tour-de-mobile-flex-on-ios/
  
• http://www.riagora.com/2011/03/preview-of-flex-on-ios/
  
• http://blog.theflashblog.com/?p=2711 (this is not using Flex – it’s pure ActionScript, but the performance is worth checking out)
  
• http://blog.theflashblog.com/?p=2716 (this is not using Flex – it’s pure ActionScript, but the performance is worth checking out)
  

What works when

• Shipping software availability:
  • Flash Builder 4.5 ships in a couple of weeks and includes Android support
  • An update to Flash Builder will ship in June that adds iOS and PlayBook support
• Pre-release software availability:
  • If you join the pre-release program (see below), you can get 4.5 today with Android support
  • The pre-release site will be updated in a few days with a version that adds iOS and PlayBook support

What’s missing

Most things are ready to go now including APIs for geolocation, accelerometers, multitouch, gestures, microphone, overlaying HTML content, and more, but we are missing a few things that developers are asking for including support for notifications, APIs for compass and the ability to make native OS calls. We’ll have more details on these soon as work is progressing on multiple fronts.

How to see for yourself

If you would like to give this a try, I recommend the following steps:

• Join the pre-release program for Flash Builder. A recent build is already available with Android support. A newer build with iOS support is coming very soon. There is also a version of Flash Builder on labs code-named “Burrito”, but it’s a bit old and missing some recent advancements. I recommend that you skip Burrito and get into the pre-release program so you can get the hot-off-the-press bits.
• Download and install Adobe AIR Launchpad — this tool is one of the best learning resources you’ll find. It will help you create your first mobile project with well commented sample code. This is a pre-release of Launchpad 2.6 that supports the current Flash Builder pre-release
• If you have an Android device, go install Tour de Mobile Flex on the device. It’s another great learning resource.
• Go steal borrow every Android and iOS device you can find. Your mom can live without her iPad for a few days, right?
• If you plan to try this on a real iOS device, you’ll need to join the Apple developer program ($99/yr) so you can get your cert and so you can provision apps.
• If you build a cool app, contact me. I want to see it!

If you are new to Flex, here are a few additional resources:

• Tour de Flex – a collection of 500+ running code samples
• Flex.org – a great starting point

It’s a great time to be a Flex developer and the excitement is spreading fast.  I hope this blog post inspires you to check it out!