Aula 3.2 - Estendendo a classe Event para passar dados no objeto event.

Aula 3.2 - Estendendo a classe Event para passar dados no objeto event.

Requisitos

Introdução

No exercicio 3.1 você aprendeu como disparar um evento da instância do componente "Escolha" e manipulá-lo na aplicação principal para tornar a instância do componente "Prever" visível.

Nesse exercício, você passará dados da instância do componente "Escolha" para a instância do componente "Prever" (veja Figura 1). Para realizá-lo, você deve fazer mais do que criar, instanciar e disparar um evento. Para passar dados com o evento, você deve estender o tipo Event criando sua própria classe ActionScript para gerenciar os dados adicionais.

Figura 1: O exercício finalizado.

Nessa aula você aprenderá como:

I. Criando uma classe ActionScript e estendendo a classe Event.

Precisamos de toda a funcionalidade da classe Event, mas precisamos também de funcionalidade adicional responsável pelo armazenamento de dados customizados no objeto event. Nessa seção criaremos uma nova classe ActionScript que estenderá a classe Event com propriedades de classe adicionais. Estendendo a classe Event, preservamos acesso a todas as suas funcionalidades e podemos adicionar novas propriedades para armazenar os dados de nossa aplicação.

1. Baixe o arquivo ex3_02_inicial.zip se ainda não baixou e descompacte-o em seu computador.

2. Abra o Flash Builder.

3. Importe o arquivo ex3_02_inicial.fxp.

4. Abra o arquivo ex3_02_inicial.mxml.

5. Rode a aplicação.

6. Clique no botão "Prever" para visualizar o componente personalizado "Prever" que contém o container painel com os dados do "Empregado do Mês" (veja Figura 2). No exercício anterior você fez o painel "Empregado do Mês" invísivel ao iniciar a aplicação e em seguida torná-lo visível quando o usuário clica no botão "Prever" do componente personalizado "Escolha".

Figura 2: Clique no botão "Prever" para visualizar o componente personalizado.

7. Retorne ao Flash Builder.

8. Abra o arquivo "Escolha.mxml" na pasta componentes.

Você pode ver que o evento clique no botão prever é manipulado pela função "prever_clickHandler(), a qual instancia o objeto Event do tipo personalizado mostraPrever e o dispara na aplicação principal.

9. Retorne ao ex3_02_inicial.mxml e localize a instância do componente "escolherEmpregado".

Você pode ver que a aplicação principal manipula o evento mostraPrever com o manipulador de evento escolherEmpregado_mostraPreverHandler(), responsável pela visibilidade da instância do componente "Prever".

10. No painel Package Explorer, clique com o botão direito do mouse  na pasta "src" e selecione New > ActionScript Class (veja Figura 3).

Figura 3: Criando um novo arquivo de classe ActionScript.

11. Na caixa de dialogo "New ActionScript Class" para Package digite "eventos" e para Name digite "MostraPrever". Lembre-se que por convenção o nome de classe deve começar com letra maiuscula. Não confuda essa classe com o tipo de evento "mostraPrever" definido no bloco de tag Metadata do componente personalizado "Escolha".

12. Clique no botão Browse próximo ao campo Superclass.

13. Na caixa de diálogo SuperClass digite "event" e então selecione a classe Event (veja Figura 4).

Figura 4: Atribuindo a Superclass o valor da classe Event.

14. Clique OK.

Sua caixa de dialogo "New ActionScript Class" deve se parecer com a figura 5.

Figura 5: Nome da nova classe ActionScript "MostraPrever" e atribuição a ela da SuperClasse flash.events.Event.

15. Clique em Finish.

O arquivo MostraPrever.as é aberto no editor. Observe na linha 5 a declaração da classe MostraPrever herdando funcionalidades da classe Event (veja Figura 6).

Figura 6: Classe MostraPrever estendendo a classe Event.

II. Adicionando propriedades a classe para armazenar dados.

Nessa seção, declararemos propriedades para serem usadas com a classe "MostraPrever". Lembre-se que estas propriedades são o motivo para criar um evento de classe.

Elas reterão os dados do componente personalizado "Escolha". Especificamente elas reterão informações do controle DropDownList referentes ao empregado selecionado bem como o texto digitado na caixa de texto de mensagem de congratulações.

1. Dentro da declaração de classe, mas acima da função construtora MostraPrever(), declare uma variavel pública chamada informacaoDoEmpregado com tipo de dados da classe Object.

