Using Flex Mobile Components in a Flex/AIR Desktop Application

October 19, 2011By 49 Comments

There may be a time when you want to use some of the Flex mobile components in a Flex/AIR desktop application, and this might be the case even more now with the recent addition of the new Flex 4.6 tablet components available in pre-release. I’m not necessarily advocating this as best practice but I know many people either didn’t know this could be done or are wondering how to do it, so here it is :)! Here are the steps to gain access to the mobile components from your Flex application:

1) Go to File | New | Flex Project in Flash Builder
2) Select Desktop (runs in Adobe AIR) for application type and hit Next (see further down about applying to a Flex Web application):

3) On the 3rd Build Paths tab under Library Path, add the mobilecomponents.swc and mobile.swc. Start by navigating to your Flash Builder 4.6 root folder and then use the following paths for reference:

Note: If you are modifying an existing project to use mobile components, simply go to File | Properties (or command-I, or right-click on the project root) and click Flex Build Path on the left to get to the same dialog where you can add the swc’s.

4) To avoid runtime errors, you also need to apply the mobile theme to resolve any dependencies. Right-click on the project root and go to Properties (or command-I on Mac) and select Flex Theme on the left. The default is Spark, but you’ll want to locate the Mobile theme under Other:

I created and included a sample project and application I’m including with this post that uses the TabbedViewNavigatorApplication, SplitViewNavigator, ViewNavigator, View, Callout and CalloutButton components all within a desktop application. The root application tag in this case is actually TabbedViewNavigatorApplication, so I replaced the original root WindowedApplication tag and you can see that it works.

Notes:

  • Since we applied the mobile theme to the project, some of the fonts and sizes of things might be larger than you would like for desktop, so you can simply specify your own CSS to override these as desired.
  • You should be able to do something similar for a Flex Web application though I have not tried it yet myself. Please let me know if you have success with it with any tips for others that might be helpful.
  • Remember that to run applications built this way you’ll need to have the AIR runtime matching the AIR SDK you compiled your code with (typically built into the Flex SDK in Flash Builder unless you specifically overlayed it) installed on your desktop, or if you’re using AIR 3.0 or greater, select the new ‘captive runtime‘ option when exporting to release build and it will bundle the AIR runtime version needed (note that it generates a .app file instead of a .air file that you can then double click to run). If you’ve never heard of this, take a moment to look over the article on devnet about it, it’s a huge feature in the latest version of AIR.

    Captive Runtime Setting

    Below are screenshots from the installed AIR tabbed application running on my desktop showing all the mobile components working great!

    Tab 1 – SplitViewNavigator Sample

    Tab 2 – Callout Sample

    Tab 3 – CalloutButton Sample

    HERE you can find the source code, fxp, AIR application and .app file (packaged with captive runtime) to try out yourself!

    Filed in: Adobe AIRFlash BuilderFlash Builder 4.5Flex 4.5Flex 4.5/MobileFlex 4.6Flex Mobile Tags:

About the Author ()

Comments (49)

