Aula 1.2 - Criando uma aplicação com o Flex (User Interface)

Aula 1.2 - Criando uma aplicação com o Flex (User Interface)

 

Introdução

Nessa aula aprenderemos a criar uma aplicação simples para requisição de uso de veículos de uma empresa fictícia (veja Figura 1).

Figura 1: Preview da aplicação.

O objetivo dessa seção é de apresentar a forma como trabalhamos com os diversos componentes do Flex 4 e como os dispomos no painel de design para criar aplicativos.

 

I. Adicionando e configurando controles no modo de Design

Nessa seção vamos usar o Flash Builder 4 no modo de design para construir nossa aplicação.

 

1. Baixe o arquivo ex1_02_inicial.zip e descompacte-o em seu computador.

2. Abra o Flash Builder e importe o arquivo ex1_02_inicial.fxp.

3. No Package Explorer abra o arquivo ex1_02_inicial.mxml.

4. Mude para o modo de Design.

5. No painel de Componentes, arraste um controle Label e solte-o na esquerda superior da área de design (veja Figura 2).

Figura 2: Adicionando um controle Label na aplicação.

 

6. No painel de propriedades, localize a propriedade Text e digite "Formulário de Requisição de Veículos".

Nota: O painel de propriedades é mostrada do lado direito da interface de criação do Flash Builder (veja Figura 3).

7. No painel de propriedades usando a seção "Text" mude a cor da fonte para laranja, tamanho da fonte para 18 e clique no botão com a letra T do lado esquerdo para aplicar negrito (veja Figura 3).

Figura 3: Editando o controle Label e aplicando valor à propriedade text.

 

8. Ainda no painel de propriedades, use o segmento Size e Position para configurar a propriedade x com valor de 80 e a propriedade y com valor de 34 (veja Figura 4).

Figura 4: Configurando a posição do controle Label.

 

9. Dentro do painel "Components" na parte de Layout, arraste um container "Form" e solte-o abaixo do controle Label, use a linha-guia azul para alinhá-lo verticalmente (veja Figura 5).

 

10. A caixa de diálogo Insert Form aparece. Clique em OK para manter os valores padrão (veja Figura 6).

Figura 6: Mantendo valores padrão para o container Form.

 

11. No painel Components na agora na seção Controls, arraste um controle DropDownList e solte-o dentro do container Form (Figura 7). Novamente atente para a linha-guia para certificar-se de que o controle está sendo colocado dentro do formulário.

Figura 7: Colocando um controle DropDownList dentro do container Form.

 

12. Clique no Label que é criado na frente do controle DropDownList para selecionar o container FormItem que é criado aninhado neste controle.

13. Usando o painel de Propriedades, localize a propreidade Label do container FormItem e digite "Empregados:".

14. No painel Components arraste um controle FormHeading e coloque-o dentro do container Form, abaixo do controle DropDownList (veja Figura 8).

Figura 8: Adicionando controle FormHeading ao container Form.

 

15. Usando o painel de propriedades, localize a propriedade Label do controle FormHeading e digite "Informações Pessoais".

16. No painel Components, na seção Controls, arraste um controle TextInput e coloque-o dentro do container Form, abaixo do controle FormHeading (Figura 9).

 

Figura 9: Adicionando controle TextInput no container Form.

 

17. Clique no Label criado junto ao controle TextInput para selecionar o controle FormItem aninhado nesse controle.

18. Usando o painel de Propriedades, localize a propriedade Label e atribua o valor de "Telefone fixo:".

19. Arraste outro controle TextInput e solte-o abaixo do primeiro que você acabou de criar.

20. Para a propriedade Label desse segundo controle TextInput atribua o valor de "Telefone celular:".

21. No painel Components na seção Layout arraste outro controle FormHeading e coloque-o de do container Form abaixo do último controle TextInput (veja Figura 10).

 

Figura 10: Adicionando controle FormHeading ao container Form.

 

22. Usando o painel de propriedades atribua a propriedade Label desse controle o valor de "Datas Requisitadas"

23. No painel Components na seção controls, arraste um controle DateChooser e solte-o abaixo do controle FormHeading (Figura 11).

Figura 11: Adicionando controle DateChooser à aplicação.

 

24. Clique no Label criado junto do controle DateChooser para selecionar o container FormItem que está aninhado nesse controle.

25.Usando o painel de propriedades atribua à propriedade Label o valor de "Data de retirada do veículo".

