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.