Using Flex Hero mobile themes with existing Flex/AIR applications

Posted on November 4, 2010 | 4 comments

NOTE: Flash Builder Burrito is the way to build Mobile Applications and what I am about to talk about is not the supported way. This post is meant for those that for whatever reason can’t use Flash Builder Burrito in its preview state and want to try out Flex Hero mobile features.

Flash Builder Burrito allows you to create a new Flex Mobile Project. When you create a new Flex Mobile Project in Flash Builder Burrito it allows you to select either the Mobile Application or Blank application template. If you want to move your existing code bases into the supported way of building Flex mobile applications you can try and create a new Flex Mobile Application (with Blank application type) and copy your files into this new project.

The Flex Mobile Project in Flash Builder Burrito creates a spark application with all the right default theme and libraries for using Flex Hero’s mobile features. But what if you want to use Flex Hero’s mobile features in Flash Builder 4 for whatever reason you have.

NOTE: The rest of this post is not the official way of building Flex mobile applications and is to be used with caution as the Flex Hero SDK will change the Flash Builder Burrito will continue to build robust Flex Mobile workflows.

To use Flex Hero’s mobile features in Flash Builder 4 follow the following steps:

  • File -> New -> Flex Project
  • Give it a Project Name, ie: FlexMobileTest
  • Select application type of Desktop (runs in Adobe AIR)
  • Select the Flex SDK version Use a specific SDK and select your download and installed Flex Hero SDK.
    NOTE: I use the Flex Hero installed with Flash Builder Burrito in my example
  • Click on the Finish button

The next set of instructions step you through how to make the application compile and run correctly:

  • Open FlexMobileTest.mxml and change s:WindowedApplication to s:Application
  • Add a s:Button in the application with a label of “Mobile Test”
  • <?xml version="1.0" encoding="utf-8"?>
    <s:Application xmlns:fx=""
        <s:Button label="Mobile Test" />
  • Open FlexMobileTest-app.xml and uncomment/add <visible>true</visible>
  • Open Project Properties -> Flex Build Path and click on Add SWC… Button
  • Navigate to Flex Hero SDK path {HeroRoot}/frameworks/libs/mobile/mobilecomponents.swc and click Ok
    NOTE: This path looks like “/Applications/Adobe Flash Builder Burrito/sdks/4.5.0/frameworks/libs/mobile/mobilecomponents.swc” on my setup
  • Open Project Properties -> Flex Compiler and add -theme= "{HeroRoot}/frameworks/themes/Mobile/mobile.swc","{HeroRoot}/frameworks/themes/Mobile/spark.css"
    NOTE: The {HeroRoot} part looks like “/Applications/Adobe Flash Builder Burrito/sdks/4.5.0″ on my setup

Now when you run the application the s:Button will have the larger lock and feel that comes with the Mobile theme being based on a set DPI for mobile device. The screen shot below shows the application:

The source Flash Builder 4 project for FlexMobileTest can be found here.

  • Lionel

    If we have access to Burrito (beta), why should we use FB4 to build mobile applications? Are there issues / limitations with burrito that make it unfit for mobile solution development?

    If so, how far are we from a stable Burrito release?


    • Renaun Erickson

      There is no issues and you should definitely look at Flash Builder Burrito, Flash Builder Burrito will have a lot of features that are better then this approach.

      I posted this information for those that can’t use preview bits or are migrating existing content/projects with Flash Builder 4.

      I do not have an answer for the Flash Builder Burrito release.

      • Lionel

        Thanks for the reply Renaun.

  • HERLoct_HENT

    This post is really help me. I was confused why my AIR Application didn’t show up when i use Hero + MobileApplication on FB 4…

    Thanks a lot…

    Note : Looks like just changing the and adding Mobile Themes is enough…