Aula 1.6 - Criando componentes MXML personalizados com ActionScript 3.

Requisitos

Introdução

Nesse exercício aprenderemos a usar o Flash Builder para criar uma classe MXML e reutilizá-la para mostrar informações de estados brasileiros (veja figura 1).

 

Figura 1: Exercício pronto.

Nessa aula você aprenderá:

 

 

 

I. Desenhando uma aplicação.

Nesta seção adicionaremos controles Flex à aplicação.

1. Baixe o exercício ex1_06_inicial.zip, descompacte-o em seu computador.

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

3. Abra o arquivo ex1_06_inicial.mxml.

4. Alterne para o mode de Design.

5. Do painel Components view, arraste um controle Label e solte-o na área de design. (veja Figura 2).

 

 

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

6. Use o painel Properties view para atribuir à propriedade "text" do controle Label o valor de "Estados Brasileiros".

7. Configure o tamanho da fonte em 22 e o texto em negrito (veja Figura 3).

 

 

Figura 3: Configurando o controle Label, size 22 e negrito.

8. Ainda no painel Components view arraste um controle Image e solte-o no editor de design (veja Figura 4).

 

 

Figura 4: Adicionando um controle Image na aplicação.

9. Use o painel Properties view para atribuir à propriedade Source do controle Image o valor images/band_gde_mg.png (veja Figura 5).

 

 

Figura 5: Atribuindo à propriedade Source o valor de "images/band_gde_mg.png".

10. Do painel Components view arraste um controle Label e solte-o abaixo do controle image (veja Figura 6).

 

 

Figura 6: Colocando o controle Label abaixo do controle Image.

11.Use o painel Properties view para atribuir à propriedade text do controle Label o valor de Minas Gerais - MG.

12. Salve o arquivo.

13. Rode a aplicação.

A aplicação deve se parecer com a imagem da Figura 7.

 

 

Figura 7: Rodando a aplicação.

 

II. Criando um componente MXML.

Nesta seção vamos criar um componente personalizado para usar no lugar do controle adicionado na aplicação na última seção.

1. Retorne ao Flash Builder.

2. No Package Explorer, selecione a pasta src, em seguida clique em File > New > Folder.

3. Dê o nome de "componentes" a essa pasta (veja Figura 8).

 

 

Figura 8: Pasta componentes sendo criada.

4. Clique em Finish.

5. No Package Explorer, selecione a pasta "componentes" e em seguida selecione File > New > MXML Component.

6. Dê a esse componente o nome de "MostraEstados".

7. A base do componente é Group container (spark.components.Group).

8. Delete valores de propriedades Width e Height.

A caixa de dialogo de criação do componente MXML deve se parecer com a Figura 9.

 

 

Figura 9: Criando um novo componente MXML.

9. Clique em Finish.

10. Abra o arquivo ex1_06_inicial.mxml e alterne para o modo de código (Source mode).

11. Recorte os controles Image e Label que foram usados como nome do Estado, volte ao arquivo MostraEstados.mxml e no modo de código cole-o abaixo do bloco de declarações.

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<mx:Image x="10" y="39" source="images/band_gde_mg.png"/>
<s:Label x="10" y="201" text="Minas Gerais - MG"/>

</s:Group>

12. Do controle image delete valores das propriedades x e y para que fique como a declaração abaixo:

<mx:Image source="images/band_gde_mg.png"/>

13. Mude os valores das propriedades x e y do controle Label para x=0 e y=142.

<s:Label x="0" y="142" text="Minas Gerais - MG"/>

14. Salve o arquivo.

15. Retorne ao exercício ex1_06_inicial.mxml.

16. Abaixo do comentário <!--UI components ~~~-->, adicione uma instância do componente personalizado digitando os caracteres <Most e pressionando Enter quando o assistente de código for mostrado (Veja Figura 10).

 

 

Figura 10: Usando assistente de codigo para adicionar instância do componente MostraEstados.

17. Dentro da tag Application, certifique-se de que o namespace xml do componente foi gerado. Se não adicione o namespace direcionando-o ao diretorio "componentes". Veja abaixo como deve ser o código:

