Formato de texto

La clase TextFormat se puede utilizar para establecer varias propiedades de visualización de texto distintas y aplicarlas a todo el contenido de un objeto TextField o a un rango de texto.

En el ejemplo siguiente se aplica un objeto TextFormat a un objeto TextField completo y se aplica un segundo objeto TextFormat a un rango de texto dentro de ese objeto TextField:

var tf:TextField = new TextField(); 
tf.text = "Hello Hello"; 
 
var format1:TextFormat = new TextFormat(); 
format1.color = 0xFF0000; 
 
var format2:TextFormat = new TextFormat(); 
format2.font = "Courier"; 
 
tf.setTextFormat(format1); 
var startRange:uint = 6; 
tf.setTextFormat(format2, startRange); 
 
addChild(tf);

El método TextField.setTextFormat() solo afecta al texto que ya se ha visualizado en el campo de texto. Si cambia el contenido del objeto TextField, la aplicación tendrá que volver a llamar al método TextField.setTextFormat() para aplicar de nuevo el formato. También se puede establecer la propiedad defaultTextFormat de TextField para especificar el formato que se debe utilizar para el texto introducido por el usuario.

Los campos de texto pueden incluir texto sin formato o texto con formato HTML. El texto sin formato se almacena en la propiedad text de la instancia y el texto HTML se almacena en la propiedad htmlText .

Se pueden utilizar declaraciones de estilos CSS para definir estilos de texto que pueden aplicarse a varios campos de texto distintos. Las declaraciones de estilos CSS pueden crearse en el código de la aplicación o cargarse en tiempo de ejecución desde un archivo CSS externo.

La clase flash.text.StyleSheet administra estilos CSS. La clase StyleSheet reconoce un conjunto limitado de propiedades CSS. Para ver una lista detallada de propiedades de estilos admitidas por la clase StyleSheet, consulte la entrada de flash.textStylesheet en la Referencia de ActionScript 3.0.

Tal y como se indica en el ejemplo siguiente, se pueden crear hojas de estilos CSS en el código y aplicar dichos estilos a texto HTML mediante un objeto StyleSheet:

var style:StyleSheet = new StyleSheet(); 
 
var styleObj:Object = new Object(); 
styleObj.fontSize = "bold"; 
styleObj.color = "#FF0000"; 
style.setStyle(".darkRed", styleObj); 
 
var tf:TextField = new TextField(); 
tf.styleSheet = style; 
tf.htmlText = "<span class = 'darkRed'>Red</span> apple"; 
 
addChild(tf);

Tras crear un objeto StyleSheet, el código de ejemplo crea un objeto simple para almacenar un conjunto de propiedades de declaración de estilos. Posteriormente llama al método StyleSheet.setStyle() , que añade el nuevo estilo a la hoja de estilos con el nombre ".darkred". Por último, aplica el formato de la hoja de estilos asignando el objeto StyleSheet a la propiedad styleSheet .

Para que los estilos CSS surtan efecto, la hoja de estilos debe aplicarse al objeto TextField antes de establecer la propiedad htmlText .

Nota: por diseño, los campos de texto con hojas de estilos no se pueden editar. Si se dispone de un campo de entrada de texto y se le asigna una hoja de estilos, el campo muestra las propiedades de la hoja de estilos, pero el campo de texto no permitirá a los usuarios escribir texto nuevo en él. Asimismo, las siguientes API de ActionScript no se pueden utilizar en un campo de texto con una hoja de estilos asignada:

• Método TextField.replaceText()

• Método TextField.replaceSelectedText()

• Propiedad TextField.defaultTextFormat

• Método TextField.setTextFormat()

Si se ha asignado una hoja de estilos a un campo de texto, pero después se establece la propiedad TextField.styleSheet con el valor null , el contenido de las propiedades TextField.text y TextField.htmlText añade etiquetas y atributos a su contenido para incorporar el formato de la hoja de estilos asignada anteriormente. Para conservar la propiedad htmlText original, debe guardarse en una variable antes de establecer la hoja de estilos en null .

