FormItem (I18N)

Quando usar

• Aplicar em odos os formulários, formulários múltiplos e situações de exibição de entidades com vários atributos, para organizar o rótulo (label) em releção ao campo de digitação ou conteúdo.
• Também para auxiliar nos processos de internacionalização "I18N" devido ao seu posicionamento do título em relação ao campo evitando que o ródulo invada a área do campo ou conteúdo.
• Para posicionar de maneira adequada e padronizda o ródutlo em relação ao campos ou conteúdo.
  
  OBS: Datasul FormItem não está sendo utilizado. Veja o código fonte abaixo.

Estrutura

Este componente tem como base as mesmas característica do "FormItem" nativo do Adobe Flex.
A diferença é que este posciciona o rótulo acima do campo e não ao lado. É composto por rótulo "Label" e um Campo de texto ou outro componente de conteúdo (ex.:Label apenas para exibição em edição).

Boas Práticas

• Quando for apenas exibir dados (não editáveis) com labels no lugar de textInputs por exemplo, aplique negrito para diferenciar o rótulo do conteúdo.
• Garanta através do container pai (form, canvas,..) o espaçamento mínimo de 05 pixels entre um formItem (rótulo+campo) e outro form Item, trazendo o critério de agrupamento por localização e melhor design do layout.

Exemplo

Código-fonte

	<mx:Form verticalGap="10" width="100%" height="100%">
		
		
		<mx:FormItem required="true" indicatorGap="0" width="100%">
			<mx:Label  text="Empresa"/>
			<mx:TextInput width="100%"/>
		</mx:FormItem>
		
		
		<mx:FormItem indicatorGap="0" width="100%">
			<mx:Label  text="Endereço"/>
			<mx:TextInput width="100%"/>
		</mx:FormItem>
		
		
		<mx:FormItem indicatorGap="0" width="100%">
			<mx:Label  text="Bairro"/>
			<mx:TextInput width="150"/>
		</mx:FormItem>
		
		<mx:FormItem  indicatorGap="0" width="100%">
			<mx:Label  text="Cidade"/>
			<mx:TextInput width="150"/>
		</mx:FormItem>
		
		<mx:FormItem indicatorGap="0" width="100%">
			<mx:Label  text="Estado"/>
			<mx:TextInput width="40"/>
		</mx:FormItem>
		
		<mx:FormItem indicatorGap="0" width="100%">
			<mx:Label  text="CEP"/>
			<mx:TextInput width="100"/>
		</mx:FormItem>
		
		<mx:FormItem indicatorGap="0" width="100%">
			<mx:Label  text="Telefone"/>
			<mx:TextInput width="150"/>
		</mx:FormItem>
		
		<mx:FormItem indicatorGap="0" width="100%">
			<mx:Label  text="Email de contato"/>
			<mx:TextInput width="100%"/>
		</mx:FormItem>
	</mx:Form>

Referências

• http://designinginterfaces.com/

Veja Também