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

57 Responses to iOS Theme for Flex Mobile Projects – Proof of Concept

  1. Pingback: Video: Default Flex Mobile Theme vs. iOS Theme Concept « Jason's Flex Blog

  2. Bobby says:

    I would like to hear about the best way to create a background image for an app. I would like the user to be able to change the background based on a photo from their camera roll.

  3. Pingback: Developer Week Slides « Jason's Flex Blog

  4. Pingback: Build iOS applications with Flex and Flash Builder 4.5.1 (Adobe Flash Platform Blog)

  5. Joseph says:

    These assets are a great start to work on, Thanks 🙂

  6. Pingback: Developer Week: Creating Performant Skins and Item Renderers for Mobile Applications « Jason's Flex Blog

  7. Ben says:

    Can you post an FXP that works with Flash Catalyst CS5 and/or FB 4.5.1?

    • Jason San Jose says:

      The FXP will not work with catalyst. It should work with FB just fine though.

  8. Not Sure says:

    What do you mean it should work with FB just fine? I have the full CS5.5 suite, and by default when I try to open the FXP in FB via File | Open, it defaults to the system editor, which is Catalyst. I tried manually setting up an association from the FXP to the FXG editor in FB, that did nothing but cause it to open in text editor mode.

    If it makes a difference I’m running the Eclipse plugin version of FB.

  9. Bindu Wavell says:

    Any chance you’d be up for posting the theme source to github (I realize I can do that too, but would be cool if you wanted to own it, I’d be happy to send you patches when I make updates/tweeks.)

    • Jason San Jose says:

      Yes, stay tuned.

      • Bindu Wavell says:

        I’ve made a couple small updates I’d be happy to contribute… or at least see if you are interested in… Really nothing earth shattering… Also would be good to have a place to report “bugs”… 2 things I’ve noticed so far:

        1. The actionsheet animations are really rough on device (iPhone 4). Wonder if using a 3rd party tweening library would help, also since that’s using MXML, wonder if converting to actionscript would help…

        2. It looks like the buttons in the actionsheet are slightly too round compared to the native implementation.

        Reading back over this, it all sounds a bit nego. To be clear, I’m absolutely thrilled with your work.

        One other suggestions… might want to rename the mobile_examples project to mobile_theme_ios_components… I can imagine quite a few ios specific widgets: pager, image view, some of the search stuff.

        Once [REDACTED] is released, I’d love to see a mobile_theme_ios_extensions with native binding to things like in-app purchase, etc 😉

      • Bindu Wavell says:

        Still tuned, any update? 🙂

  10. Pingback: Mobil uygulamalar için performans önerileri | Action Script Dersleri

  11. Pingback: Weekly Developer Journal : June 19 – June 26, 2001

  12. Andre says:

    Can you explain the steps to include the iOS-Theme into a new project?

    I added the library projects and I can see the iOS style in design mode:
    http://goo.gl/3LL5N

    But in the simulator and on a device it keeps the Android style.
    Your project i downloaded works fine at all!

    • Jason San Jose says:

      Sounds like your run configuration is targeting Android instead of iOS. When you open the run configuration dialog, check the platform selection.

  13. Mike says:

    I created a new ‘Tabbed Application’. With references the two libs: mobile_examples and mobiletheme_ios. In the main mxml file I added
    IOSThemeClasses;
    MobileExamples;
    Running the app in debug mode targeting iOS results in the default styles. Not the iOS styles as your example. What other steps are necessary to pick up the iOS styles in a new application?

    • Jason San Jose says:

      In your project’s additional compiler arguments (project properties, flex compiler), add -theme=/mobiletheme_ios/bin/mobiletheme_ios.swc. You should see this in the example project.

      I’ll make the process more clear in a post soon.

  14. I just upgraded to the 4.5.1 and just playing around with a Hello World App myself and wonder if you can provide additional resource information on skinning that would show all the kinds of elements you would have in iOS which you do here.

    You don’t show how you would use a skin just for a toolbar at the bottom instead of a tab bar that would be at the bottom of the screen. I selected spark.components.supportClasses.ButtonBarHorizontalLayout and then you have a which I would like to make it UIBarStyleBlack or UIBarStyleBlackTranslucent.

    I tried adding that -theme+=/mobiletheme_ios/bin/mobiletheme_ios.swc but I don’t see anything extra for the toolbar in the Appearance tab. Current theme is mobile:Mobile. I clicked on it but where on Mac would I import a mobiletheme_ios.swc or is Current theme:Mobile what mobiletheme_ios.swc is?

    • Jason San Jose says:

      I haven’t created a ButtonBar skin that would be equivalent to the bottom positioned button bar that iOS provides. To do this, you would need to (1) create a skin and (2) add the button bar to your View or your Application bottom aligned and justified to the left and right.

      Keep in mind that this isn’t a full theme by any means, it’s just showing some examples of what’s possible. The appearance tab in Design view just shows the theme based on the project, not based on any additional compiler arguments.

  15. walter noreña muñoz says:

    muchísimas gracias y los invitamos a gozar de la alegría de la sensibilidad importante en los posesos de inclusión social de esta hermosa causa, sus opiniones son muy importantes para motivar mucho mas dichos posesos, muchísimas gracias y por acá nos vemos. porque el camino aun no lo conocemos, unamonos para que aquellos que ya recorrieron y cayeron se vuelvan a parar, no nos hagamos el camino mas dificil,unamonos en una sola fuerza, para una mejor dignidad de vida. Porque estamos en busca de una inclusion, de un trato con derechos, por la lucha de una vida digna. los invito a unirse a esta linda causa por los discapacitados. Sitio web:
    http://www.facebook.com/pages/AVE-FENIX-DISCAPACITADOS-EN-BUSCA-DEL-RENACIMIENTO-SOCIAL/169970189718622
    http://www.blogger.com/home
    http://wanm25.wordpress.com/wp-admin/po
    http://www.linkedin.com/updates?&trk=m
    http://disqus.com/wanm25/

  16. pratyoosh says:

    Getting a page not found, is the link to the FXP broken?

  17. Kapteijn-Design says:

    Where are the screens and file ?

  18. Jason San Jose says:

    Is anyone still having a problem with downloading the FXP? I just tested it (logged out of my account) and it seems ok.

  19. Pingback: Eskimo, skins your mobile apps | RIAgora

  20. Ganesh says:

    my flash builder 4.5 does not show option for mobile platform for ios and blackberry it just show option for android
    current i am using flash builder 4.5
    flex sdk updates to 4.5.1
    stiill its not working
    check inage on=http://forums.adobe.com/thread/883052

    • Jason San Jose says:

      You need both FB 4.5.1 and SDK 4.5.1 to enable iOS and BlackBerry Tablet OS in mobile projects.

  21. Nooruddin Paracha says:

    In app purchase is badly needed for Flex Or some workaround.

  22. Peter says:

    how can I get the FXP file get working with Flash Builder 4.5.1?? it says I can import only themes in SWC and CSS, plus my default program for FXP is Flash Catalyst.

  23. Pingback: Interesting stuff | justRIA

  24. Raffi says:

    Hi, I am trying to read the DPI value and set a titlewindow height and width depending on the DPI, any help please?

  25. Pingback: Flex and AS3 for iOS « factornine blog

  26. Pingback: Flex移动skin – 第3部分: 多平台开发 | Flash开发者大会

  27. Swathi says:

    Hi Jason,

    When I added the theme in ant build like below, it does not seem to include the theme properly. I could not see the ios back button etc. Please advise.

  28. Swathi says:

    Hi Jason,

    When I added the below code in my ant build script, it does not seem to include the theme. But it works for FB. Do you have any clue about this.

    Thanks in advance

  29. Swathi says:

    Never mind. It was the problem with launching the swf build from adl in ant build. I had to specify the XversionPlatform = IOS.

  30. Pingback: iOS TitleWindow Skin « Jason's Flex Blog

  31. Marc Pelland says:

    this is awesome !!! thanks so much

  32. Adrian says:

    Hi Jason,
    I’ve run into a built of a problem!

    “Design Mode is unable to display the document styles, skins, and images because the following assets have failed to compile:Details :unable to open ‘/mobiletheme_ios/bin/mobiletheme_ios.swc'(command line – Line:-1)”

    I’m not sure what the issue is here. Perhaps you could post a installation of ios theme?

  33. Adrian says:

    scratch that jason!,
    Problem solved 😀

  34. Mike says:

    Hi Jason,

    Great blog post thank you. I have two questions.

    1. I am using FB 4.6 and using your fxg file I created an ipa and installed it to my iPad2. It works great but I noticed that the lists does not have the rounded corners and on the home view the text is cut off at the top above the buttons. How can I correct this?

    2. Is there a way to use Apple Push Notifications with FB and AIR? If so, are there any tutorials. If not, is this something that Adobe will be including in future releases?

    Thanks again
    Mike

    • Mike says:

      This is the error I get in the Design Mode Problems Panel. I get the same error in all three views.

      Assets failed to compile. Design Mode is unable to display the document styles, skins, and images because the following assets have failed to compile:

      Details :
      unable to open ‘/mobiletheme_ios/bin/mobiletheme_ios.swc'(command line – Line:-1)

  35. kongkear says:

    I can’t open files mobiletheme_ios_usage.fxp in Flash Catalyst CS5. It alerted the message
    “Flash Catalyst cannot open this project because it was created by an incompatible version of Flash Catalyst”. Can you please tell me why?

    Thanks beforehand

  36. Mike says:

    Hi Jason,

    Thank you for the great post!

    I have 2 questions.

    1. I downloaded your fxp file and I am not getting the rounded corners on the lists. It looks like the Android list. How can I get the rounded corners on the lists to display?

    2. Do Apple Push Notifications work with FB and AIR? If so are there any tutorials or documentation on how to set it up in FB?

    Thanks
    Mike

    • Mike says:

      Sorry for the double comment. It didn’t show up the first time I posted it. Then when I posted this one it show up.

  37. Pingback: Two styles for a native look (Flex Mobile App)? | free icons download

  38. Thanks a lot! You saved life 🙂