Adobe Flex Builder 3 : Adobe Flex Builder 3 Claiton Luis Perin
Objetivos : Objetivos Usar controles simples como Image control, text controls e CheckBox control.
Usar o container Form para fazer o layout de controles simples.
Usar data binding para conectar controles a um modelo de dados.
Apresentando Controles Simples : Apresentando Controles Simples O Simple Controls são fornecidos como parte do framework e ajudam a tornar fácil o desenvolvimento de RIAs.
O Flex inclui uma ampla biblioteca de classes, tanto para controles simples como para controles complexos. Todas estas classes podem ser instanciadas com uma tag MXML ou com uma classe ActionScript.
Apresentando Controles Simples : Apresentando Controles Simples
Data Binding : Data Binding A tag permite atrelar propriedades (ou outros dados) de dois componentes Flex. O uso é bem simples. Só precisamos informar a fonte e o destino dos dados a serem atrelados. Neste caso, qualquer alteração na propriedade definida em source refletirá na propriedade definida em destination.
Veja um exemplo no qual temos duas caixas de texto. Experimente digitar qualquer conteúdo na primeira e veja como o conteúdo da segunda é automaticamente atualizado:
Data Binding : Data Binding
Exibindo imagens : Exibindo imagens Abra o arquivo index.mxml
Troque o Flex Builder para modo Design, clicando no botão Design Mode.
Se a view Components não estiver aberta, escolha Window > Components
Exibindo imagens : Exibindo imagens Selecione o Controle Image e arraste, soltando-o entre os controles “Leite” e “RS 1,99”.
Exibindo imagens : Exibindo imagens Altera a propriedade source da imagem.
Altere a propriedade Scale content para true.
Exibindo imagens : Exibindo imagens Em modo source, adicione a diretiva @Embed ao controle Imagem.
OBSERVAÇÃO: Está técnica aumenta consideravelmente o arquivo swf final.
Salve e compile a aplicação, depois clique em Run.
Construindo um Detail View : Construindo um Detail View Ainda em modo source, adicione o evento mouseOver a tag de imagem, conforme código abaixo:
OBSERVAÇÃO: Este evento simplesmente diz que ao passar o mouse sobre a imagem, o ActionScript será executado.
Construindo um Detail View : Construindo um Detail View Na mesma imagem adicione o evento mouseOut, qual será responsável por voltar ao estado original.
OBSERVAÇÃO: Este evento simplesmente diz que ao retirar o mouse de cima da imagem, o ActionScript será executado.
Salve o arquivo, volte ao modo Design e clique no botão Refresh.
Construindo um Detail View : Construindo um Detail View Crie um novo state com o nome imagemDetalhada, e assegure-se que esteja baseado no state .
Construindo um Detail View : Construindo um Detail View Retorne ao modo Source, localize a state imagemDetalhada, e altere o código conforme figura abaixo:
Construindo um Detail View : Construindo um Detail View Volte ao modo Design e arraste um control Text para dentro do VBox que acabamos de criar
Arraste um control Label para dentro do VBox e altere a propriedade Text para “Certificado Orgânico”.
Arraste um control Label para dentro do VBox e altere a propriedade Text para “Baixo teor de gordura”.
Verifique como ficou sua aplicação em modo Design
Construindo um Detail View : Construindo um Detail View
Construindo um Detail View : Construindo um Detail View
Construindo um Detail View : Construindo um Detail View Altere a propriedade width do control Text para 50%
Salve e rode a aplicação.