iOS Theme for Flex Mobile Projects – Proof of Concept

Default theme (left) vs. custom iOS theme (right)

Default theme (left) vs. custom iOS theme (right). One application on two platforms using custom skins & styles combined with the os-platform CSS media query.

The release of Flash Builder and Flex SDK 4.5.1 adds support for iOS and BlackBerry Tablet OS in Flex mobile projects in addition to the current Android support. With 3 total mobile platforms to target, platform-specific design and usability considerations become more important.

This post is a bit of a teaser for Adobe Developer Week. In my 2 sessions, I’ll overview many of the important concepts and tools available in the Flex SDK when it comes to designing and developing Flex mobile applications for multi-screen and multi-platform.

One of the easiest ways to customize your application on a per-platform basis is to use the os-platform CSS media query. The slide below shows how a style value can be applied for a single platform while also specifying other style values for all platforms:

os-platform CSS media query

I could also apply platform specific logic at runtime by checking the beginning of the version string: flash.system.Capabilities.version.indexOf(“IOS”) == 0 (Android returns “AND” and BlackBerry Tablet OS returns “QNX”).

Using these tools, I’ve created an example project that applies an iOS-styled theme only when the app runs on an iOS device. Check out the gallery below to compare the default Flex theme to my custom iOS theme. I’ve built this project mainly as a proof of concept to show that Flex 4.5.1 can let you target multiple platforms in a single project with minimal effort.

Just be aware that Flex doesn’t do very much platform-specific logic or styling out of the box. This is by design. TextInput and TextArea skins are the major exception to this rule currently.

Of course, there’s more to consider beyond skinning and styling such when targeting multiple platforms at once. A good example of this is Android’s hardware back button. For example, when building iOS or BlackBerry Tablet OS apps that use a ViewNavigator, be sure to add a back button and call navigator.popView() to allow users to go back to the previous View.

There’s a lot of sample code to dig through, too much for one blog post. Download the FXP and start exploring. Here’s a short summary of the tools and techniques I’ve used and also a list of the custom skins that you can re-use in your own projects:

  • Spark skinning
  • Mobile-optimized skins
  • CSS media queries: os-platform and application-dpi
  • Capabilities.version check in ActionScript for platform-specific logic
  • MultiDPIBitmapSource for DPI-specific bitmaps without scaling artifacts
  • ViewMenu iOS skin (a.k.a. ActionSheet in the iOS SDK)
  • ActionBar iOS skin
  • TabbedViewNavigator tabBar iOS skin
  • HScrollBar/VScrollBar iOS skin
  • Panel iOS skin (as a dialog)
  • Panel Android skin (Android 2.3 Gingerbread-styled dialog)
  • overlayControls – Overlay ActionBar and the tabBar on top of ViewNavigator content Views
  • Custom List subclass with optional title skin part
  • Custom mobile-optimized item renderer with rounded-corner (cornerRadius) support
  • Scaling layouts – Add a scale factor to layouts without using application scaling (via applicationDPI)

Like I said, that’s a lot to cover. Expect a few more blog posts based on this example as well as a few articles coming up on Adobe Developer Connection.

FXP: mobiletheme_ios_usage.fxp
iOS Vector artwork: http://www.mercuryintermedia.com/blog/index.php/2009/03/iphone-ui-vector-elements
Icons: http://www.glyphish.com


Share on Facebook