Adobe Flex Builder 3 : Adobe Flex Builder 3 Claiton Luis Perin
Objetivos : Objetivos Usar containers
Fazer o layout de uma aplicação em modo Design
Trabalhar com layouts baseados em constraint
Usar enhanced constraints
Trabalhar com view states
Controlar view states
Fazer o layout de uma aplicação em modo Source
Fazendo o Layout da Interface : Fazendo o Layout da Interface Todo o layout no Flex é feito usando-se containers.
A tag é de fato um container.
Cada container possui um conjunto de regras que determina como é feito o layout de qualquer tag filha.
VBox (Os filhos são dispostos verticalmente)
HBox (Os filhos são dispostos horizontalmen-te)
Canvas (Os filhos são colocados nas coordenadas x e y especificadas pelo desenvolvedor)
Application (Pode ser ajustado para comportar-se como um container VBox, HBox ou Canvas, através do uso do atributo layout)
Fazendo o Layout da Interface : Fazendo o Layout da Interface Title (Dispõe seus filhos em uma ou mais colunas verticais ou linhas horizontais. As quebras são feitas de forma automática)
Panel (Uma subclasse do container Box, um container Panel pode agir como um HBox, VBox ou Canvas, dependendo do atributo layout. Panel contém uma barra de área de título e uma mensagem de status)
ControlBar (Utilizado para ancorar uma barra de ferramenta ao rodapé de um container Panel ou TitleWindow)
Fazendo o Layout da Interface : Fazendo o Layout da Interface ApplicationControlBar (Normalmente utilizado para manter componentes que dão acesso a elementos usados através da aplicação)
Fazendo o Layout da Interface : Fazendo o Layout da Interface Para continuarmos com nosso estudo, utilizaremos a aplicação criada no exercício anterior.
Abra o arquivo index.mxml
Mude para o modo Design
Arraste um container ApplicationControlBar para a aplicação, em seguida altere as propriedades:
Dock para true
Ajuste a largura do container ApplicationControlBar para 100%
Ajuste o comprimento para 90
Remova qualquer entrada para as coordenadas x e y
Fazendo o Layout da Interface : Fazendo o Layout da Interface Arraste um container Canvas para dentro do container ApplicationControlBar e ajuste as propriedades:
Largura 100%
Comprimento 100%
Fazendo o Layout da Interface : Fazendo o Layout da Interface Arraste um controle Label para dentro do container Canvas localizado no container ApplicationControlBar, e ajuste as propriedades:
Sete a propriedade text para “Flex”
Sete as coordenadas x e y para 0
Fazendo o Layout da Interface : Fazendo o Layout da Interface Arraste um novo controle Label para dentro do container Canvas localizado no container ApplicationControlBar, e ajuste as propriedades:
Sete a propriedade text para “Comércio”
Sete as coordenadas x para 10 e y para 26
Arraste um controle Button para dentro do container e ajuste as propriedades:
ID para btnVerCarrinho
Label para “Ver Carrinho”
Largura 100
Arraste um segundo controle Button para dentro do container Canvas, logo a esquerda do primeiro Button e ajuste as propriedades:
ID para btnFinalizar
Label para “Finalizar”
Largura 100
Fazendo o Layout da Interface : Fazendo o Layout da Interface Arraste um novo controle Label para dentro do container Canvas localizado no container ApplicationControlBar, e ajuste as propriedades:
Sete a propriedade text para “Comércio”
Sete as coordenadas x para 10 e y para 26
Arraste um controle Button para dentro do container e ajuste as propriedades:
ID para btnVerCarrinho
Label para “Ver Carrinho”
Largura 100
Arraste um segundo controle Button para dentro do container Canvas, logo a esquerda do primeiro Button e ajuste as propriedades:
ID para btnFinalizar
Label para “Finalizar”
Largura 100
Fazendo o Layout da Interface : Fazendo o Layout da Interface Arraste um controle Label e posicione-o próximo à borda inferior direita da tela. Clique duas vezes e ajuste a propriedade:
Sete a propriedade text para “(C) 2009, Flex Comércio”
Fazendo o Layout da Interface : Fazendo o Layout da Interface Arraste um container HBox e coloque-o na área grande abaixo do container ApplicationControlBar, ao soltá-lo uma caixa de diálogo é mostrada, ajuste as propriedades:
Altura e largura em 100%.
Sete o ID para caixaPrincipal (Este container mostrará os detalhes do produto e o carrinho de compras)
Sete as coordenadas x e y para 0
Arraste um container VBox e solte-o dentro do container HBox (você pode usar a view Outline ou botão Show Surrounding Containers para verificar que você tem o container VBox dentro do HBox), ajuste as propriedades:
Defina altura e largura em 100%
Sete o ID para produtos (Este container conterá os detalhes para um produto)
Fazendo o Layout da Interface : Fazendo o Layout da Interface Arraste dois Label dentro do novo container VBox. Sete as propriedades:
Label 1 – Sete o ID para nomeProduto
Label 1 – Sete a propriedade text para “Leite”
Label 2 – Sete o ID para precoProduto
Label 2 – Sete a propriedade text para “R$ 1,99”
Adicione um controle Button abaixo dos dois Labels. Sete as propriedades:
Sete o ID para btnAdiconar
Sete a propriedade Label para “Adicionar ao Carrinho”
Salve o arquivo e clique em Rum.
Trabalhando com Layouts Baseados em Constraints : Trabalhando com Layouts Baseados em Constraints O Flex suporta layouts baseados em constraints, o que lhe possibilita dispor elementos da interface do usuário com a liberdade e a precisão de pixels de posicionamento absoluto.
O container Canvas requer que elementos sejam posicionados para coordenadas absolutas, no entanto, contraints de layout permite a usuários que ajustem dinamicamente o layout baseado no tamanho da janela do seu browser.
O Flex permite constraints do topo, centro vertical, rodapé, esquerda, centro horizontal ou direita de um container Canvas.
Trabalhando com Layouts Baseados em Constraints : Trabalhando com Layouts Baseados em Constraints O Flex permite constraints do topo, centro vertical, rodapé, esquerda, centro horizontal ou direita de um container Canvas.
Os Contraints só podem ser utilizados se o container permitir posicionamento absoluto.
Trabalhando com Layouts Baseados em Constraints : Trabalhando com Layouts Baseados em Constraints Abra o arquivo index.mxml
Encontre e selecione o botão btnFinalizar. Na área de constraints adicione um constraint para que a borda direita do botão esteja a 10 pixels da borada direita do container.
Encontre e selecione o botão btnVerCarrinho. Adicione um constraint para que a borda direita do botão esteja a 120 pixels da borda direita do container.
Encontre e selecione a label com a nota de copyriht. Faça o constraint desse Label para que esteja 10 pixels acima do rodapé e 10 pixels distante da borda direita de seu container.
Trabalhando com Layouts Baseados em Constraints : Trabalhando com Layouts Baseados em Constraints Abra o arquivo index.mxml
Encontre e selecione o botão btnFinalizar. Na área de constraints adicione um constraint para que a borda direita do botão esteja a 10 pixels da borada direita do container.
Encontre e selecione o botão btnVerCarrinho. Adicione um constraint para que a borda direita do botão esteja a 120 pixels da borda direita do container.
Encontre e selecione a label com a nota de copyriht. Faça o constraint desse Label para que esteja 10 pixels acima do rodapé e 10 pixels distante da borda direita de seu container.
Insira um segundo container VBox no container HBox caixaPrincipal. Sete as propriedades:
Sete o ID para caixaCarrinho
Ajuste altura para 100% e deixe a largura em branco
Trabalhando com Layouts Baseados em Constraints : Trabalhando com Layouts Baseados em Constraints Adicione um controle Label no container caixaCarrinho. Sete a propriedade:
Text para “Total do seu carrinho: R$” (a direita do carrinho de compras, haverá um resumo indicando se há itens e qual o subtotal atual)
Arraste um controle LinkButton abaixo do controle Label criado no passo 6. Sete a propriedade:
Label para “Ver carrinho” (Este link será usado para mostrar ao usuário o conteúdo total de seu carrinho de compras)
Salve o arquivo e clique em Rum.
Trabalhando com View States : Trabalhando com View States Uma View State é uma das várias visões que você pode definir para uma aplicação ou um componente customizado. Cada página MXML tem no mínimo um state, referido como base view state, que é representado pelo layout default do arquivo.
Abra o arquivo index.mxml
Se ainda não estiver aberta, abra a view states no Flex Builder 3.
Crie um novo state com o nome de visualizaCarrinho (Esta state mostrara ao usuário os detalhes de todos os itens que eles adicionaram ao carrinho)
Com o novo state selecionado, clique no container Produtos e ajuste sua altura e largura para 0; Em seguida, escolha o container caixaCarrinho e ajuste sua altura e largura para 100%.
Trabalhando com View States : Trabalhando com View States Ainda com o state visualizaCarrinho selecionado, arraste um controle DataGrid e solte-o abaixo do link ver carrinho. Sete as propriedades:
Sete o ID do DataGrid paga dgCarrinho
Ajuste a largura do DataGrid para 100%.
Salve o arquivo. (Testar o arquivo neste momente não deverá trazer nenhuma diferença, pois não adicionamos nenhuma habilidade para que o usuário alterne entre os states)
Controlando View States : Controlando View States Cada página MXML tem uma propriedade chamada currentState. Você pode usar essa propriedade para controlar qual state da aplicação é mostrado ao usuário a qualquer momento.
Abra o arquivo index.mxml
Se ainda não estiver aberta, abra a view States no Flex Builder e ajuste o state esolhido para (start).
Selecione o controle LinButton do container caixaCarrinho. Sete as propriedades:
Na propriedade On click digite this.courrentState=‘visualizaCarrinho’
Mude para o state visualizaCarrinho. Adicione um novo LinkButton abaixo do controle DataGrid. Sete as propriedades:
Sete o label para “Continue comprando”
Na propriedade On click digite this.courrentState=‘’
Controlando View States : Controlando View States Exclua o LinkButton “Ver Carrinho” da state visualizaCarrinho.
Salve e teste a aplicação.
Criando Layout de uma aplicação em modo Source : Criando Layout de uma aplicação em modo Source Agora que já nos familiarizamos melhor com o modo Design, vamos criar um aplicativo que tem por objetivo mostrar um gráfico de vendas.
Abra o arquivo index2.mxml
Troque o Flex Builder para modo Source.
Adicione uma tag e ajuste a propriedade dock para true. Adicione quatro tags como filhas ao container ApplicationControlBar, com labels dizendo Todos, Vendas, Categorias e Comparação.
Criando Layout de uma aplicação em modo Source : Criando Layout de uma aplicação em modo Source Após a tag , adicione um container Panel. Sete as propriedades:
Sete o ID para vendas
Sete a altura e largura para 100%
Sete a propriedade title para “Gráfico de vendas”
Adicione um container ControlBar como filho da tag
Após o fechamento da tag para continer Panel, adicione um container VBox. Sete as propriedades.
Sete a propriedade ID para direitaGrafico
Sete a altura e largura para 100%
Dentro do container Vbox, adicione o código abaixo:
Criando Layout de uma aplicação em modo Source : Criando Layout de uma aplicação em modo Source Salve e teste a aplicação.
Adicionando e Controlando View States com MXML : Adicionando e Controlando View States com MXML No Flex, states são definidos em um bloco . Cada State é representada por uma tag , com atributos indicando seu nome.
Veja o código abaixo: Tag responsável por setar algumas propriedades.
Adicionando e Controlando View States com MXML : Adicionando e Controlando View States com MXML Abra o arquivo index2.mxml
Após o fechamento da tag , mas antes da tag , adicione o código abaixo:
Adicionando e Controlando View States com MXML : Adicionando e Controlando View States com MXML
Exercícios : Exercícios Utilizando os conceitos estudados, construa uma aplicação para cadastro de clientes, onde o usuário possa escolher entre a tela com ajuda e a tela sem ajuda. Abaixo exemplo da aplicação.
Exercícios : Exercícios Código fonte da aplicação final.