Definición de estilos

Los estilos de un componente normalmente especifican valores para sus aspectos, iconos, formato de texto y relleno cuando Flash dibuja el componente en sus diversos estados. Por ejemplo, Flash dibuja un componente Button con un aspecto distinto para mostrar su estado presionado, que se produce al hacer clic con el ratón sobre él, que para mostrar su estado normal o cuando no está presionado. También utiliza un aspecto distinto cuando está en estado desactivado, lo que se produce al establecer la propiedad enabled en false.

Se pueden definir estilos para los componentes en los niveles de documento, clase e instancia. Además, algunas propiedades de estilo pueden heredarse de un componente principal. Por ejemplo, el componente List hereda los estilos de ScrollBar cuando hereda de BaseScrollPane.

Es posible definir estilos para personalizar un componente de las siguientes formas:

  • Definir los estilos en una instancia de componente. Se pueden cambiar las propiedades de texto y de color de una única instancia de componente. Este recurso es eficaz en determinadas situaciones, aunque puede tardar mucho tiempo si necesita definir propiedades individuales en todos los componentes de un documento.

  • Definir los estilos de todos los componentes de un tipo de documento determinado. Si se desea aplicar un aspecto uniforme a todos los componentes de un determinado tipo, por ejemplo, todos los componentes CheckBox o Button de un documento, se pueden definir estilos en el nivel de componente.

    Los componentes añadidos a un contenedor heredan los valores de las propiedades de estilo establecidas para el contenedor.

    Flash no muestra los cambios realizados en las propiedades de estilo al visualizar componentes en el escenario mediante la función Previsualización dinámica.

Aspectos básicos de la configuración de estilos

A continuación se destacan algunos puntos clave de la utilización de estilos:

Herencia
Un componente secundario se ha diseñado para heredar un estilo del componente principal. No es posible definir la herencia de estilos en ActionScript.

Precedencia
Si un estilo de un componente se define de varias formas, Flash utiliza el primer estilo que encuentra según su orden de precedencia. Flash busca estilos en el orden siguiente hasta que encuentra un valor:

  1. Busca una propiedad de estilo en la instancia de componente.

  2. Si el estilo es uno de los estilos heredados, Flash busca en la jerarquía de elementos principales un valor heredado.

  3. Busca el estilo en el componente.

  4. Busca una configuración global en StyleManager.

  5. Si la propiedad aún no está definida, tiene el valor undefined .

Acceso a los estilos predeterminados de un componente

Para acceder a los estilos predeterminados de un componente, se puede utilizar el método estático getDefaultStyles() en la clase de componente. Por ejemplo, el código siguiente obtiene los estilos predeterminados del componente ComboBox y muestra los valores predeterminados de las propiedades buttonWidth y downArrowDownSkin: 

import fl.controls.ComboBox; 
var styleObj:Object = ComboBox.getStyleDefinition(); 
trace(styleObj.buttonWidth); // 24 
trace(styleObj.downArrowDownSkin); // ScrollArrowDown_downSkin

Definición y obtención de los estilos en una instancia de un componente

Una instancia de un componente de interfaz de usuario puede llamar a los métodos setStyle() y getStyle() directamente para definir u obtener un estilo. La sintaxis siguiente define un estilo y un valor para una instancia de componente: 

instanceName.setStyle("styleName", value);

Esta sintaxis obtiene un estilo de una instancia de componente: 

var a_style:Object = new Object(); 
a_style = instanceName.getStyle("styleName");

Debe tenerse en cuenta que el método getStyle() devuelve el tipo Object porque puede devolver varios estilos que tengan distintos tipos de datos. Por ejemplo, el código siguiente define el estilo de fuente de una instancia de TextArea ( aTa ) y, a continuación, lo obtiene a través del método getStyle() . En el ejemplo, el valor devuelto se convierte en un objeto TextFormat para asignarlo a una variable TextFormat. Si no se realizara la conversión, el compilador emitiría un error por intentar forzar una variable Object en una variable TextFormat. 

import flash.text.TextFormat; 
 
var tf:TextFormat = new TextFormat(); 
tf.font = "Georgia"; 
aTa.setStyle("textFormat",tf); 
aTa.text = "Hello World!"; 
var aStyle:TextFormat = aTa.getStyle("textFormat") as TextFormat; 
trace(aStyle.font);

Uso de TextFormat para definir las propiedades de texto

El objeto TextFormat se utiliza para aplicar formato al texto de una instancia de componente. El objeto TextFormat tiene propiedades que permiten especificar características de texto como bold , bullet , color , font , italic y size , entre otras. Se pueden definir estas propiedades en el objeto TextFormat y luego llamar al método setStyle() para aplicarlas a una instancia de componente. Por ejemplo, el código siguiente define las propiedades font , size y bold de un objeto TextFormat y las aplica a una instancia de Button: 

/* Create a new TextFormat object to set text formatting properties. */ 
var tf:TextFormat = new TextFormat(); 
tf.font = "Arial"; 
tf.size = 16; 
tf.bold = true; 
a_button.setStyle("textFormat", tf);

En la siguiente ilustración se muestra el efecto de esta configuración en un botón con una etiqueta Submit (Enviar):

Botón con nuevo estilo textFormat aplicado a su etiqueta

Las propiedades de estilo establecidas en una instancia de componente mediante setStyle() tienen la prioridad más alta y reemplazan las demás configuraciones de estilo. Sin embargo, cuanto más propiedades se definan mediante setStyle() en una sola instancia de componente, más lenta será la representación del componente en tiempo de ejecución.

Definición de un estilo en todas las instancias de un componente

Para definir un estilo en todas las instancias de una clase de componente, se debe utilizar el método estático setComponentStyle() de la clase StyleManager. Por ejemplo, para establecer que el color del texto sea rojo en todos los botones, primero arrastre un componente Button al escenario y luego añada el siguiente código ActionScript al panel Acciones del fotograma 1 de la línea de tiempo: 

import fl.managers.StyleManager; 
import fl.controls.Button; 
 
var tf:TextFormat = new TextFormat(); 
tf.color = 0xFF0000; 
StyleManager.setComponentStyle(Button, "textFormat", tf);

Todos los componentes Button que añada posteriormente al escenario tendrán etiquetas rojas.

Definición de un estilo en todos los componentes

Para definir un estilo en todos los componentes, se utiliza el método estático setStyle() de la clase StyleManager.

  1. Arrastre un componente List al escenario y asígnele el nombre de instancia aList .

  2. Arrastre un componente Button al escenario y asígnele el nombre de instancia aButton .

  3. Presione F9 o seleccione Acciones en el menú Ventana para abrir el panel Acciones, si aún no está abierto, e introduzca el siguiente código en el fotograma 1 de la línea de tiempo para establecer que el color del texto sea rojo en todos los componentes: 

    import fl.managers.StyleManager; 
 
var tf:TextFormat = new TextFormat(); 
tf.color = 0xFF0000; 
StyleManager.setStyle("textFormat", tf);

  4. Añada el siguiente código al panel Acciones para llenar de texto el componente List. 

    aList.addItem({label:"1956 Chevy (Cherry Red)", data:35000}); 
aList.addItem({label:"1966 Mustang (Classic)", data:27000}); 
aList.addItem({label:"1976 Volvo (Xcllnt Cond)", data:17000}); 
aList.allowMultipleSelection = true;

  5. Seleccione Control > Probar película o presione Ctrl+Intro para compilar el código y probar el contenido. El texto de la etiqueta del botón y de la lista debería ser de color rojo.