Depois de ter aqui falado de como um componente é apresentado no stage, bem como todos os passos da sua criação, falo agora, em continuação com a documentação da adobe, de como se deve proceder à implementação de um componente, bem com os passos a executar na sua implementação.

Estes procedimentos não são todos obrigatórios, mas deve-se ter em conta as suas dependências. Passo então a citar a fonte original, mas em português e com um exemplo não testado.

Passos para criar um componente

Quando se implementa um componente, regra geral, fazemos o override (re-escrita) de determinado métodos do componente, definimos novas propriedades, disparamos/criaamos eventos e efectuamos quaisquer outras alterações/personalizações tendo em conta o objectivo do nosso componente na aplicação.

Para implementar um componente, devemos seguir a seguinte ordem:

1. Se necessário, criamos skins para o nosso componente;

2. Criamos um ficheiro "Action Script Class file" tendo a estrutura:

1: package meuComponente

2: {

3: //importar o que iremos usar no nosso componente.

4:import mx.core.UIComponent;

5:import mx.controls.Button;

6: import mx.controls.TextArea;

7: import flash.events.Event;

8: 

9: // definimos o nosso evento pessoal que usaremos em baixo

10: [Event(name="change", type="flash.events.Event")]

a) Extendemos uma das classes base, todos os componentes são baseados na class UI, se desejarmos criar um componente de raiz, mais complexo, devemos extender esta class, caso contrario se só desejarmos implementar/extender um componente simples como um botão, extendemos apenas esse componente.

1: //extender a class que desejamos

2: public class Exemplo extends UIComponent {

3: 

8: }

b)  Especificamos as propriedades/variáveis que o utilizador pode definir usando as propriedades ou a tag MXML;

1: private var textObj:TextArea;

2: private var modeObj:Button;   

3: private var _textLabel:String;

1: //usando skins de um swf.

2: [Embed(source="Modal2.swf", symbol="blueCircle")]

3: public var modeUpSkinName:Class;

4: 

5: //importando/incluido uma imagem

6: [Embed(source="img/img1.png")]7: public var imagem1:Class;

d) Implementar o construtor da class.

1: public function Exemplo() {

2: super();

3: }

Chamada na inicialização do componente, util para adicionar-mos um novo child, por exemplo os nossos componentes TextArea e Button declarados em cima:

1: override protected function createChildren():void {

2: super.createChildren();

3: 

4: // Criar e inicializar a nossa TextArea.

5: if (!textObj)

6: {

7: textObj = new TextArea();

8: textObj.explicitWidth = 80;

9: //podemos adicionar um evento:

10: textObj.addEventListener("change", handleChangeEvent);

11: addChild(textObj);

12: }

13: 

14: // Criar e inicializar o nosso Botão

15: if (!modeObj)

16: { modeObj = new Button();

17: modeObj.label = "Exemplo de Btn";

18: addChild(modeObj);

19: }

20: }

Chamado pelo método invalidateProperties(); que actualiza quaisquer as propriedades do nosso componente:

1: override protected function commitProperties():void {

2: super.commitProperties();

3:

4: if (modObj && _textLabel.lenght>0) {

5: //usando o label, se existir, da nossa variavel _textLabel

6: modObj.label=_textLabel;

7: invalidateDisplayList();

8: }

9: }

Chamado para recalcular (ao ser alterado) o tamanho do nosso componente, bem como definirmos as posições dos nosso childs.

1: override protected function measure():void {

2: super.measure();

3: 

4: //o tamanho do nosso UIComponent vai depender do tamanho dos

5: //childs, por isso temos que calcular o tamanho deles pra poder

6: //definir correctamente o layout do nosso componente.

7: 

8: var buttonWidth:Number = modeObj.measuredWidth;

9: var buttonHeight:Number = modeObj.measuredHeight;

10: 

11: // O valor do comprimento, por defeito e minimo são igauis

12: // á measeuredWidth da nossa TextArea mais o measuredWidth

13: // do nosso botão

14: measuredWidth = measuredMinWidth =

15: textObj.measuredWidth + buttonWidth;

16:

17: // O mesmo se passa com a altura do nosso componente que será

18: // igual à measuredHeight da nossa textArea + measuredHeight do

19: // nosso botão.

20: measuredHeight = measuredMinHeight =

21: modeObj.measuredHeight, buttonHeight;

22: }

Podemos definir mais algumas propriedades do nosso layout:

1:protected override function layoutChrome(unscaledWidth:Number, unscaledHeight:Number):void {

2: super.layoutChrome(unscaledWidth, unscaledHeight);

3:

4: this.textObj.disabled = true;

5: }

Chamado pelo método invalidateDisplayList(); para redefinir a nossa DisplayList (caso sejam alterados os tamanhos do nosso componente) :

1: override protected function updateDisplayList(unscaledWidth:Number,

2: unscaledHeight:Number):void {

3: super.updateDisplayList(unscaledWidth, unscaledHeight);

4: 

5: // subtraimos um pixel dos bordos e usamos uma

6: // margem de 3 pixeis à esquerda e direita

7: // 1+1+3+3 = 8;

8: var usableWidth:Number = unscaledWidth - 8;

9: 

10: // Fazemos o mesmo para o topo e fundo

11: var usableHeight:Number = unscaledHeight - 8;

12: 

13: //tamanhos da textArea e botão

14: //a textArea terá o tamanho máximo do nosso compoenente

15: var textWidth:Number = usableWidth;

16: //a altura, definimos a altura maxima, subtraindo apenas a

17: // altura do nosso botão, para este fique logo em baixo da nossa

18: // textArea.

19: var textHeight:Number = usableHeight-modeObj.height;

20: textObj.setActualSize(textWidth, textHeight);

21:

22: //o nosso botão terá todo o comprimento no nosso componente

23: modeObj.setActualSize(usableWidth, modeObj.height);

24: 

25: // Redefinirmos as posições dos nosso childs

26: textObj.move(4,4); //x=y=(margem=3 + bordo=1)= 4

27: //x=margem+bordo=4, y=height+ espaço de 5px entre eles

28: modeObj.move(4,textObj.height+5);

29:

30: // Desenhamos uma linha à volta do nosso componente a negro pra

31: //servir de bordo.

32: graphics.lineStyle(1, 0×000000, 1.0);

33: graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);

34: }

adicionamos o resto das propriedades do nosso componente:

1: //funções para definir e retornar a variavel textLabel (getters/setters)2: //função set/define

3: public function set textLabel(texto:String):void {

4: //mudamos o texto

5: _textLabel = text;

6: //temos que forçar a actualização do texto no componente

7: invalidateProperties();

8: }

9: 

10: //função para devolver o nosso texto do botão.

11: public function get textLabel():String {

12: return modeObj.text;

13: }

14: 

15: // Função para lidar com o evento disparado por nós no child.

16: private function handleChangeEvent(eventObj:Event):void {

17: dispatchEvent(new Event("change"));

18: }

Não esquecer no final de fechar o nosso componente, iciniado pelo package meuComponente { :

1: }

3. Salve o ficheiro ActionScript ou distribua como biblioteca .swc.