Question

I have a very general question and have prepared a simple test case.

When using BasicLayout (i.e. absolute positioning) – what is the best approach to place a Flex component in the center of the application?

In the test case below I’m using x=”{width/2}” but this gives me at least 2 problems:

1. How do I account for the component dimensions (the ProgressBar in the test case)?

2. Is the binding {width/2} a good idea to use? Wouldn’t it send unnecessary DATA_CHANGE events in some cases?

And finally I wonder, how this all applies to full screen applications using StageScaleMode.SHOW_ALL – because currently my application is aligned to the top-left in the full screen mode and there is a white dead zone on the right of it. (Which is at least a change from pure Flash/AS3 behaviour, where the full screen content is displayed in the center of the screen and 2 dead zones on the left and right).

<?xml version="1.0" encoding="utf-8"?>
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    width="700" height="525" 
    backgroundColor="#CCFFCC"
    initialize="systemManager.stage.scaleMode=StageScaleMode.SHOW_ALL">

    <fx:Script>
        <![CDATA[
            private function fullScreen(event:MouseEvent):void {
                stage.displayState = 
                    stage.displayState == StageDisplayState.NORMAL ?
                    StageDisplayState.FULL_SCREEN :
                    StageDisplayState.NORMAL;
            }
        ]]>
    </fx:Script>

    <s:states>
        <s:State name="normal" />
        <s:State name="connected" />
    </s:states>

    <s:CheckBox right="10" bottom="10" 
        label="Full screen" 
        click="fullScreen(event)" />

    <mx:ProgressBar indeterminate="true" 
        x="{width/2}" y="{height/2}" 
        label="Connecting..." labelPlacement="center" 
        includeIn="normal" />

</s:Application>            

Answer 1

Way easier than that: just use horizontalCenter and verticalCenter properties of UIComponent. When used inside a BasicLayout the component will always be centered. Like this:

<mx:ProgressBar indeterminate="true" 
                horizontalCenter="0" verticalCenter="0"
                label="Connecting..." labelPlacement="center" />

If you give these properties a value other than ‘0’ the component will be offset from the middle by the amount of pixels you specify as a value. (e.g. horizontalCenter="50" will offset the component 50 pixels to the right of the center of the parent component)

That white space is probably due to your usage of systemManager.stage.scaleMode=StageScaleMode.SHOW_ALL. Just remove that line. Why are you doing that anyway?

edit

Just noticed you’re using a fixed ‘width’ and ‘height’ on your Application: you’ll have to make those ‘100%’ if you want your app to really fill the screen. This is another possible cause for that white space.