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.
- 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.
Below are screenshots from the installed AIR tabbed application running on my desktop showing all the mobile components working great!
About the Author (Author Profile)
Sites That Link to this Post
- Cool Stuff with the Flash Platform - 10/24/2011 | Remote Synthesis | October 24, 2011
- Flex 4.6 Mobile Running on Web (desktop browser) « Bishop on Development | December 14, 2011