Archive for June, 2011

Developer Week: Creating Performant Skins and Item Renderers for Mobile Applications

Twitter: @jasonsj_adobe
PDF Slides Developer Week – Creating Performant Skins and Item Renderers for Mobile Applications

Example code: iOS Theme for Flex Mobile Projects with example mobile-optimized skins, custom item renderer example and item renderer usage.

When ready, the recording will be posted here:

Additional reading on Adobe Developer Center:
Flex mobile skins – Part 1: Optimized skinning basics
Flex mobile skins – Part 2: Handling different pixel densities

Share on Facebook

Developer Week Replay: Multi-density and Multi-Platform Authoring

The recording from my Tuesday session is now posted at 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.

Session recording: Multi-density and multi-platform authoring for smart phones and tablets with Flex 4.5 SDK (requires Adobe ID registration)

Share on Facebook

Developer Week Slides

Thanks to everyone who came to my Adobe Developer Week session today. Here are a few resources that I talked about along with the slides:

Twitter: @jasonsj_adobe
PDF Slides: Developer Week – Multi-Density and Multi-Platform Authoring for Smart Phones and Tablets With Flex 4.5 SDK
iOS Theme: Blog post

Adobe Developer Center:
Flex mobile skins – Part 1: Optimized skinning basics
Flex mobile skins – Part 2: Handling different pixel densities

NJ’s 360 Flex 2011 Denver Presentation

Share on Facebook

Video: Default Flex Mobile Theme vs. iOS Theme Concept

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.

Share on Facebook

Using Flex 4.5.1 on the BlackBerry PlayBook

Update: RIM has announced BlackBerry Tablet OS 1.0.6 with AIR 2.7. The workaround mentioned below is no longer required.

This is a quick follow up on my prior post about using Flex 4.5 with AIR 2.5 on the PlayBook.

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.

Share on Facebook

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:

Share on Facebook

Multi-Screen and Multi-Platform Authoring Preview

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.


Share on Facebook

Using Bitmaps in Flex Mobile Projects

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.

The following example loads a different image, depending on the DPI:

<s:Label text="applicationDPI = {FlexGlobals.topLevelApplication.applicationDPI}"/>

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.

No Scaling. iPod Touch 4th gen, HTC EVO and BlackBerry PlayBook


Scaling with applicationDPI="160". iPod Touch 4th gen, HTC EVO and BlackBerry PlayBook


Share on Facebook

Developer Week Sessions

I’m giving 2 mobile related sessions at this year’s Adobe Developer Week. Here are my session titles, times and descriptions:

Multi-density and multi-platform authoring for smart phones and tablets with Flex 4.5 SDK – Tuesday, June 21, 2011 1:00 P.M. Pacific
Learn what multi-density on devices means, why it is important and how to leverage the support available in Flex 4.5 to address the challenges.

Creating performant skins and item renderers for mobile applications – Friday, June 24, 2011 11:00 A.M. Pacific
Dive deep into skinning mobile components. We will demo creating a skin that looks like a native iOS component.

I’ve covered skinning and how to handle DPI a little bit here on my blog. My first session will provide an overview of the topic and I’ll go into more detail and show more example code and live demos.

The second session will cover mobile skinning in-depth. In particular, I’ll cover what’s different between MXML and ActionScript skinning for mobile as well as some of the trade-offs we’ve made in the Mobile theme for performance. I’ll also show examples of how to extend mobile skins and our mobile-optimized item renderers.

Even though it’s only noted in the 2nd session, I’ll likely demo an example iOS-based mobile theme in both sessions as an example of multi-screen mobile skin authoring.

Share on Facebook