Feathers UI package to desktop application

Question

I would like to know how to create a flash builder AIR project that can package a desktop app instead of a mobile app using Feathers UI.

If i create an actionscript mobile project, as instructed by the FeathersUI getting started guide, i get the same component styling as can be seen on the Feathers live examples.

But if i create a 'regular' actionscript project, i get component styling which looks very small and not the same as on the Feathers examples.

What am i missing here? is it not possible to create a 'regular' actionscript project? Then, using a mobile actionscript project, how to package for desktop?

related questions although not answering my question specifically:

http://forum.starling-framework.org/topic/feathers-ui-for-business-application-on-mobile-device-and-webdesktop-mode

How can we use Feathers UI for developing Web and Desktop Application?

Answer 1

For a desktop AIR app, you should use a desktop theme instead of the MetalWorksMobileTheme mentioned in the Getting Started with Feathers tutorial. Feathers includes several example themes, and some target mobile and others target desktop. A good one to start with is MetalWorksDesktopTheme. It has a similar design to MetalWorksMobileTheme, but it's designed specifically for desktop.

There are two main reasons to use a desktop theme for a desktop app:

1. The same UI controls on desktop and mobile can behave very differently. A desktop theme will skin every UI control appropriately for a mouse-and-keyboard desktop environment and enable things like keyboard focus management.

2. The example mobile themes, including MetalWorksMobileTheme, attempt to resize their content based on Capabilities.screenDPI so that components render at the same physical size (in inches or centimeters) on all screens. This is great for mobile, but the components will be render too small on desktop, especially since the Flash runtimes on desktop don't report the proper DPI of the attached screen.

The workaround that you found by setting DevicesCapabilities.dpi isn't a recommended approach. This API exists only because it allows the demos on the feathersui.com website to simulate how the components would be displayed a mobile device. To scale a real application, you should use Starling's multi-resolution APIs instead. See Multi-Resolution Development in the Starling Manual for details.

Answer 2

I have been able to find an answer to my question, by serendipity, here:

http://forum.starling-framework.org/topic/how-to-multi-platform-with-feathers-ui-like-example-of-feathers-on-website

It seems we have to 'imitate' mobile device settings for the FeathersUI to correctly display:

//pretends to be an iPhone Retina screen
DeviceCapabilities.dpi = 326;
DeviceCapabilities.screenPixelWidth = 960;
DeviceCapabilities.screenPixelHeight = 640;

as can be seen in the github source for the component explorer here: https://github.com/joshtynjala/feathers/blob/master/examples/ComponentsExplorer/source/ComponentsExplorerWeb.as