Posizionamento Flex-componente nel centro dello schermo

Question

Ho una domanda molto generale e ho preparato un semplice caso di test.

Quando si utilizza BasicLayout (cioè posizionamento assoluto) - qual è l'approccio migliore per posizionare un componente Flex nel centro della domanda

Nel caso di test di sotto sto usando x = "{width / 2}" , ma questo me almeno 2 problemi dà:

1. Come faccio conto per le dimensioni dei componenti (il ProgressBar nel caso di test)?

2. è il legame {width / 2} una buona idea per l'uso? Non sarebbe inviare eventi DATA_CHANGE inutili, in alcuni casi?

E infine mi chiedo, come tutto questo vale anche per applicazioni a schermo intero utilizzando StageScaleMode.SHOW_ALL - perché al momento la mia domanda è allineata in alto a sinistra in modalità a schermo intero e non v'è un bianco morto zona a destra di esso. (Che è almeno un cambiamento dal comportamento Flash / AS3 puro, in cui il contenuto schermo intero viene visualizzata al centro dello schermo e 2 zone morte a sinistra ea destra).

<?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

modo più semplice di quello: solo uso horizontalCenter e verticalCenter proprietà di UIComponent. Quando viene utilizzato all'interno di un BasicLayout il componente verrà sempre essere centrato. In questo modo:

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

Se si dà queste proprietà un valore diverso da '0' la componente sarà compensato dalla metà dalla quantità di pixel specificato come valore. (Ad esempio horizontalCenter="50" compenserà componente 50 pixel a destra del centro del componente principale)

Che lo spazio bianco è probabilmente dovuto al vostro utilizzo di systemManager.stage.scaleMode=StageScaleMode.SHOW_ALL. Basta togliere quella linea. Perché stai facendo che comunque?

modifica

appena notato che stai utilizzando un 'width' fisso e 'height' sulla vostra applicazione: dovrete fare quelle '100%' se si desidera che la vostra applicazione per davvero riempire lo schermo. Questa è un'altra possibile causa per quello spazio bianco.

Answer 2

Per ottenere l'applicazione centrato (piuttosto che a sinistra / destra allineato) quando si utilizza systemManager.stage.scaleMode=StageScaleMode.SHOW_ALL, insieme systemManager.stage.align alla stringa vuota - cioè:.

// in your Application creationComplete handler
systemManager.stage.scaleMode = StageScaleMode.SHOW_ALL;
systemManager.stage.align = "";

Answer 3

Io di solito faccio 2 cose,

I posto oggetti all'interno VGroups / HGroups con allineamento uso anche larghezze relative percentuali es.

Pensate come ai vecchi giorni di utilizzo di tabelle HTML. Funziona molto bene, soprattutto se la tua tela viene ridimensionata assegnare.

Tutte le mie tele devono essere ridimensionabile come mi piace solo scrivere le mie applicazioni, una volta, per il pc, mobili, ecc, quindi ho solo rendere tutto scalabile per impostazione predefinita.