26. Arraste outro controle DateChooser e coloque-o abaixo do anterior.

27. Clique no Label criado junto do controle DateChooser para selecionar o container FormItem que está aninhado nesse controle.

28. Usando o painel de propriedades atribua à propriedade Label o valor de "Data de entrega do veículo".

Por último vamos adicionar um botão ao formulário, mas ele será adicionado através de código.

29. Mude para o modo Source.

30. No fim do código dentro do bloco Form e abaixo do último container FormItem crie um novo bloco de container FormItem.

 
...
<mx:FormItem label="Data de entrega do veículo:">
<mx:DateChooser/>
</mx:FormItem>
<mx:FormItem>
</mx:FormItem>
</mx:Form>

 

31. Dentro do bloco FormItem recém criado crie um controle "botão" com a propriedade Label com valor de "Enviar Requisição".

 
<mx:FormItem>
<s:Button label="Enviar Requisição"/>
</mx:FormItem>

32. Salve o arquivo.

II. Compilando e rodando a aplicação.

Nesta seção vamos executar a aplicação e vê-la no browser.

1. Execute a aplicação clicando no botão Run (veja Figura 12).

Figura 12: Clicando no botão Run para testar a aplicação.

Você deve ver a aplicação como mostrada na Figura 13.

 

Figura 13: Rodando a aplicação.

 

III. Criando estilo CSS personalizado.

Nesta seção você usará o modo de design do Flash Builder para criar um estilo personalizado para um controle Label.

1. Retorne ao Flash Builder.

2. No modo de design, selecione o controle Label com o valor "Formulário de Requisição de Veículos".

3. No painel de propriedades, clique no botão "Convert to CSS" (veja Figura 14).

Figura 14: Clicando no botão Convert to CSS.

 

4. Na caixa de diálogo New Style Rule, clique no botão "New".

5. Na caixa de diálogo New CSS, para o File name, digite Styles (veja Figura 15).

Figura 15: Digitando Styles para o nome do arquivo CSS.

 

6. Clique no botão Finish.

7. Na caixa de diálogo New Style Rule faça o seguinte (Figura 16).

7.1 Para Selector type selecione o radio button "All components with style name".

7.2 Para o campo Name digite addHeader

Figura 16: Criando novo estilo CSS chamado addHeader.

 

8. Clique em OK.

Você verá o arquivo Styles.css aberto no Flash Builder (veja Figura 17). Você verá também o arquivo Style.css no painel Package Explorer.

Figura 17: Vendo o arquivo Styles.css com definição do estilo addHeader.

 

9. Volte para o arquivo ex1_02_inicial.mxml.

10. No painel de propriedades repare que o controle Label agora tem uma propriedade Style de addHeader (veja Figura 18). Esse estilo está disponível para todos os controles de texto.

 

Figura 18: O estilo addHeader pode ser aplicado a qualquer controle de texto.

 

11. Salve o arquivo.

 

IV. Adicionando vídeo na aplicação.

Nesta seção você usará o componente de vídeo para adicionar vídeo à aplicação.

1. Retorne ao arquivo ex1_02_inicial.mxml no Flash Builder.

2. No painel Components na seção de controles, arraste um controle chamado "VideoDisplay" e solte-o a direita do container de Form, use a linha azul para alinhá-lo no centro (veja Figura 19).

Figura 19: Adicionando controle VideoDisplay na aplicação.

 

3. Abra (caso ainda não esteja) o painel de propriedades.

4. Configure o valor da propriedade Source para: "http://www.aprendofacil.com.br/curso/flex/arquivos/aula01/ex1_02_video.flv"

5. Configure a propriedade width (largura) com valor de 325 e height (altura) com valor de 267 (veja Figura 20).

 

Figura 20: Configurando valores das propriedades source, width e height.

 

6. Salve o arquivo e orde a aplicação.

Você deverá ver o vídeo próximo do calendário de data de retirada do veículo (Figura 21). Repare que o controle VideoDisplay não tem controles de playback.

 

Figura 21: Rodando a aplicação e vendo o vídeo.

 

7. Retorne ao Flash Builder.

8. Delete o controle VideoDisplay.

9. Repita os passos 2-6 dessa seção agora usando o controle VideoPlayer.

10. Salve e rode a aplicação.

O controle VideoPlayer apresenta botões de controle (veja Figura 22).

 

Figura 22: Usando controle VideoPlayer - repare que agora existe controles no vídeo.

 