<?xml version="1.0" encoding="utf-8"?>
<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="1024" minHeight="768" xmlns:componentes="componentes.*">
<s:Label x="10" y="10" text="Estados Brasileiros" fontSize="22" fontWeight="bold"/>

18. Para o componente MostraEstados adicione a propriedade x o valor de 10 e a propriedade y o valor de 41.

<componentes:MostraEstados x="10" y="41">

19. Alterne para o  modo de Design.

20. Do painel Components view arraste outro componente MostraEstados e solte-o na área de design próximo ao primeiro (veja Figura 11).

 

 

Figura 11: Usando o painel Components view para adicionar outro componente MostraEstados.

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

Você devera ver que a aplicação contém dois componentes MostraEstados, como mostrado na Figura 11.

 

 

Figura 11: Rode a aplicação.

III. Criando uma propriedade de classe.

Nesta seção você criará duas propriedades de classe e as usará para mostrar dados.

1. Retorne ao Flash Builder.

2. Abra o arquivo MostraEstados.mxml.

3. Abaixo tag Group crie um bloco de script.

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[

]]>
</fx:Script>

<fx:Declarations>

...

4. No bloco de script declare uma variável pública vinculável chamada imagem com o tipo de dados String.

<fx:Script>
<![CDATA[
[Bindable]
public var imagem:String;
]]>
</fx:Script>

5. Declare outra variável pública vinculável chamada nomeDoEstado com tipo de dados da classe String.

[Bindable]
public var imagem:String;
[Bindable]
public var nomeDoEstado:String;

6. Na propriedade source do controle Image, substitua o valor atual pelo nome da variável "imagem" e altere as dimensões de largura e altura, conforme abaixo:

Nota: Essa atribuição de largura e altura é para facilitar a organização visual dos componentes no modo de Design.

<mx:Image width="240" height="154" source="images/{imagem}" />

7. Para o controle Label, vincule o valor da propriedade "text" ao valor da variavel "nomeDoEstado".

<s:Label x="0" y="160" text="{nomeDoEstado}"/>

8. Salve o arquivo.

9. Abra ex1_06_inicial.mxml.

10. No modo Source code na tag do primeiro componente, adicione à propriedade imagem o valor de band_gde_mg.png.

<components:MostraEstados imagem="band_gde_mg.png"/>

11. Para o mesmo componente, adicione à variavel "nomeDoEstado" o valor de "Minas Gerais - MG".

<s:Label x="10" y="10" text="Estados Brasileiros" fontSize="22" fontWeight="bold"/>
<componentes:MostraEstados x="10" y="39" imagem="band_gde_mg.png"  nomeDoEstado="Minas Gerais - MG">
</componentes:MostraEstados>

12. Arraste mais três componentes personalizados e distribua-os na tela conforme figura 12 e atribua valores conforme o código a seguir:

<s:Label x="10" y="10" text="Estados Brasileiros" fontSize="22" fontWeight="bold"/>
<componentes:MostraEstados x="10" y="39" imagem="band_gde_mg.png"  nomeDoEstado="Minas Gerais - MG">
</componentes:MostraEstados>
<componentes:MostraEstados x="344" y="39" imagem="band_gde_pb.png" nomeDoEstado="Paraíba - PB">

 

</componentes:MostraEstados> <componentes:MostraEstados  imagem="band_gde_sp.png" nomeDoEstado="São Paulo - SP" x="11" y="230"></componentes:MostraEstados> <componentes:MostraEstados  imagem="band_gde_pe.png" nomeDoEstado="Pernambuco - PE" x="344" y="230"> </componentes:MostraEstados> ...

 

Figura 12: Distribuição dos componentes personalizados.

13. Salve o arquivo.

14. Rode a aplicação.

Os componentes personalizados agora mostram dois estados diferentes (veja Figura 13).

 

 

Figura 13: Rodando a aplicação.

Conhecimentos adquiridos

Nessa aula você aprendeu como criar e usar uma classe MXML personalizada.

Agora você está apto a responder as perguntas abaixo: