Flex : Cross resolution applications

Question

What is the best way to create applications in Flex/AIR,
which look and feel the same irrespective of the screen
resolution?

Answer 1

You can create a application with height and width respective to the container so that way all components will aling themself properly at all screen resolutions.

Answer 2

When creating the layout in your flex application, you can achieve a consistent screen resolution independent look and feel from using relative scaling.

This is much akin to creating a liquid layout with HTML.

For example, to create a simple two column application— left navigation and content— you only need two containers, one predefined and one left to scale indefinitely.

As follows:

<mx:HBox width="225">
    <mx:Button label="Menu 1"/>
    <mx:Button label="Menu 2"/>
    <mx:Button label="Menu 3"/>
</mx:HBox>
<mx:HBox width="100%">
    Any content here will flow fluidly across the entire screen regardless of window size/screen resolution.
</mx:HBox>

Using the above basics you can create a application layout that forms to any screen.

---

However, sometimes you need to create a more elaborate layout scheme with many interchanging components resizing dynamically to fit the window.

For this you can do Absolute Positioning. override the components updateDisplayList() function and create your own sizing/positioning rules.

This of course requires you to be within a Canvas container or have the main Application container set to absolute layout.

A simple example:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void 
        {
            //find out how big we are
            var stageWidth:int = this.width;
            //center the box in the middle of the page.
            centeredBox.x = stageWidth - (centeredBox/2);
        }
    </mx:Script>
    <mx:HBox id="centeredBox" width="500"/>
</mx:Application>

By overriding updateDisplayList() you can create endless ways to better dynamically position and size your components to better use the screen realestate.

Answer 3

We typically create a MainFrame.mxml which acts as our primary component and has layout relative scaling as mentioned by the others. Then we create the AIR app which just embeds that one MainFrame.mxml and another Flex app that embeds it as well. This way we can keep the entire app within MainFrame and not worry about if it is in Flex or Air. This being said you will need to make sure you do not use any AIR specific or Flex specific calls that do not translate to the other.