V. Adicionando tema na aplicação.

Nesta seção você aplicará um tema personalizado usando a propriedade skinClass dentro da tag Application. Em seguida você modificará esse tema.

1. No painel Package Explorer expanda a pasta skins para ter acesso ao arquivo AppSkin.mxml (veja Figura 23).

Figura 23: Encontrando o arquivo AppSkin.mxml.

 

2. Abra o arquivo AppSkin.mxml e troque para o modo Source para ver o código desse arquivo.

O arquivo AppSkin.mxml baseia-se na classe SparkSkin e consiste em dois estados (normal e disabled) e um bloco de metadados. Você vai aprender mais sobre os estados (states) mais a frente.

O método HostComponent() localizado dentro do bloco de metadados é um "contrato" entre o tema e a classe spark.components.Application. Isto permite acesso da classe AppSkin.mxml as propriedades públicas da classe Application e permite o arquivo ser usado como um tema para a aplicação. O bloco Rect desenha o fundo da aplicação, neste caso configurando uma cor cinza. O container Group com a propriedade id de contentGroup representa todo o conteúdo dentro do container da aplicação.

3. No arquivo ex1_02_inicial.mxml, certifique-se de estar em modo Source (código) e adicione a propriedade skinClass dentro da tag Application atribuindo valor de skins.AppSkin, veja abaixo como deve ficar o código:

 
<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"
skinClass="skins.AppSkin" >

Nota: se você estiver usando a ferramenta de assistente de conteúdo para adicionar a propriedade skinClass, você verá que foi gerado um bloco de Script com declaração import. Eles não são necessários e podem ser deletados da aplicação.

4. Salve o arquivo e rode a aplicação.

Repare que a aplicação adquire um tema com um fundo cinza e centralizado na tela (veja Figura 24).

 

Figura 24: Visualizando a aplicação com o tema modificado.

 

5. Retorne ao Flash Builder.

6. Abra AppSkin.mxml.

Observe a propriedade id com valor de "contentGroup" dentro da tag "Group" no fim do arquivo AppSkin.mxml veja a definição de layout e posicionamento.

 
<s:Group id="contentGroup"
top="20"
horizontalCenter="0">
<s:layout>
<s:BasicLayout/>
</s:layout>
</s:Group>

Repare também a tag "Rect" e suas propriedades com valores de posicionamento, largura, altura e definição de cores de preenchimento.

 
<s:Rect horizontalCenter="0"
width="850" height="100%" >
<s:fill>
<s:SolidColor color="#CCCCCC" />
</s:fill>
<s:stroke>
<s:SolidColorStroke color="#AAAAAA" />
</s:stroke>
</s:Rect>

7. Dentro da tag Rect, adicione a propriedade radiusX com valor de 10.

 
<s:Rect horizontalCenter="0"
width="850" height="100%" radiusX="10">
...

8. Dentro do bloco "fill", mude o valor da propriedade SolidColor para:

 
<s:fill>
<s:SolidColor color="#CEDBEF" />
</s:fill>

 

9. salve o arquivo e rode a aplicação.

A cor do fundo da aplicação assume uma cor azul e os cantos ficam arredondados (veja Figura 25).

 

Figura 25: Mudando a propriedade fill e radiusX.

 

VI. Mudando o tema dos componentes através do Theme Browser.

Por padrão, os componentes Flex usam temas spark ou MX. Nesta seção você vai usar o Theme Browser do Flash Builder para alterar o tema do aplicativo para um tema  diferente.

1. Retorne ao arquivo ex1_02_inicial.mxml no Flash Builder e mude para Design Mode.

2. Abra a tab Appearance e clique no link localizado próximo ao campo Current theme (veja Figura 26).

 

Figura 26: Clique no link Current theme.

 

3. Na caixa de diálogo Select project theme, expanda o Adobe Themes - Spark e selecione Wireframe (veja a Figura 27).

Figura 27: Selecione Wireframe.

 

4. Clique em OK.

5. Rode a aplicação.

Os controles da aplicação agora estão usando estilos do tema Wireframe (veja a Figura 28).

 

Figura 28: Rodando a aplicação e vendo o tema Wireframe aplicado.

 

Conhecimentos adquiridos

Neste tutorial você aprendeu como criar uma aplicação Flex e navegar no Flash Builder4.

Agora já sabemos como responder, por exemplo as perguntas abaixo: