Formatieren von Text

Mithilfe der TextFormat-Klasse können Sie verschiedene Eigenschaften für die Textanzeige festlegen und auf den gesamten Inhalt eines TextField-Objekts oder auf einen bestimmten Textbereich anwenden.

Im folgenden Beispiel wird ein TextFormat-Objekt auf ein gesamtes TextField-Objekt und ein zweites TextFormat-Objekt auf einen Textbereich in diesem TextField-Objekt angewendet:

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

Die TextField.setTextFormat()-Methode wirkt sich nur auf Text aus, der bereits im Textfeld angezeigt wird. Wenn sich der Inhalt im TextField-Objekt ändert, muss in der Anwendung möglicherweise erneut die TextField.setTextFormat()-Methode aufgerufen werden, damit die Formatierung neu zugewiesen wird. Sie können zudem die defaultTextFormat-Eigenschaft des TextField-Objekts so festlegen, dass das zu verwendende Format für vom Benutzer eingegebenen Text angegeben wird.

Textfelder können entweder unformatierten oder HTML-formatierten Text enthalten. Unformatierter Text wird in der text-Eigenschaft der Instanz gespeichert und HTML-Text in der htmlText-Eigenschaft.

Mithilfe von CSS-Stylesheets können Sie Textformate definieren, die Sie auf viele verschiedene Textfelder anwenden können. CSS-Stylesheets können im Anwendungscode erstellt oder zur Laufzeit aus einer externen CSS-Datei geladen werden.

Mit der flash.text.StyleSheet-Klasse werden CSS-Stile verarbeitet. Mit der StyleSheet-Klasse wird eine begrenzte Anzahl von CSS-Eigenschaften erkannt. Eine detaillierte Aufstellung der Stileigenschaften, die von der StyleSheet-Klasse unterstützt werden, finden Sie im ActionScript 3.0-Referenzhandbuch im Eintrag zur flash.textStylesheet-Eigenschaft.

Wie im folgenden Beispiel dargestellt ist, können Sie CSS-Stylesheets im Code erstellen und mithilfe eines StyleSheet-Objekts auf HTML-Text anwenden:

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

Nach dem Erstellen eines StyleSheet-Objekts wird im Codebeispiel ein einfaches Objekt zum Aufnehmen einer Gruppe von Eigenschaften für das Stylesheet erstellt. Anschließend wird die StyleSheet.setStyle()-Methode aufgerufen, mit der der neue Stil mit dem Namen „.darkred“ zum Stylesheet hinzugefügt wird. Dann wird die Formatierung des Stylesheets angewendet, indem das StyleSheet-Objekt zur styleSheet-Eigenschaft des TextField-Objekts zugewiesen wird.

Damit die CSS-Stile wirksam werden, sollte das Stylesheet auf das TextField-Objekt angewendet werden, bevor die htmlText-Eigenschaft festgelegt wird.

Ein Textfeld, auf das ein Stylesheet angewendet wurde, kann nicht mehr bearbeitet werden. Wenn Sie einem Eingabetextfeld ein Stylesheet zuweisen, wird das Textfeld mit den Eigenschaften des Stylesheets angezeigt. Benutzer können jedoch keinen neuen Text in das Textfeld eingeben. Darüber hinaus können auch die folgenden ActionScript-APIs nicht mehr für ein Textfeld mit einem zugewiesenen Stylesheet verwendet werden:

• TextField.replaceText()-Methode

• TextField.replaceSelectedText()-Methode

• TextField.defaultTextFormat-Eigenschaft

• TextField.setTextFormat()-Methode

Wenn einem Textfeld ein Stylesheet zugewiesen wurde, die TextField.styleSheet-Eigenschaft jedoch später auf den Wert null gesetzt wird, werden den Inhalten der Eigenschaften TextField.text und TextField.htmlText Tags und Attribute hinzugefügt, um die Formatierung des zuvor zugewiesenen Stylesheets einzubinden. Um die ursprüngliche htmlText-Eigenschaft beizubehalten, müssen Sie diese in einer Variablen speichern, bevor Sie dem Stylesheet den Wert null zuweisen.

Die Verwendung von CSS für das Formatieren ist effizienter, wenn Sie CSS-Daten zur Laufzeit aus einer externen Datei laden können. Wenn es sich um externe CSS-Daten außerhalb der Anwendung handelt, können Sie den Anzeigestil des Textes in der Anwendung ändern, ohne Änderungen am ActionScript 3.0-Quellcode vornehmen zu müssen. Nach Bereitstellung der Anwendung können Sie eine externe CSS-Datei so ändern, dass sich das Erscheinungsbild der Anwendung ändert, ohne dass die SWF-Datei der Anwendung neu bereitgestellt werden muss.

Mit der StyleSheet.parseCSS()-Methode wird ein String mit CSS-Daten in Stylesheets im StyleSheet-Objekt konvertiert. Im folgenden Beispiel wird veranschaulicht, wie eine externe CSS-Datei abgerufen wird und wie die zugehörigen Stylesheets auf ein TextField-Objekt angewendet werden.

Im Folgenden wird zunächst der Inhalt der zu ladenden CSS-Datei mit dem Namen „example.css“ angezeigt:

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

Anschließend folgt der ActionScript-Code für eine Klasse, mit dem die Datei „example.css“ geladen wird und die entsprechenden Stile auf den TextField-Inhalt angewendet werden:

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

Nach dem Laden der CSS-Daten wird mithilfe der onCSSFileLoaded()-Methode die StyleSheet.parseCSS()-Methode aufgerufen, damit die Stylesheets auf das StyleSheet-Objekt übertragen werden.

Bei der setTextFormat()-Methode handelt es sich um eine nützliche Methode der flash.text.TextField-Klasse. Mithilfe der setTextFormat()-Methode können Sie dem Inhalt eines bestimmten Bereichs des Textfeldes spezifische Eigenschaften zuweisen, um auf Benutzereingaben zu reagieren, z. B. bei Formularen, bei denen Benutzer daran erinnert werden müssen, dass bestimmte Eingaben erforderlich sind, oder um die Darstellung eines Unterabschnitts einer Textpassage in einem Textfeld zu ändern, wenn der Benutzer Textbereiche auswählt.

Im folgenden Beispiel wird die TextField.setTextFormat()-Methode auf einen Zeichenbereich angewendet, um die Darstellung eines Teils des Inhalts von myTextField zu ändern, wenn der Benutzer auf das Textfeld klickt:

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