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. Después de haber hablado de aquí como un componente se muestra en el escenario, y cada una de las etapas de su creación, hablo ahora, en continuación con la documentación de adobe, de la forma de proceder con la aplicación de un componente, junto con medidas para ejecutar en su aplicación.

Estes procedimentos não são todos obrigatórios, mas deve-se ter em conta as suas dependências. Estos procedimientos no son todas obligatorias, pero se debe tener en cuenta sus dependencias. Passo então a citar a fonte original, mas em português e com um exemplo não testado. Luego de citar la fuente original, pero en portugués y no sometidos a ensayo con un ejemplo.

Passos para criar um componente Pasos para crear 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. Cuando un componente se aplica una regla general, no sobre la (re-escribir), de determinados métodos de los componentes, nos ponemos en nuevas propiedades, disparar y crear eventos y realizar cualquier otro cambio / personalizaciones teniendo en cuenta el objetivo de nuestro componente en la solicitud.

Para implementar um componente, devemos seguir a seguinte ordem: Para llevar a cabo un componente, debemos seguir el siguiente orden:

1. 1. Se necessário, criamos skins para o nosso componente; Si es necesario, crear skins para nuestro componente;

2. 2. Criamos um ficheiro "Action Script Class file" tendo a estrutura: Hemos creado una "Acción de Clase de archivo de secuencias de comandos" que tengan la estructura:

1: package meuComponente 1: paquete meuComponente

2: { 2: (

3: //importar o que iremos usar no nosso componente. 3: / / importar lo que usamos en nuestro componente.

4: import mx.core.UIComponent; 4: importación mx.core.UIComponent;

5: import mx.controls.Button; 5: importación mx.controls.Button;

6: import mx.controls.TextArea; 6: importación mx.controls.TextArea;

7: import flash.events.Event; 7: importación flash.events.Event;

8: 8:

9: // definimos o nosso evento pessoal que usaremos em baixo 9: / / definir nuestro caso personal para su uso en baja

10: [Event(name= "change" , type= "flash.events.Event" )] 10: [Event (name = "cambio", 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. a) extender una clase base, todos los componentes se basan en la clase de IU, si desea crear un componente a partir de cero, más compleja, debemos ampliar esta clase, de lo contrario, si se quería aplicar o extender un componente simple como un botón, sólo extender este componente.

1: //extender a class que desejamos 1: / / extender la clase que queremos

2: public class Exemplo extends UIComponent { 2: public class Ejemplo (se extiende UIComponent

3: 3:

8: } 8:)

b) Especificamos as propriedades/variáveis que o utilizador pode definir usando as propriedades ou a tag MXML; b) especificar las características y variables que puede establecer utilizando las propiedades o la etiqueta MXML;

1: private var textObj:TextArea; 1: private var textObj: Textarea;

2: private var modeObj:Button; 2: private var modeObj: El botón;

3: private var _textLabel:String; 3: var privado _textLabel: String;

1: //usando skins de um swf. 1: / / skins utilizando un swf.

2: [Embed(source= "Modal2.swf" , symbol= "blueCircle" )] 2: [Incrustar (fuente = "Modal2.swf", símbolo = "blueCircle")]

3: public var modeUpSkinName:Class; 3: var modeUpSkinName público: Clase;

4: 4:

5: //importando/incluido uma imagem 5: / / importadores / incluido una imagen

6: [Embed(source= "img/img1.png" )] 7: public var imagem1:Class; 6: [Incrustar (fuente = "img/img1.png")] 7: var imagem1 público: Clase;

d) Implementar o construtor da class. d) Aplicar el constructor de la clase.

1: public function Exemplo() { 1: Ejemplo de función pública () (

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: Convocatoria para iniciar el componente, útil para añadirlos a mí un nuevo niño, por ejemplo, nuestros mandantes y Textarea Botón declarado en la parte superior:

1: override protected function createChildren(): void { 1: anular la función createChildren protegidas (): void (

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

3: 3:

4: // Criar e inicializar a nossa TextArea. 4: / / Crear e inicializar nuestra 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: / / puede agregar un evento:

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

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

12: } 12:)

13: 13:

14: // Criar e inicializar o nosso Botão 14: / / Crear e inicializar nuestro Botón

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

16: { modeObj = new Button(); 16: (= modeObj nuevo botón ();

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

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

19: } 19:)

20: } 20:)

Chamado pelo método invalidateProperties(); que actualiza quaisquer as propriedades do nosso componente: Convocada por invalidateProperties método (); a actualizar ninguna de las propiedades de nuestro componente:

