Flex Mobile and Flash Builder Tips and Tricks

Posts in Category "Uncategorized"

I’ve been a bit quiet since the big developer week push. I’ve been keeping busy on the SDK. I just wanted to check in with the readers here to see what other mobile tutorials, examples and blog posts you want to see next. So, if you’ve got a need or an idea, leave a comment on this post.

Also, be sure to check out the forums at http://forums.adobe.com/community/flex/flex_general_discussion. It’s a great way to stay in touch with the community and get your questions answered directly.

The final article of my 3-part mobile skinning series is now posted at Adobe Developer Connection. Part 3 covers several topics related to multiplatform development, targeting Android, iOS and BlackBerry Tablet OS. I also cover how to use CSS media queries and how to create your own theme projects.

The recording from my Tuesday session is now posted at adobe.com. My apologies for the audio quality. I work remotely and I only have a mobile phone line at the moment. I’ll see what I can do to improve the situation for my Friday session.

To demo the project from my previous post, I recorded a video of the same application running on Android and iOS side-by-side. This is all done with a single code base that relies on Spark skinning (from Flex 4), CSS media queries (from Flex 4.5) and some skinning optimization practices that the Flex SDK uses for mobile skins.

There’s been a little confusion, so to clear things up, this isn’t officially part of the Flex 4.5 SDK. I built this project mainly to demo how far you can take AIR, Flex and Flash Builder across multiple screens and multiple platforms…all from a single code base! I hope this video and the sample code will get developers excited about building Flex apps for mobile.

My prior monkey patch will no longer work with Flex 4.5.1. New AIR 2.6 dependencies were added in 4.5.1 and the playbook_overrides.swc patch is no longer sufficient.

I’m choosing not to update playbook_overrides.swc for the moment to avoid additional confusion. Once RIM updates AIR on the PlayBook, this patch will not be required.

For now, I suggest keeping a copy of the Flex 4.5.0 SDK and use the playbook_overrides patch with your current projects. Flash Builder supports multiple SDKs for situations just like this (Preferences > Flash Builder > Installed SDKs). After the PlayBook update is available, transition your projects to 4.5.1.

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:

In case you haven’t signed up for Adobe Developer Week next week. Here’s a little screenshot of a demos that I’ll use for my Tuesday and Friday sessions.

On Tuesday, I’m covering a lot about adapting for screen DPI and also adapting for platforms including Android, iOS and Blackberry Tablet OS.

On Friday, I’ll go in depth into the implementation details of mobile-optimized skins and item renderers. I’ll walk through how to create a mobile-optimized Panel skin in ActionScript and I’ll also cover styling the mobile-optimized LabelItemRenderer and IconItemRenderer.

Bitmap image assets typically only render optimally at the resolution for which they are designed. This limitation can present challenges when you design applications for multiple resolutions. The solution is to create multiple bitmaps, each at a different resolution, and load the appropriate one depending on the value of the application’s runtimeDPI property.

The Spark BitmapImage and Image components have a source property of type Object. With this property, you can pass a class that defines which assets to use. In this case, you pass the MultiDPIBitmapSource class to map different sources, depending on the value of the runtimeDPI property.

Normally, you would take the same content and scale (and/or design) it for each DPI. For clarity, I’ve created 3 different images for each DPIClassification. The source images are shown together here at their full resolution:

When run on a device, the MultiDPIBitmapSource class selects the appropriate asset based on the runtimeDPI, not the applicationDPI. The bitmap itself is present unscaled, even though the application itself may be using application scaling. The 2 photos below show nearly identical applications. The only difference is that the second application labeled “Bitmap Demo Scaling” is using applicationDPI=”160″. You’ll see that in both cases, the correct bitmap is used. And because of the screen DPI of each device, the physical size of each bitmap is approximately the same.

The main point here is that regardless of which scaling strategy you choose, you should always use MultiDPIBitmapSource when displaying bitmaps in mobile Flex projects.