propiedades - flex-grow que es

Flex-tendiendo elementos de forma tanto vertical como horizontalmente

Question

Estoy tratando de crear una forma simple en flex (flash builder 4). Coloqué un contenedor de formulario y FormItems dentro. Los elementos de formulario son, por ejemplo, campos estándar de "cliente" como Primero, Último, Dirección, Ciudad, Estado, Código postal.

De forma predeterminada, establece los campos verticalmente y hace que las etiquetas de campo estén justificadas a la derecha, lo que se ve bien.

Sin embargo, me gustaría que algunos de los campos sean horizontales, por ejemplo, algo como esto:

  First __________   Last ___________
Address _____________________
   City ___________    St ___   Zip ____

Intenté poner el primero / último en un contenedor HGroup, pero eso no funciona, pierdo la justificación correcta de las etiquetas, se ve así:

First __________  Last ___________
Address _____________________
City ___________  St ___  Zip ____

Este es un ejemplo de cómo estoy tratando de hacer el primero / último horizonte, pero no se justificará con la referencia, sin embargo, la ciudad y la referencia se justifican juntas:

<mx:Form x="0" y="307" width="100%"> 
 <s:HGroup> 
      <mx:FormItem label="First"> <s:TextInput/></mx:FormItem>
      <mx:FormItem label="Last"><s:TextInput/></mx:FormItem>
 </s:HGroup>
 <mx:FormItem label="Referral"><s:TextInput/></mx:FormItem><mx:FormItem label="City">
  <s:TextInput/>
 </mx:FormItem>
</mx:Form>

Es casi como si necesitara un tipo de diseño de tabla con la habilidad colSpan, o?

Este componente personalizado parecía prometedor, pero no parece funcionar en fb4 al menos http://cookbooks.adobe.com/post_Multi_Column_Form_Layout-9644.html

Además, ¿hay buenos libros / sitios / etc. que discutan el diseño de la interfaz de usuario / diseño de formularios y similares en Flex que puedo explorar?

Answer 1

Debe evitar utilizar múltiples HGroups si desea que las columnas estén alineadas; puede romperse fácilmente al reducir la ventana del navegador para que no pueda mostrar todo el contenido a la vez. La lógica de desbordamiento de contenido romperá la alineación más probable. Use mx: Grid en su lugar como una solución definitiva o s: Formulario para casos muy simples.

Answer 2

La única manera que encontré para lograr eso es usando un mx:Grid . Principalmente porque mx:GridItem s tiene un atributo colSpan o rowSpan . Además, uso empty mx:FormItem s en lugar de Labels, porque puede usar el atributo required para mostrar a (*) para los campos obligatorios.

Aquí hay un ejemplo:

<?xml version="1.0" encoding="utf-8"?>
<s:Group 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="400" height="300">
  <mx:Form width="100%" height="100%">
    <mx:Grid width="100%" height="100%">
      <mx:GridRow>
        <mx:GridItem>
          <mx:FormItem label="First" required="true"/>
        </mx:GridItem>
        <mx:GridItem>
          <s:TextInput/>
        </mx:GridItem>
        <mx:GridItem>
          <mx:FormItem label="Last"/>
        </mx:GridItem>
        <mx:GridItem>
          <s:TextInput/>
        </mx:GridItem>
      </mx:GridRow>
      <mx:GridRow>
        <mx:GridItem width="100%" height="100%">
          <mx:FormItem label="Last"/>
        </mx:GridItem>
        <mx:GridItem width="100%" height="100%" colSpan="3">
          <s:TextInput width="100%"/>
        </mx:GridItem>
      </mx:GridRow>
    </mx:Grid>
  </mx:Form>
</s:Group>

Espero que esto ayude,

Koen

Answer 3

La respuesta es simplemente usar CSS. Cree un estilo de etiqueta en CSS que especifique textAlign en ''left''. A continuación, tome ese estilo de etiqueta y aplíquelo a la propiedad labelStyleName en FormItem .

Aquí hay una aplicación completa que demuestra la solución:

<?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" minWidth="955" minHeight="600">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";

        .labelStyleName {
            textAlign:left;
        }
    </fx:Style>

    <mx:Form x="0" y="307" width="100%"> 
        <s:HGroup> 
        <mx:FormItem label="First"  horizontalAlign="left" labelStyleName="labelStyleName"> 
            <s:TextInput/>
        </mx:FormItem>
        <mx:FormItem label="Last" horizontalAlign="left" labelStyleName="labelStyleName">
            <s:TextInput/>
        </mx:FormItem>
        </s:HGroup>
        <mx:FormItem label="Referral"  horizontalAlign="left" labelStyleName="labelStyleName">
            <s:TextInput/>
        </mx:FormItem>
        <mx:FormItem label="City"  horizontalAlign="left" labelStyleName="labelStyleName">
            <s:TextInput/>
        </mx:FormItem>
    </mx:Form>  

</s:Application>

Si desea alineación más específica de los elementos de entrada; es posible que deba especificar un valor de labelWidth.