Tutorial Action Script 3 – 011

Tutorial Action Script 3 – 011

Em continuação com o tutorial…

Esta parte já foi incluída no livro aqui disponibilizado para download…

Vejamos o seguinte código de um package devidamente comentado:

package teste
{
import flash.events.Event;
import mx.containers.Panel;
import mx.controls.Label;
import mx.events.ChildExistenceChangedEvent;
import mx.events.FlexEvent;
public class teste extends Panel
{
//colocamos a imagem como embed (incoporada no nosso applicativo e definida
//com a variavel imediatamente em baixo (iconImg) disponivel na forma de class.
[Embed("flexBtn.png")]
private var iconImg:Class;
/*Esta propriedade estará disponivel como elitura/escrita por exemplo: 
meuPainel.nomePessoal */
[Bindable]
private var _nomePessoal:String;
//Disponivel como dataCriacao em modo de leitura apenas; meuPainel.dataCriacao
private var _dataCriacao:String;
//variavel temporaria usada para saber as horas/minutos/segundos usados em baixo
private var dados:Date = new Date;
public function teste()
{
//definimos o painel
this.width=270;
this.height=270;
this.x=0;
this.y=0;
//adicionamos o eventListner
this.addEventListener(FlexEvent.CREATION_COMPLETE, criado,false,0,true);
}
private function criado(evt:FlexEvent):void {
/*definimos a hora exacta da criação do painel, com recurso ao date, neste 
caso d variavel dados */
_dataCriacao=dados.getHours()+":"+dados.getMinutes()+":"+dados.getSeconds();
//adicionamos o icon ao painel
this.titleIcon=iconImg;
//verificamos se o nomePessoal foi definido
if(!_nomePessoal) {
/*se o nome nao tiver sido dados, damos um nome temporario, no caso será dados como:
Teste Painel "numero" onde o numero será um valor aleatorio entre 0 e 15, este
numero é conseguido através do Math.floor(Math.ramdom()*15); */
_nomePessoal="Teste Painel "+Math.floor(Math.random()*15);
}
/*vamos usar um label que indica o nomePessoal e a hora da ciração do painel, este
Label desaparecerá assim que forem adicionados filhos ao painel, para isso usamos 
um evenListner*/
var lbl:Label = new Label;
lbl.name="status";
lbl.x=0;
lbl.y=0;
//definimos o texto
lbl.text=_nomePessoal + " criado em: "+dataCriacao;
//adicionamos como child ao painel
this.addChild(lbl);
//event listner para sabermos quando foi adicionado um filho ao painel para
//podermos remover o label colocado em cima.
this.addEventListener(ChildExistenceChangedEvent.CHILD_ADD, remove, false, 0, true);
//despacha o evento terminado personalizado
this.dispatchEvent(new Event("btnsProntos"));
//remove o eventListner terminao, visto que apenas será disparado uma vez.
this.removeEventListener(FlexEvent.CREATION_COMPLETE, criado);
}
private function remove(evt:ChildExistenceChangedEvent):void {
//função para remover o label com o nome e hora de ciração, isto acontece quando é
//adicionado um filho ao painel.
//removemos o child 0 (é o child lbl usado em cima, é o numero zero porque nada 
//mais foi adicionado ao painel)
this.removeChildAt(0);
//removemos o event listner caso contrario se forem adicionados mais que um filho
//esta função vai remover sempre o ultimo inserido
this.removeEventListener(ChildExistenceChangedEvent.CHILD_ADD, remove);
}
/*como quero apenas que a propriedade de dataCriacao seja apenas de leitura, fazemos
apenas a função para ler esse valor, com o get, chamado getter */
public function get dataCriacao():String {
return _dataCriacao;
}
/*como quero que a propriedade _nomePessoal seja quer de leitura, quer de escrita,
tenho que dizer à nossa classe que pode disponibilizar ou receber conteudo de/nessa
variavel, fazendo isso com as funções get e set **/
public function get nomePessoal():String {
return _nomePessoal;
}
//Recebe uma string como nome
public function set nomePessoal(nome:String):void {
_nomePessoal=nome;
}
}
}

No exemplo em cima usei já uma class mais complexa, mas como está devidamente comentada será bem facil de perceber. Neste exemplo podemos entender o seguinte; É usado um Painel como base, (extends) e as suas propriedades…depois disso é automaticamente adicionado um titleIcon exemplificando atributos herdados do pai (Panel).

O que acrescentei depois foram alguns novos atributos ao nosso Painel Pessoal, como o nomePessoal e o dataCriacao, onde ambos podem ser acedidos para ler os seus valores:

trace(meuPainel.nomePessoal);
trace(meuPainel.dataCriacao);

e o nomePessoal pode ser definido:

meuPainel.nomePessoal="nome pessoal do meu painel";

Esta leitura/escrita destes valores só é possivel devido aos getter’s e setter’s que estão disponiveis nas nossas class’s, onde o get é usado em:

trace(meuPainel.nomePessoal);

e o set:

meuPainel.nomePessoal=”nome pessoal do meu painel”;

Neste exemplo em cima também vemos o uso de algumas funções matematicas (floor e ramdom) que podem ser acedidas pela class Math. De seguida adicionamos um label ao painel assim que ele é criado com o nomePessoal e a hora da sua ciração, e ao juntar um eventListener esse label será eliminado assim que seja adicionado um child ao painel. Não esquecendo também que removemos os eventListeners para não causar conflito.

Para testarem esta class basta fazerem:

import mx.controls.Button;

import teste.teste;

import mx.controls.Alert;

private var myPanel:teste = new teste;

private function init():void {

myPanel.addEventListener(“btnsProntos”, terminado);

//myPanel.nomePessoal=”Painel GRUN”; podem ou não definir o nome pessoal do nosso painel.

addChild(myPanel);

}

private function terminado(evt:Event):void {

Alert.show(“Painel e icon completos.”)

}

private function addChildMe():void {

var temp:Button = new Button;

myPanel.addChild(temp);

}

Aqui se chamarem a função init, o nosso painel é criado no stage, com o nome e hora da criação… se chamarem a função addChildMe será adicionado um botão ao nosso painel e o label que lá existia será removido automaticamente. E pronto, finalmente têm a vossa class criada que é nada mais nada menos um painel personalizado, e sem darem muito por isso já usaram métodos e parâmetros hereditários, bem como a composição que anteriormente foi explicada..

Continua…

Abraço.

ccommons


3 comments

add yours
  • danilo July 4, 2008

    cara muito obriga valeu mesmo esses tutorial esta me ajudando muito…

    :-)

  • Setzer Wolf November 24, 2008

    Gostei muito desta seqüência de tutoriais, me ajudou bastante a dar o pontapé inicial para migrar do cs2 para o cs3. Obrigado

  • Mário Santos November 25, 2008

    Ainda bem, entretanto já têm a versão 2 do e-book que é a continuação destes posts, veja:
    http://msdevstudio.com/blog/?p=654

    Abraço.

Leave a Comment

Post