Trackback URL | Comments RSS Feed

  1. Mohsin says:

    thank you very much for sharing the information……really nice

  2. jeremy daley says:

    awesome examples… i didn’t even know these existed

  3. jeremy daley says:

    just a recommendation… i know you already put a lot of work between “real work” to put these posts up, but if you have extra time… maybe hyperlink some of the components to their documentation page on adobe.com. just a thought. thanks for sharing :)

    • Thanks for the feedback Jeremy! I do usually link to docs as much as possible but since these 4.6 components are still prerelease, the docs are under that site and not really linkable since you have to be approved. I’ll see if there’s anything else available I could add though… Thanks!! Holly

  4. Peter says:

    sounds really cool!
    but app is not working on lion.
    it says: “classic is not supported anymore.”

    is flex 4.6 not ready for lion?

  5. Wow. I can’t believe it. I came to this site hoping to find a way to include the mobile components into a Flex project and there it is – the first article. Amazing. :-)

  6. Devin says:

    Although a bit “hacky”, it’s nice that there’s a way to use them.

    However, I wish there wasn’t this separation between component sets and I don’t understand why it exits. Every single component can be used in a mobile app (regardless of performance issues) without a work-around, so why is it not the other way around?

    I realize mobile is all the rage now, but I’d assume most Flex development still occurs on the desktop. And yet, there hasn’t been much in the way of new UI components for the desktop since Flex 2 (not to mention a still-lacking spark component set of existing components).

    • Bob Warfield says:

      Yes, I agree completely with Devin. It’s silly that these components are not a first class part of all the platform options. Something wasn’t thinking straight. As a desktop app developer, I’d love to have the components.

      It’s not too late to fix it though. Please ask the developers to try!

      Best,

      BW

  7. aj says:

    thanks for the info. I cannot wait to try it out on a sample project.

  8. Robert says:

    Hello Holly. Thanks very much sharing your work :-)

    I’m hoping someone can help me with a bit of confusion.

    I went to the Adobe site and watched Holly’s video on ‘Adobe Air Launch Pad”. I also watched a video by Ed Rowe demonstrating Flex 4.5 and Flash Builder 4.5.

    So, my question comes down to this: what do I need to build a desktop application that can also be used on mobile device – primarily iPad2.

    The demo from Rowe shows rapid dev for all mobile devices using same code base. Does this translate to desktop apps?

    Adobe has a dizzying array of products, dev platforms, downloads, docs, etc. Not sure where to start, what to download and where to invest my time.

    Any guidance would be greatly appreciated. Thanks.

    Rob

    • Hi Rob, sorry for the delayed response, I’ve been traveling and just now trying to catch up on the blog :) I know it can be confusing. The AIR Launchpad tool can be used to build AIR apps for your desktop and your phone/iPad etc so you should definitely check it out and download it for free on Adobe Labs. However, you are generating different project root types for desktop versus mobile, so it’s not going to be the exact same project for both.

      The typical way to handle it is to build a code library (in Adobe Flash Builder) that contains all of the shared code and is exported as a .swc file, and then included in both the desktop and mobile application wrappers so it’s not a lot of duplication for one versus the other.

      I hope this helps!
      Holly

  9. Mario Vieira says:

    Hi Holly,

    Was wondering, on the 4.6 SDK, TextArea does not have a viewPort, so I’m not getting it to display many lines of text, and the height depends of DPI, styles, etc.

    In your desktop with mobile example it is actually using the desktop s:TextArea with the mobile skin right?

    What would you do to get the mobile TextArea breaking the lines by itself?

    cheers

  10. Pure awesome as always Holly! Thanks for sharng.

    @Devin I also wish the definition of components based on target platform was more subtle.

    I would love to see the ability from within FlashBuilder to choose any component that supported the profiles I was trying to target.

  11. Babak says:

    Hi Holly

    Thanks so much for your great post. I’m a huge fan of your posts and first page I go to for some fresh ideas is your website.
    Sorry if this comment is not very related to the topic of your post but i didn’t know how else I could communicate with you and ask my question.

    I’ve been using Flex 4.5 since it’s pre release stage and the best timing for packaging process I could get out of Flash builder 4.5 was 30 minutes for my project. (IOS Packaging)

    When Flash builder 4.6 came along I was hoping to swee a significant improvement on packaging speed but it still takes me 25 minutes at best to build ad hoc package for IOS which is very disappointing.

    I’m using windows XP 32 bit, cpu: Intel core(TM)2 Duo E7300 @ 2.66GHz
    and 4 GB of RAM

    Could you kindly tell me if I’m missing out on some thing or it is normal for the packaging process to take that long?
    and is there going to be any improvement on flash builder 4.6 in terms of packaging speed later on?

    Many thanks in advance.

  12. Babak says:

    Hi Holly
    Thanks for the post and sharing the source code.
    focusIn (focusIn=”callout.open(this.location,true)”) won’t work on IOS devices. I built a standard package for IOS and installed SampleCallouts app on my iPad 2 and none of the Callouts for Location textInput worked (on Callout Component and callout Positiin views).
    also I am running into another issue on textInput : if I use textInput inside a HGroup to build a custom component and listen to click event for that component, the textInput will not fire the click event at all and click only fires if i touch the tiny border of Hgroup. The same component was working fine in Flex 4.5

    • Babak says:

      About Click event issue: I tried to debug SampleCallouts project as well and even on your codes I cannot get the click to work properly for textInput. It will only fire the Click event if i click on the borders of TextInput. I hope you can communicate with Adobe developers and validate this issue and hopefully resolve it.

      Cheers

  13. Don Kerr says:

    Thanks Holly! I have to do this all the time since most of my work is building apps that run on both transparent Touch Screen/Wall solutions as a desktop app and on Tablet devices.
    And I’ve had scenarios where I want to run a browser app on the touch screen or tablet as well.

    There are legitimate “best practices” for using mobile components on other screens. Maybe they should be called “touchComponents” instead of mobile.

    It would be nice if Flash Builder made it possible to build a true “multi-screen” development inside a single Flex Project. Maybe yet another project type: that includes all swcs by default. :)

    Anyway. I appreciate this post. I wasn’t aware of the mobile theme issue. Nice tip!

    Great stuff as always! Keep up the great work!

    Don Kerr

  14. ab says:

    Thanks for the infos. But as it has been said above the .air app doesn’t work. On windows, the installation fails saying that it requires an update to Air “which is not available for the system”, though i have the latest Air 3 package installed.

    • Hi there, this project uses AIR 3.1 since that is the version included in the Flash Builder 4.6 prerelease I’m using. You would have to install the AIR 3.1 runtime from the Adobe prerelease to make the .air application work. However, you could also import the project and export the release build using a native installer for Windows where it will generate a .exe file that you should be able to run on your system…

      Hope this helps!
      Holly

  15. Don Mitchinson says:

    Excellent what I was looking for – really want to give the DateSpinner a try in a desktop Air app.

    Thanks for the article

  16. Daniel Frank says:

    Hi Holly,
    I am trying to use a Callout in my webapp, but when i set his skinClass to spark.skins.mobile.CalloutSkin, all skins changes to mobile version. Any trick to change this behavior?

  17. Don Kerr says:

    Hi Holly,
    Have you tried this on a Desktop app with ViewNavigatorApplication using 4.6/Air 3.1?

    I didn’t get any errors (compile or run), but when I run the app, it appears empty in adl.

    I have the swcs loaded and mobile theme selected.

    Any ideas?

    Thanks,
    Don

  18. Pablo says:

    Nice work!

    @Devgirl said: “You should be able to do something similar for a Flex Web application though I have not tried it yet myself. Please let me know if you have success with it with any tips for others that might be helpful.”

    This article explain how to achieve it:

    http://www.riagora.com/2011/08/flex-mobile-in-the-browser/

    It would be nice someone explains how to extend it for mobile tabbed apps.

    Thanks,
    Pablo

  19. Fabricio says:

    Hi Holly!

    This article is exactly what I was looking for, but there is a situation that doesn’t seem to work. I have a Flex/AIR project with .as scripts all through the project, which means only my document class is mxml.

    I added both swcs and the theme in my project properties and attempted to create a ToggleSwitch within one of the .as files like this:

    var toggle:ToggleSwitch = new ToggleSwitch();
    addChild(toggle);

    When I debug, it runs, no errors, but I don’t see the ToggleSwitch on the display list. Weird enough, the compiler doesn’t complain, I can actually code complete the object and all that.
    Any help would be appreciated.

    Thanks!

  20. genc says:

    Hi Holly!

    Oh I feel lucky to find this article just before I try it by myself. I really do not understand why Flex team does not offer it for desktop applications by default.

    It would be also great if you can let us know a way to use automatic scaling for desktop applications too.

    Thanks!

  21. Raja says:

    Hi, i have successfully installed FB 4.6 and I’m getting compilation errors
    Can not resolve a multiname reference unambiguously. JSON (from /Applications/Adobe Flash Builder 4.6/sdks/4.6.0/frameworks/libs/air/airglobal.swc(JSON, Walker)) and com.adobe.serialization.json:JSON don’t know how to solve this. Can any one help me?

    Thanks,
    Raja.

    • Siddhant says:

      I had the asme problem.

      In my case, i was using the source code of Open Flash Charts 2 and had also included the .swc library file for the same in the “Referenced libraries”.

      The first thing i had noticed were that there were two JSON.as files, one in com.serialization.json and the other in com.adobe.serialization.json. So i Firstly deleted the first package which contained only the JSON.as file. Second, i deleted the reference to OFC2Library-k.swc, and bang! The error disappeared…!!! :-)

  22. Brian Bishop says:

    Hi Holly

    I have put a few Flex 4.6 mobile components in a desktop browser enabled SplitViewNavigator app. It looks real nice running on a desktop browser. See it running at:

    http://bbishop.org/blog/?p=545

  23. Peter Arisse (@thastyle) says:

    Learned alot from this article thanks.. think that renaun has it worked out. using aplication tags and letting scripts like
    if (Capabilities.manufacturer.indexOf(“Android”) > -1
    etc and from there runtime swc . I just made a flashdevelop template that does this all like 20 times faster then flashbuilder. shame on adobe for having 4 sdks and instead of following the diehards flexers go with the trends. i say desktop and browser first.. if they invent a holographic 3d projector tommorow i wonder what 4.7 looks like :)
    anyways thanks. just made my first deskmobiapp, (it replaces my bat-ant file and just gives a menu desktop emu release apk etc.. made it with free sdk and free editor. using ur tips
    thanks again!!!

  24. Yonas Kolb says:

    This was great info Holly.

    I’ve also just completed a Spark ToggleSwitch Checkbox skin that can be used instead of Adobe’s implementation. That means you don’t have to use mobile skins and it can be used in any version of Flex 4 – which in turn doesn’t require Flash Player 11 like Flex 4.6 does.
    It functions basically the same as Adobe’s, including a draggable toggle and customizable labels.

    ToggleSwitch Spark Skin

  25. I-ve try on Lion, Worked for me.. Great app

  26. mindthegapp says:

    hi holly,

    i tested your little demo, very nice. but is it possible to use extended desktop for native process with ViewNavigatorApplication? i couldn’t!

  27. Sam says:

    hi holly, Thanks to share such valuable information with us. One more thing that i want to ask you about automatic software updation in mobile application, means when i release new version of my mobile app., app checking for update.I am using flex 4.6 sdk to develop my mobile application. Is there any way to solve this?
    Please help me regarding this problem.

  28. Rom's says:

    Hi Holly, I’m currently working on a multi-platform application prototype development and I would like to have your advice concerning the usage of spark.components.View into desktop application (as I would like to create some AbstractView and then extends specifically for each platform).

  29. Rom's says:

    Having another look at the source of spark.components.View I’m realizing that in fact it might not be the best for a desktop project and spark.components.SkinnableContainer should be enough.

  30. Dejan says:

    Thanks for this tip.

  31. Fatehi says:

    Great work Holly, have a question though!
    How can I add an Icon in List were data are pulled from XML please?

    Thanks for the wonderful work.

Leave a Reply