1: override protected function commitProperties(): void { 1: anular la función commitProperties protegidas (): void (

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

3: 3:

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

5: //usando o label, se existir, da nossa variavel _textLabel 5: / / uso de la etiqueta, en su caso, de nuestra variable _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. Llamados a recalcular (a ser cambiado) el tamaño de nuestro componente como definir las posiciones de nuestros hijos.

1: override protected function measure(): void { 1: sobre protección de la función medida (): void (

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

3: 3:

4: //o tamanho do nosso UIComponent vai depender do tamanho dos 4: / / el tamaño de nuestro UIComponent dependerá del tamaño de

5: //childs, por isso temos que calcular o tamanho deles pra poder 5: / / Los niños, por lo que tenemos que calcular el tamaño de ellos para poder

6: //definir correctamente o layout do nosso componente. 6: / / definir correctamente el diseño de nuestro componente.

7: 7:

8: var buttonWidth:Number = modeObj.measuredWidth; 8: var buttonWidth: Número = modeObj.measuredWidth;

9: var buttonHeight:Number = modeObj.measuredHeight; 9: var buttonHeight: Número = modeObj.measuredHeight;

10: 10:

11: // O valor do comprimento, por defeito e minimo são igauis 11: / / El valor de longitud, por defecto y mínimo son igauis

12: // á measeuredWidth da nossa TextArea mais o measuredWidth 12: / / se measeuredWidth de nuestros más Textarea la measuredWidth

13: // do nosso botão 13: / / de nuestro botón

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 mismo cabe decir de la altura de nuestro componente que se

18: // igual à measuredHeight da nossa textArea measuredHeight do 18: / / igual al de nuestros measuredHeight de texto measuredHeight de

19: // nosso botão. 19: / / nuestro botón.

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

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

22: } 22:)

Podemos definir mais algumas propriedades do nosso layout: Podemos definir algunas propiedades de nuestro diseño:

1: protected override function layoutChrome(unscaledWidth:Number, unscaledHeight:Number): void { 1: protected override función layoutChrome (unscaledWidth: Número, unscaledHeight: Número): void (

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

3: 3:

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

5: } 5:)

Chamado pelo método invalidateDisplayList(); para redefinir a nossa DisplayList (caso sejam alterados os tamanhos do nosso componente) : Convocada por invalidateDisplayList método (); para redefinir nuestra DisplayList (si ha cambiado el tamaño de nuestro componente):

1: override protected function updateDisplayList(unscaledWidth:Number, 1: anular la función updateDisplayList protegidas (unscaledWidth: Número,

2: unscaledHeight:Number): void { 2: unscaledHeight: Número): void (

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

4: 4:

5: // subtraimos um pixel dos bordos e usamos uma 5: / / restar un píxel de los bordes y utilizar una

6: // margem de 3 pixeis à esquerda e direita 6: / / margen de 3 píxeles a la izquierda y derecha

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

8: var usableWidth:Number = unscaledWidth - 8; 8: var usableWidth: Número unscaledWidth = - 8;

9: 9:

10: // Fazemos o mesmo para o topo e fundo 10: / / Haga lo mismo para la parte superior e inferior

11: var usableHeight:Number = unscaledHeight - 8; 11: var usableHeight: Número unscaledHeight = - 8;

12: 12:

13: //tamanhos da textArea e botão 13: / / tamaños de texto y botón

14: //a textArea terá o tamanho máximo do nosso compoenente 14: / / texto para que el tamaño máximo de nuestro compoenente

15: var textWidth:Number = usableWidth; 15: var textwidth: Número = usableWidth;

16: //a altura, definimos a altura maxima, subtraindo apenas a 16: / / 's tiempo, establecer la altura máxima, restando sólo

17: // altura do nosso botão, para este fique logo em baixo da nossa 17: / / altura de nuestro botón, por lo que esta abajo es sólo de nuestra

18: // textArea. 18: / / de texto.

19: var textHeight:Number = usableHeight-modeObj.height; 19: var textHeight: Número = 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: / / botón tendrá toda nuestra longitud en nuestro componente

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

24: 24:

25: // Redefinirmos as posições dos nosso childs 25: / / redefinir las posiciones de nuestros Niños

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

27: //x=margem bordo=4, y=height espaço de 5px entre eles 27: / / x = margen = 4 bordo, y = altura del espacio entre ellos 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: / / Dibujar una línea alrededor de la componente negro de nuestra pra

31: //servir de bordo. 31: / / servir como un consejo.

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: añadir el resto de las propiedades de nuestro componente:

1: //funções para definir e retornar a variavel textLabel (getters/setters) 2: //função set/define 1: / / funciones para definir y volver a textLabel variable (getters / setters) 2: / / función septiembre / conjunto

3: public function set textLabel(texto:String): void { 3: función pública en septiembre de textLabel (texto: String): void (

4: //mudamos o texto 4: / / cambiar el texto

5: _textLabel = text; 5: _textLabel = texto;

6: //temos que forçar a actualização do texto no componente 6: / / tenemos que actualizar la fuerza de la componente de texto

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

8: } 8:)

9: 9:

10: //função para devolver o nosso texto do botão. 10: / / función para volver nuestro texto del botón.

11: public function get textLabel():String { 11: función pública obtener textLabel (): String (

12: return modeObj.text; 12: regreso modeObj.text;

13: } 13:)

14: 14:

15: // Função para lidar com o evento disparado por nós no child. 15: / / Función para manejar el caso provocado por nosotros en el niño.

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

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

18: } 18:)

Não esquecer no final de fechar o nosso componente, iciniado pelo package meuComponente { : No te olvides de cerrar al final de nuestro componente, iciniado por meuComponente (paquete:

1: } 1:)

3. 3. Salve o ficheiro ActionScript ou distribua como biblioteca .swc. Guarde el archivo como ActionScript o la distribución de la biblioteca. SWC.