Flex - Criação de componentes em AS3;

www.msdevstudio.com

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;

Podemos desenhar skins com o photoshop/ilustrador ou flash, e usa-las nos nossos

componentes, as skins podem ser feitas e atribuidas em actionScript com a propriedade
setStyle() da grande parte dos componentes ''gráficos''.

2. Criar 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")]

2.1. Extender 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. Vamos tomar o exemplo mais complicado, extendendo assim o UIComponent.
1: //extender a class que desejamos
2: public class Exemplo extends UIComponent {
3:
8: }

2.2. Especificar as propriedades/variáveis que o utilizador pode definir

Estas variaveis podem ser definidas pelo programador usando as propriedades ou a tag MXML;

1: private var textObj:TextArea;

2: private var modeObj:Button;
3: private var _textLabel:String;

2.3. Incluir (embed) qualquer gráfico ou skin.

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;
7: //no nosso exemplo nao serão utilizadas, mas fica a referencia.

2.4. Implementar o construtor da class.

1: public function Exemplo() {

2: super();
3: }

2.5. Implementar o método UIComponent.createChildren().

Chamado na inicialização do componente, muito 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: }

2.6. Implementar o método UIComponent.commitProperties().

Chamado pelo método invalidateProperties(); que actualiza quaisquer 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: }

2.7. Implementar o método UIComponent.measure().

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: }
2.8. Implementar o método UIComponent.layoutChrome().
Podemos definir nesta implementação mais algumas propriedades do nosso layout:

1:protected override function layoutChrome(unscaledWidth:Number,

unscaledHeight:Number):void {
2: super.layoutChrome(unscaledWidth, unscaledHeight);
3: //vamos desactivar a nossa textArea.
4: this.textObj.disabled = true;
5: }

2.9. Implementar o método UIComponent.updateDisplayList().

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: }
2.10. Adicionar propriedades, métodos, styles, eventos e metadata.

Adicionamos o resto das propriedades e funções 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: }

2.11. Não esquecer no final de fechar o nosso componente

Como o componente foi iciniado pelo package meuComponente { , teremos que da-lo como
terminado:

1: }

3. Salvem o ficheiro ActionScript ou distribuam como biblioteca .swc.

Para distribuirem o vosso ''componente'' como swc, estes passos citados em cima, devem ser
feitos num .as dentro de um ''Flex Libray Project'', que ao ser guardado é compilado
imediatamente o vosso .swc.

3.1. Uso do componente em Action Script 3 / MXML

Em action script para usar o componente, podem fauzer da seguinte forma:

1: import meuComponente.Exemplo;
2: //Declarando o componente
3: var tempComp:Exemplo = new Exemplo();
4: //Adicionando ao um panel, por exemplo:
5: meuPainel.addChild(tempComp);
6: //definindo o lanel do nosso botão no componente:
7: tempComp.textLabel="BOTAO";
Caso seja distribuído num swc, o "Exemplo" estará disponível tanto no action script (import
meuComponente.Exemplo, como na janela "Components" em "Custom" com o nome de
Exemplo.

Este exemplo, não foi testado e devem ser tomados em conta alguns erros que possam
acontecer a testar, mas em principio funcionará bem. Este exemplo é dos mais completos, já
que implementa directamente um UIComponent, ou seja, cria um componente de raiz.

Este exemplo e artigo foi baseado na documentação disponíveis aqui, aqui e aqui (EN)

Espero que seja verdadeiramente util!

Por Mário Santos – www.msdevstudio.com - 06/05/08