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. Dopo aver parlato di qui come un componente è mostrato nella fase e tutte le fasi della sua creazione, parlo ora, in continuazione con la documentazione di adobe, di come procedere con l'attuazione di un componente, insieme con i passi eseguire nella sua attuazione.

Estes procedimentos não são todos obrigatórios, mas deve-se ter em conta as suas dependências. Queste procedure non sono tutte obbligatorie, ma si deve tenere conto delle loro dipendenze. Passo então a citar a fonte original, mas em português e com um exemplo não testado. Ho poi citare la fonte originale, ma in portoghese e un esempio testate.

Passos para criar um componente Procedura per creare un 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. Quando componente implementa una regola generale, fare ignorare la (ri-scritto) da alcuni mezzi di componente, abbiamo definito nuove proprietà, disparamos / criaamos eventi ed eseguire altre modifiche / personalizzazioni tenendo conto dell'obiettivo della nostra componente nella domanda.

Para implementar um componente, devemos seguir a seguinte ordem: Al fine di attuare un componente, dobbiamo seguire il seguente ordine:

1. 1. Se necessário, criamos skins para o nosso componente; Se necessario, creare pelli per la nostra componente;

2. 2. Criamos um ficheiro "Action Script Class file" tendo a estrutura: Abbiamo creato una "class action" file di script "che hanno la struttura:

1: package meuComponente 1: pacchetto meuComponente

2: { 2: (

3: //importar o que iremos usar no nosso componente. 3: / / importazione ciò che usiamo nella nostra componente.

4: import mx.core.UIComponent; 4: Importazione mx.core.UIComponent;

5: import mx.controls.Button; 5: Import mx.controls.Button;

6: import mx.controls.TextArea; 6: Import mx.controls.TextArea;

7: import flash.events.Event; 7: Import flash.events.Event;

8: 8:

9: // definimos o nosso evento pessoal que usaremos em baixo 9: / / definire la nostra manifestazione che l'uso personale al di sotto

10: [Event(name= "change" , type= "flash.events.Event" )] 10: [evento (nome = "cambiamento", tipo = "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. a) Extendemos una delle classi di base, tutti i componenti si basano su UI classe, se vogliamo creare un componente da zero, più complessa, dobbiamo estendere questa classe, se non vogliono attuare Altrimenti / estendere un componente come un semplice pulsante, solo extendemos tale componente.

1: //extender a class que desejamos 1: / / vogliamo estendere la classe

2: public class Exemplo extends UIComponent { 2: Esempio di classe pubblica (si estende UIComponent

3: 3:

8: } 8:)

b) Especificamos as propriedades/variáveis que o utilizador pode definir usando as propriedades ou a tag MXML; b) specificare le proprietà / variabili che è possibile impostare utilizzando la proprietà o l'etichetta MXML;

1: private var textObj:TextArea; 1: var textObj privato: TextArea;

2: private var modeObj:Button; 2: var modeObj privato: Button;

3: private var _textLabel:String; 3: var _textLabel privato: String;

1: //usando skins de um swf. 1: / / pelli utilizzando un swf.

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

3: public var modeUpSkinName:Class; 3: var modeUpSkinName pubblico: Classe;

4: 4:

5: //importando/incluido uma imagem 5: / / importatore / inclusa un'immagine

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

d) Implementar o construtor da class. d) Attuare il costruttore di classe.

1: public function Exemplo() { 1: Esempio di funzione pubblica () (

2: super(); 2: super ();

3: } 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: Chiamata nel bagagliaio del componente, utile per aggiungere un nuovo bambino-zione, ad esempio, i nostri componenti TextArea e Button dichiarato su:

1: override protected function createChildren(): void { 1: Sovrapporre funzione createChildren protette (): void (

2: super.createChildren(); 2: super.createChildren ();

3: 3:

4: // Criar e inicializar a nossa TextArea. 4: / / Crea e iniziare la nostra TextArea.

5: if (!textObj) 5: if (! TextObj)

6: { 6: (

7: textObj = new TextArea(); 7: textObj = new TextArea ();

8: textObj.explicitWidth = 80; 8: textObj.explicitWidth = 80;

9: //podemos adicionar um evento: 9: / / può aggiungere un evento:

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

11: addChild(textObj); 11: addChild (textObj);

12: } 12:)

13: 13:

14: // Criar e inicializar o nosso Botão 14: / / Crea e iniziare il nostro pulsante

15: if (!modeObj) 15: if (! ModeObj)

16: { modeObj = new Button(); 16: (modeObj = new Button ();

17: modeObj.label = "Exemplo de Btn" ; 17: modeObj.label = "Esempio di BTN";

18: addChild(modeObj); 18: addChild (modeObj);

19: } 19:)

20: } 20:)

Chamado pelo método invalidateProperties(); que actualiza quaisquer as propriedades do nosso componente: Chiamato con il metodo invalidateProperties (), che aggiorna tutte le proprietà del nostro componente:

1: override protected function commitProperties(): void { 1: Sovrapporre funzione commitProperties protette (): void (

2: super.commitProperties(); 2: super.commitProperties ();

3: 3:

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

5: //usando o label, se existir, da nossa variavel _textLabel 5: / / utilizzando l'etichetta, se del caso, della nostra variabile _textLabel

6: modObj.label=_textLabel; 6: modObj.label = _textLabel;

7: invalidateDisplayList(); 7: invalidateDisplayList ();

8: } 8:)

9: } 9:)

Chamado para recalcular (ao ser alterado) o tamanho do nosso componente, bem como definirmos as posições dos nosso childs. Chiamati a ricalcolare (a essere modificate) le dimensioni dei componenti, e di definire le posizioni dei nostri bambini.

1: override protected function measure(): void { 1: la priorità su misura funzione protette (): void (

2: super.measure(); 2: super.measure ();

3: 3:

4: //o tamanho do nosso UIComponent vai depender do tamanho dos 4: / / le dimensioni della nostra UIComponent vai dipende dalle dimensioni del

5: //childs, por isso temos que calcular o tamanho deles pra poder 5: / / bambini, quindi dobbiamo calcolare le dimensioni del loro potere ottenere

6: //definir correctamente o layout do nosso componente. 6: / / correttamente definire il layout del nostro componente.

7: 7:

8: var buttonWidth:Number = modeObj.measuredWidth; 8: var buttonWidth: Numero = modeObj.measuredWidth;

9: var buttonHeight:Number = modeObj.measuredHeight; 9: var buttonHeight: Numero = modeObj.measuredHeight;

10: 10:

11: // O valor do comprimento, por defeito e minimo são igauis 11: / / Il valore di lunghezza, di default e minima sono igauis

12: // á measeuredWidth da nossa TextArea mais o measuredWidth 12: / / measeuredWidth volontà dei nostri più TextArea il measuredWidth

13: // do nosso botão 13: / / del nostro pulsante

14: measuredWidth = measuredMinWidth = 14: measuredWidth = = measuredMinWidth

15: textObj.measuredWidth buttonWidth; 15: textObj.measuredWidth buttonWidth;

16: 16:

17: // O mesmo se passa com a altura do nosso componente que será 17: / / Lo stesso vale per l'altezza della nostra componente che verrà

18: // igual à measuredHeight da nossa textArea measuredHeight do 18: / / pari a quello del nostro measuredHeight textarea di measuredHeight

19: // nosso botão. 19: / / il nostro pulsante.

20: measuredHeight = measuredMinHeight = 20: measuredHeight = = measuredMinHeight

21: modeObj.measuredHeight, buttonHeight; 21: modeObj.measuredHeight, buttonHeight;

22: } 22:)

Podemos definir mais algumas propriedades do nosso layout: Si possono definire alcune proprietà di più della nostra struttura:

1: protected override function layoutChrome(unscaledWidth:Number, unscaledHeight:Number): void { 1: protette ignorare funzione layoutChrome (unscaledWidth: Numero, unscaledHeight: Number): void (

2: super.layoutChrome(unscaledWidth, unscaledHeight); 2: super.layoutChrome (unscaledWidth, unscaledHeight);

3: 3:

4: this .textObj.disabled = true ; 4: questo. TextObj.disabled = true;

5: } 5:)

Chamado pelo método invalidateDisplayList(); para redefinir a nossa DisplayList (caso sejam alterados os tamanhos do nosso componente) : Chiamato con il metodo invalidateDisplayList (); di ridefinire la nostra DisplayList (se è cambiata la dimensione della nostra componente):

1: override protected function updateDisplayList(unscaledWidth:Number, 1: Sovrapporre protette funzione updateDisplayList (unscaledWidth: Numero,

2: unscaledHeight:Number): void { 2: unscaledHeight: Number): void (

3: super.updateDisplayList(unscaledWidth, unscaledHeight); 3: super.updateDisplayList (unscaledWidth, unscaledHeight);

4: 4:

5: // subtraimos um pixel dos bordos e usamos uma 5: / / subtraimos un pixel dai bordi e utilizzare un

6: // margem de 3 pixeis à esquerda e direita 6: / / margine di 3 pixel a destra ea sinistra

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

8: var usableWidth:Number = unscaledWidth - 8; 8: var usableWidth: Numero = unscaledWidth - 8;

9: 9:

10: // Fazemos o mesmo para o topo e fundo 10: / / Noi lo facciamo per il superiore e inferiore

11: var usableHeight:Number = unscaledHeight - 8; 11: var usableHeight: Numero = unscaledHeight - 8;

12: 12:

13: //tamanhos da textArea e botão 13: / / dimensioni del pulsante e textarea

14: //a textArea terá o tamanho máximo do nosso compoenente 14: / / textarea di avere la dimensione massima del nostro compoenente

15: var textWidth:Number = usableWidth; 15: var textWidth: Numero = usableWidth;

16: //a altura, definimos a altura maxima, subtraindo apenas a 16: / / 's tempo, abbiamo fissato l'altezza massima, solo sottraendo

17: // altura do nosso botão, para este fique logo em baixo da nossa 17: / / altezza del nostro pulsante, quindi questa è appena al di sotto delle nostre

18: // textArea. 18: / / textarea.

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

20: textObj.setActualSize(textWidth, textHeight); 20: textObj.setActualSize (textWidth, textHeight);

21: 21:

22: //o nosso botão terá todo o comprimento no nosso componente 22: / / pulsante avrà tutta la nostra lunghezza nella nostra componente

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

24: 24:

25: // Redefinirmos as posições dos nosso childs 25: / / Redefinirmos le posizioni dei nostri bambini

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

27: //x=margem bordo=4, y=height espaço de 5px entre eles 27: / / x = margine di bordo = 4, y = altezza di spazio tra loro 5px

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

29: 29:

30: // Desenhamos uma linha à volta do nosso componente a negro pra 30: / / Desenhamos una linea nera intorno al nostro componente pra

31: //servir de bordo. 31: / / servire come un consiglio di amministrazione.

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

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

34: } 34:)

adicionamos o resto das propriedades do nosso componente: aggiungere il resto delle proprietà del nostro componente:

1: //funções para definir e retornar a variavel textLabel (getters/setters) 2: //função set/define 1: / / funzioni di definire e di ritorno alla variabile textLabel (Getters / set) 2: / / funzione nel mese di settembre / set

3: public function set textLabel(texto:String): void { 3: set di funzioni pubbliche textLabel (testo: String): void (

4: //mudamos o texto 4: / / modificare il testo

5: _textLabel = text; 5: _textLabel = testo;

6: //temos que forçar a actualização do texto no componente 6: / / dobbiamo vigore aggiornare il componente di testo in

7: invalidateProperties(); 7: invalidateProperties ();

8: } 8:)

9: 9:

10: //função para devolver o nosso texto do botão. 10: / / funzione per restituire il nostro testo del pulsante.

11: public function get textLabel():String { 11: funzione pubblica ottenere textLabel (): String (

12: return modeObj.text; 12: Torna modeObj.text;

13: } 13:)

14: 14:

15: // Função para lidar com o evento disparado por nós no child. 15: / / personale per gestire l'evento innescato da noi nel bambino.

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

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

18: } 18:)

Não esquecer no final de fechar o nosso componente, iciniado pelo package meuComponente { : Non dimenticare di chiudere alla fine della nostra componente, iciniado di meuComponente (pacchetto:

1: } 1:)

3. 3. Salve o ficheiro ActionScript ou distribua como biblioteca .swc. Salvare il file come ActionScript o distribuire biblioteca. SWC.