StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>When creating the layout in your flex application, you can achieve a consistent <em>screen resolution</em> independent look and feel from using <strong>relative scaling</strong>.</p> <p>This is much akin to creating a <em>liquid</em> layout with HTML.</p> <p>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.</p> <p>As follows:</p> <pre><code><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> </code></pre> <p>Using the above basics you can create a application layout that forms to any screen.</p> <hr> <p><em>However</em>, sometimes you need to create a more elaborate layout scheme with many interchanging components resizing dynamically to fit the window.</p> <p>For this you can do <strong>Absolute Positioning</strong>. override the components updateDisplayList() function and create your own sizing/positioning rules.</p> <p>This of course requires you to be within a Canvas container or have the main Application container set to <em>absolute</em> layout.</p> <p>A simple example:</p> <pre><code><?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> </code></pre> <p>By overriding updateDisplayList() you can create endless ways to better dynamically position and size your components to better use the screen realestate.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload