Para centrar alinear un botón en un hbox en Flex?

Question

Tengo un VBox dentro de la cual tengo 4 hboxes. El segundo nivel de HBox se oculta inicialmente. Cuando hago clic en la etiqueta, 'Mostrar más opciones', se muestra el segundo nivel HBox. Ahora tengo el espacio ocupado por el 'segundo nivel HBOX' vacía y los 'búsqueda' appaers botón de abajo el espacio.

Mi primera pregunta es: ¿Hay una manera de colocar el botón de búsqueda de tal manera que, el espacio no está allí y después de la etiqueta de 'Mostrar más opciones' se hace clic, aparece el 'Segundo Nivel HBox'?

Y la segunda pregunta es, ¿Puedo colocar el botón de búsqueda en el centro de la página. ¿Hay algún método para centrar el contenido de una caja vertical de un HBox?

Este es mi código:

<mx:Form x="47" y="219" width="80%" >


<mx:VBox id="searchBox" >
    <mx:HBox id="searchTitle"  width="100%" height="20" backgroundColor="#2680D5">
        <mx:Label text="Search Criteria" paddingRight="250" width="654.6212" height="18.030302"/>
         <mx:Label text="show more options" id="moreOption"  click="showOption(event)" width="127.045456" height="21.969696"/>

    </mx:HBox>

    <mx:HBox id="firstLevel" paddingBottom="10" paddingTop="15" >

        <mx:Label text="Task Name" paddingLeft="20"/>
        <mx:TextInput id="searchTaskName" paddingLeft="10" /> 

        <mx:Label text="Item Code"  paddingLeft="30"/>
        <mx:TextInput id="searchItemCode" paddingLeft="10"/>

        <mx:Label text="Task Type" paddingLeft="30"/>
        <mx:ComboBox id="searchTaskType" paddingLeft="10"/> 
    </mx:HBox>

    <mx:HBox id="secondLevel" visible="false" paddingTop="5">

        <mx:Label text="Task ID" paddingLeft="20" />
        <mx:TextInput id="searchTaskId" paddingLeft="10"/>



        <mx:Label text="Project Won" paddingLeft="30"/>
        <mx:ComboBox id="searchWon" paddingLeft="10"/>
    </mx:HBox>


    <mx:HBox>
        <mx:Button label="Search"  />
    </mx:HBox> 


</mx:VBox>

Answer 1

Para centrar cosas dentro de un HBox, añadir el siguiente atributo a la caja en cuestión,

horizontalAlign="center" width="100%"

En cuanto al espacio vacío creado por las cajas invisibles (HBox o VBox), no sé si hay alguna manera, pero me encuentro añadiendo este atributo a la caja invisible,

height="{secondLevel.visible ? 200 : 0}"

Espero que ayude

Answer 2

Para ocultar el verdadero componente, establezca el atributo includeInLayout a lo que es visible. (O conjunto usted mismo cuando se cambia visible) De manera predeterminada, es cierto, por lo que si el componente es visible o no, el espacio se mide a cabo.

<mx:HBox id="secondLevel" visible="false" includeInLayout="{secondLevel.visible}" paddingTop="5">

Answer 3

Puede utilizar flexión estados añadir el segundo hbox nivel como y cuando sea necesario.