public class MostraPrever extends Event
{
public var informacaoDoEmpregado:Object;
public function MostraPrever(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
{
super(type, bubbles, cancelable);
}
}

Como a propriedade informacaoDoEmpregado é do tipo Object, ela pode conter qualquer par de nome-valor. Eles serão usados para armazenar os dados selecionados no controle DropDownList do componente personalizado "Escolha". Lembrando que o controle DropDownList é preenchido com os dados do arquivo "empregados.xml" que está na pasta "dados". Embora a propriedade labelField esteja configurada para mostrar somente o valor "primeironome" do arquivo xml, lembre-se que as demais informações do arquivo xml também são armazenadas como pares nome-valor.

2. Abaixo da variável informacaoDoEmpregado, declare uma variável pública chamada "mensagem" com o tipo de dados da classe String.

public var informacaoDoEmpregado:Object;
public var mensagem:String;

A propriedade "mensagem" desta nova classe armazenará a sequência de dados digitada na caixa de texto do componente personalizado "Escolha".

III. Criando uma função construtora e populando as propriedades de classe.

Acabamos de criar as propriedades, agora vamos preenchê-las com informações.

Quando uma classe ActionScript é instanciada usando a palavra-chave "new", os dados podem ser passados à instância entre parentêses na função contrutora. Nesta seção vamos definir argumentos para esse construtor que aceitará os dados.

1. No método construtor MostraPrever() e aninhado ao método super(), remova os parâmetros bubbles e cancelable.

public function ShowPreview(type:String)
{
super(type);
}

O primeiro argumento no construtor é o nome do tipo de evento. Lembre-se que o tipo de evento que você já viu foi o "click" e o "change". Neste caso o tipo de evento que você declarará será o tipo de evento "mostraPrever" definido na diretiva de compilação "Metadata".

2. Para a função MostraPrever() adicione as variáveis informacaoDoEmpregado e mensagem, certifique-se de aplicar os tipos de dados correspondente a cada uma delas.

public function MostraPrever(type:String, informacaoDoEmpregado:Object, mensagem:String)
{
super(type);
}

3. Dentro da função ShowPreview, abaixo do método "super()" acrescente ao argumento da função construtora a variável "informacaoDoEmpregado" e "mensagem" com seus respectivos tipo de dados.

public function MostraPrever(type:String, informacaoDoEmpregado:Object, mensagem:String)
{
 super(type);
  this.informacaoDoEmpregado = informacaoDoEmpregado;
  this.mensagem = mensagem;
}

Você usará a palavra chave "this" antes da propriedade de classe para fazer distinção entre a propriedade da classe e os argumentos do construtor.

IV. Sobrepondo o método clone().

A classe Event tem um método chamado clone() que é usado apenas quando você estende a classe. Nesta subclasse, neste caso "MostraPrever", você usará a palvara-chave "override" para adicionar sua própria funcionalidade ao método "clone()". Esta função será automaticamente chamada quando você instanciar o evento e criará um objeto de evento com os dados.

1. Abaixo do construtor MostraPrever(), sobreponha o método "clone()".

override public function clone():Event
{

}

2. Dentro da função, use o operador "return" para retornar uma nova instância da função "MostraPrever()", declarando tipo e dados como argumentos.

override public function clone():Event
 {
    return new MostraPrever(type,informacaoDoEmpregado,mensagem);
}

3. Salve o arquivo.

V. Definindo o tipo de evento para a classe estendida.

Logo você estará criando uma instância da classe padrão "flash.events.Event". Você precisará instanciar a classe "ShowPreview" para que ela aceite dados adicionais. Nesta seção, você ajustará o componente personalizado "Escolha" com a diretiva de compilação "Metadata" para incluir o tipo de evento showPrevew.

1. No painel Package Explorer, abra o arquivo "Escolha.mxml".

2. Localize a tag MetaData.

3. Para o tipo de parâmetro aninhado no método "Event()", mude a definição de valor para "events.MostraPrever".

<fx:Metadata>
[Event(name="mostraPrever",type="events.MostraPrever")]
</fx:Metadata>

A classe MostraPrever está na pasta events do projeto Flex logo o pacote de classe refere-se aquela pasta. Tenha em mente sempre que mostraPrever (m minúsculo) e o valor do tipo de evento, similar ao tipo de evento "click" ou "change" que você usou no outro componente MostraPrever (m maiúsculo) que é o evento da classe.

Em outras palavras, você estará criando uma instância da classe ShowPreview e disparará o evento showPreview que será manipulado na aplicação principal.

VI. Disparando o evento de objeto com os dados.

Relembrando que o cenário da aplicação consiste de um usuário escolher o nome de um empregado em um controle DropDownList, digitar uma mensagem de congratulações e então clicar no botão Prever.

No momento, quando o usuário clica no botão Prever, o evento click é manipulado pela função "prever_clickHandler(), a qual cria um objeto de evento genérico que dispara o evento MostraPrever.

Nessa seção, você modificará a função prever_clickHandler() para criar um objeto de evento "MostraPrever" que conterá dados e disparará o evento "mostraPrever".

1. Dentro do bloco de Script, abaixo do comentário de manipulação de evento, localize a função "prever_clickHandler().

protected function prever_clickHandler(event:MouseEvent):void
{
 var eventoDeObjeto:Event = new Event("mostraPrever");
 dispatchEvent(eventoDeObjeto);
}

2. Dentro da função, mude o tipo de dados da variável eventoDeObjeto para o tipo "MostraPrever".

protected function prever_clickHandler(event:MouseEvent):void
{
 var eventoDeObjeto:MostraPrever = new Event("mostraPrever");
 dispatchEvent(eventoDeObjeto);
}

3. Instancie a variavel "eventoDeObjeto" para uma instância da classe "MostraPrever", passando "mostraPrever" como parâmetro, o valor selecionado no controle DropDownList como parâmetro de informação sobre o empregado e o valor da mensagem de congratulações no controle TextArea.

protected function prever_clickHandler(event:MouseEvent):void
{
var eventoDeObjeto:MostraPrever = new Event("mostraPrever", listaEmpregados.selectedItem, mensagem.text);
dispatchEvent(eventoDeObjeto);
}

4. Dentro do bloco de Script localize o comentário import.

5. Se o pacote event.MostraPrever não estiver presente na declaração import, adicione-o abaixo da declaração que importa o pacote mx.collections.ArrayCollection.

// import statements ----------------------------------------
import mx.collections.ArrayCollection;
import eventos.MostraPrever;

6. Salve o arquivo.

VII. Manipulando o evento de objeto na aplicação principal.

Quando o usuário clica no botão Prever, os dados do controle DropDownList e a mensagem de congratulações são empacotadas no objeto de evento e disparadas para a aplicção principal.

Nessa seção, você atualizará o manipulador de evento "mostraPrever" na aplicação principal para passar os dados da instânca do componente personalizado "Prever" para ser mostrado no painel Empregado do Mês.

1. Retorne ao arquivo ex3_02_inicial.mxml.

2. Dentro do bloco de script localize a função escolherEmpregado_mostraPreverHandler().

3. Para os argumentos da função reescreva o parâmetro event para ser do tipo de dados da classe "MostraPrever".

protected function escolherEmpregado_mostraPreverHandler(event:MostraPrever):void
{
preverEmpregadoDoMes.visible = true;
}

4. Dentro da função, atribua a propriedade informacaoDoEmpregado o valor de event.informacaoDoEmpregado.

protected function escolherEmpregado_mostraPreverHandler(event:MostraPrever):void
{
preverEmpregadoDoMes.visible = true;
preverEmpregadoDoMes.informacaoDoEmpregado = event.informacaoDoEmpregado;
}

Lembrando que o componente personalizado "Prever" espera duas propriedades: "infoDoEmpregado" e "mensagem". Abra o arquivo "Prever.mxml" para ver essas propriedades e como elas estão ligadas aos elementos da interface do usuário no container painel.

5. Atribua a propriedade mensagem o valor de "event.message".

protected function chooseEmployee_showPreviewHandler(event:ShowPreview):void
{
previewEmployeeOfTheMonth.visible = true;
previewEmployeeOfTheMonth.employeeInfo = event.employeeInfo;
previewEmployeeOfTheMonth.message = event.message;
}

6. Dentro do bloco de script, localize as declarações de comentários import.

7. Abaixo da última declaração import, importe o pacote events.ShowPreview.

// import statements ----------------------------------------
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
import events.MostraPrever;

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

9. Selecione um empregado no controle DropDownList (veja Figura 7).

Figura 7: Escolhendo o empregado do mês.

10. Digite uma mensagem para o empregado (veja Figura 8).

Figura 8: Digitando uma mensagem ao empregado.

11. Clique no botão Prever.

Você deve ver o aparecimento do container Empregado do Mês populado de dados (veja Figura 9).

Figura 9: Clique no botão Prever para visualizar dados do empregado do mês.

Conhecimentos adquiridos.

Neste exercício você aprendeu como estender uma classe ActionScript e disparar um manipulador de evento personalizado.

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

P.1. Qual é o caminho usado para criar um novo arquivo de classe ActionScript no Flash BUilder?

R.1. Select File > New > ActionScript class.

P.2. Como é chamada a função que é usada para passar dados a uma propriedade dentro de uma classe?

R.2 Função construtora da classe.

P.3. Você pode passar dados em um evento genérico (Um objeto de evento criado da classe flash.events.Event)?

R.3. Não.