El enfoque de utilizar CSS para el formato es más eficaz si se carga información CSS desde un archivo externo en tiempo de ejecución. Cuando los datos CSS son externos a la propia aplicación, se puede cambiar el estilo visual de texto en la aplicación sin tener que modificar el código fuente de ActionScript 3.0. Una vez implementada la aplicación, es posible modificar un archivo CSS externo para cambiar el aspecto de la aplicación sin tener que volver a implementar su archivo SWF.

El método StyleSheet.parseCSS() convierte una cadena que contiene datos CSS en declaraciones de estilo del objeto StyleSheet. En el siguiente ejemplo se muestra cómo leer un archivo CSS externo y aplicar sus declaraciones de estilo a un objeto TextField.

En primer lugar, este es el contenido del archivo CSS que se va a cargar, denominado example.css:

p { 
    font-family: Times New Roman, Times, _serif; 
    font-size: 14; 
} 
 
h1 { 
    font-family: Arial, Helvetica, _sans; 
    font-size: 20; 
    font-weight: bold; 
} 
 
.bluetext { 
    color: #0000CC; 
}    

A continuación se muestra el código ActionScript de una clase que carga el archivo example.css y aplica los estilos al contenido de TextField:

package 
{ 
    import flash.display.Sprite; 
    import flash.events.Event; 
    import flash.net.URLLoader; 
    import flash.net.URLRequest; 
    import flash.text.StyleSheet; 
    import flash.text.TextField; 
    import flash.text.TextFieldAutoSize; 
 
    public class CSSFormattingExample extends Sprite 
    { 
        var loader:URLLoader; 
        var field:TextField; 
        var exampleText:String = "<h1>This is a headline</h1>" +  
            "<p>This is a line of text. <span class='bluetext'>" + 
            "This line of text is colored blue.</span></p>"; 
         
        public function CSSFormattingExample():void 
        { 
            field = new TextField(); 
            field.width = 300; 
            field.autoSize = TextFieldAutoSize.LEFT; 
            field.wordWrap = true; 
            addChild(field); 
             
            var req:URLRequest = new URLRequest("example.css"); 
             
            loader = new URLLoader(); 
            loader.addEventListener(Event.COMPLETE, onCSSFileLoaded); 
            loader.load(req); 
        } 
         
        public function onCSSFileLoaded(event:Event):void 
        { 
            var sheet:StyleSheet = new StyleSheet(); 
            sheet.parseCSS(loader.data); 
            field.styleSheet = sheet; 
            field.htmlText = exampleText; 
        } 
    } 
}

Una vez cargados los datos CSS, se ejecuta el método onCSSFileLoaded() y se llama al método StyleSheet.parseCSS() para transferir las declaraciones de estilo al objeto StyleSheet.

Un método especialmente útil de la clase flash.text.TextField es setTextFormat() . Con setTextFormat() se pueden asignar propiedades específicas al contenido de una parte de un campo de texto para responder a una entrada de usuario, como en el caso de los formularios que deben recordar a los usuarios que algunas entradas son obligatorias o para resaltar una parte de un texto dentro de un campo de texto a medida que el usuario selecciona partes del texto.

En el siguiente ejemplo se utiliza TextField.setTextFormat() en un rango de caracteres para cambiar el aspecto de una parte del contenido de myTextField cuando el usuario hace clic en el campo de texto:

var myTextField:TextField = new TextField(); 
myTextField.text = "No matter where you click on this text field the TEXT IN ALL CAPS changes format."; 
myTextField.autoSize = TextFieldAutoSize.LEFT; 
addChild(myTextField); 
addEventListener(MouseEvent.CLICK, changeText); 
 
var myformat:TextFormat = new TextFormat(); 
myformat.color = 0xFF0000; 
myformat.size = 18; 
myformat.underline = true; 
 
function changeText(event:MouseEvent):void 
{ 
    myTextField.setTextFormat(myformat, 49, 65); 
}