Adobe Flex Builder 3 : Adobe Flex Builder 3 Claiton Luis Perin
Objetivos : Objetivos Trabalhar com layouts baseados em constraint
Trabalhar com view states
Controlar view states
Fazer o layout de uma aplicação em modo Source
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.
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.
Trabalhando com View States : Trabalhando com View States 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 LinkButton do container caixaCarrinho. Sete as propriedades:
Na propriedade On click digite this.courrentState=‘visualizaCarrinho’
Controlando View States : Controlando View States 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=‘’
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 encerramento da 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 ( index.mxml): 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 Adicione os respectivos eventos aos botões. Após salve e teste o arquivo.
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.