Formattazione di testo

È possibile utilizzare la classe TextFormat per impostare una serie di proprietà di visualizzazione del testo e applicarle all'intero contenuto di un oggetto TextField o a un intervallo di testo.

L'esempio seguente applica un oggetto TextFormat a un intero oggetto TextField e applica un altro oggetto TextFormat a un intervallo di testo all'interno di tale oggetto 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);

Il metodo TextField.setTextFormat() agisce solo sul testo che è già visualizzato nel campo di testo. Se il contenuto dell'oggetto TextField cambia, è possibile che l'applicazione debba chiamare ancora il metodo TextField.setTextFormat() per applicare nuovamente la formattazione. È anche possibile impostare la proprietà defaultTextFormat di TextField per specificare il formato da utilizzare per il testo immesso dall'utente.

I campi di testo possono contenere testo semplice o testo in formato HTML. Il testo semplice viene memorizzato nella proprietà text dell'istanza, mentre il testo HTML viene memorizzato nella proprietà htmlText.

È possibile utilizzare le dichiarazioni di stile CSS per definire gli stili di testo che è possibile applicare a molti campi di testo diversi. La dichiarazione di stile CSS può essere creata nel codice dell'applicazione oppure caricata in fase di runtime da un file CSS esterno.

La classe flash.text.StyleSheet gestisce gli stili CSS. La classe StyleSheet riconosce un set limitato di proprietà CSS. Per un elenco dettagliato delle proprietà di stile supportate dalla classe StyleSheet, consultate la sezione relativa a flash.textStylesheet nella Guida di riferimento di ActionScript 3.0.

Come mostra l'esempio seguente, è possibile creare dei fogli di stile CSS (Cascading Style Sheets) nel codice e applicarli al testo HTML mediante un oggetto 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);

Una volta creato l'oggetto StyleSheet, il codice di esempio crea un oggetto semplice che contiene un set di proprietà di dichiarazioni di stile. Quindi, chiama il metodo StyleSheet.setStyle(), che aggiunge il nuovo stile al foglio di stile di nome “.darkred”. Poi applica la formattazione del foglio di stile assegnando l'oggetto StyleSheet alla proprietà styleSheet di TextField.

Affinché gli stili CSS abbiano effetto, i fogli di stile devono essere applicati all'oggetto TextField prima di impostare la proprietà htmlText.

Per impostazione in fase di progettazione, un campo di testo al quale è applicato un foglio di stile non è modificabile. Se si assegna a un campo di testo di input un foglio di stile, il campo di testo mostra le proprietà del foglio di stile ma il campo di testo non consente agli utenti di immettervi del nuovo testo. Inoltre, non è possibile utilizzare le seguenti API ActionScript su un campo di testo con un foglio di stile:

• Il metodo TextField.replaceText()

• Il metodo TextField.replaceSelectedText()

• La proprietà TextField.defaultTextFormat

• Il metodo TextField.setTextFormat()

Se a un campo di testo è stato assegnato un foglio di stile ma successivamente la proprietà TextField.styleSheet viene impostata su null, il contenuto dei tag TextField.text e TextField.htmlText aggiunge dei tag e degli attributi al loro contenuto per incorporare la formattazione del foglio di stile precedentemente assegnato. Per conservare la proprietà htmlText originale, salvarla in una variabile prima di impostare il foglio di stile su null.

L'uso dei fogli di stile CSS per la formattazione è particolarmente potente quando è possibile caricare le informazioni dei CSS da un file esterno in fase di runtime. Quando i dati CSS sono esterni all'applicazione, è possibile modificare lo stile visivo del testo nell'applicazione senza dover modificare il codice sorgente ActionScript 3.0. Una volta implementata l'applicazione, è possibile modificare un file CSS esterno per modificare l'aspetto dell'applicazione senza dover implementare di nuovo il file SWF dell'applicazione.

Il metodo StyleSheet.parseCSS() converte una stringa che contiene i dati CSS in dichiarazioni di stile nell'oggetto StyleSheet. L'esempio seguente mostra come leggere un file CSS esterno e applicarne le dichiarazioni di stile a un oggetto TextField.

Innanzi tutto, ecco il contenuto del file CSS da caricare e denominato 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; 
}    

Quindi, ecco il codice ActionScript per una classe che carica il file example.css e applica gli stili al contenuto di 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; 
        } 
    } 
}

Quando i dati CSS vengono caricati, il metodo onCSSFileLoaded() viene eseguito e chiama il metodo StyleSheet.parseCSS() per trasferire le dichiarazioni di stile all'oggetto StyleSheet.

Un metodo utile della classe flash.text.TextField è il metodo setTextFormat(). Mediante setTextFormat() è possibile assegnare delle proprietà specifiche a una parte dei contenuti di un campo di testo per rispondere all'input dell'utente, ad esempio i moduli che devono ricordare agli utenti che determinate voci sono obbligatorie o per modificare l'enfasi di una sottosezione di un brano di testo all'interno di un campo di testo mentre un utente seleziona parti del testo.

L'esempio seguente utilizza TextField.setTextFormat() su un intervallo di caratteri per modificare l'aspetto di parte del contenuto di myTextField quando l'utente fa clic sul campo di testo:

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); 
}