Formatowanie tekstu

Klasa TextFormat umożliwia określenie szeregu różnych właściwości sterujących wyświetlaniem tekstu i zastosowanie ich do całej treści obiektu TextField lub do zakresu tekstu.

W poniższym przykładzie jeden obiekt TextFormat jest stosowany do całego obiektu TextField, a drugi obiekt TextFormat jest stosowany do zakresu tekstu w tym samym obiekcie 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);

Metoda TextField.setTextFormat() wpływa tylko na tekst wyświetlany już w polu tekstowym. Jeśli treść obiektu TextField ulegnie zmianie, aplikacja może ponownie wywołać metodę TextField.setTextFormat() w celu ponownego zastosowania formatowania. Można także ustawić właściwość defaultTextFormat obiektu TextField, aby określić format tekstu wprowadzanego przez użytkownika.

Pola tekstowe mogą zawierać zwykły tekst lub sformatowany tekst HTML. Zwykły tekst jest przechowywany we właściwości text instancji, natomiast tekst HTML jest przechowywany we właściwości htmlText.

Można używać deklaracji stylów CSS do definiowania stylów tekstu przeznaczonych do stosowania do wielu różnych pól tekstowych. Deklaracje stylów CSS mogą być tworzone w kodzie aplikacji lub ładowane w czasie wykonywania z zewnętrznego pliku CSS.

Do obsługi stylów CSS służy klasa flash.text.StyleSheet. Klasa StyleSheet rozpoznaje ograniczony zbiór właściwości CSS. Szczegółową listę właściwości stylów obsługiwanych przez klasę StyleSheet zawiera opis klasy flash.textStylesheet w Skorowidzu języka ActionScript 3.0.

Poniższy przykład ilustruje możliwość utworzenia arkusza CSS w kodzie programu i zastosowania stylów z tego arkusza do tekstu HTML za pośrednictwem obiektu 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);

Po utworzeniu obiektu StyleSheet przykładowy kod tworzy prosty obiekt zawierający zestaw właściwości deklarujących style. Następnie wywoływana jest metoda StyleSheet.setStyle(), która dodaje nowy styl do arkusza stylów pod nazwą „.darkred”. Następnie format arkusza stylów jest stosowany poprzez przypisanie obiektu StyleSheet do właściwości styleSheet obiektu TextField.

Aby zastosowanie stylów CSS było skuteczne, arkusz stylów musi być zastosowany do obiektu TextField przed przypisaniem wartości właściwości htmlText.

Z założenia pole tekstowe z arkuszem stylów nie może być edytowane. Jeśli arkusz stylów zostanie zastosowany do pola tekstu wejściowego, właściwości arkusza stylów zostaną uwzględnione w wyświetlanym polu, ale użytkownik nie będzie mógł wprowadzać nowego tekstu w polu. Ponadto do pola tekstowego z przypisanym arkuszem stylów nie można stosować następujących elementów interfejsu API języka ActionScript:

• metody TextField.replaceText();

• metody TextField.replaceSelectedText();

• właściwości TextField.defaultTextFormat;

• metody TextField.setTextFormat().

Jeśli do pola tekstowego zostanie przypisany arkusz stylów, ale później właściwość TextField.styleSheet zostanie ustawiona na null, do treści właściwości TextField.text i TextField.htmlText zostaną dodane znaczniki i atrybuty w celu uwzględnienia formatowania z poprzednio przypisanego arkusza stylów. Aby zachować oryginalną treść właściwości htmlText, należy zapisać ją w zmiennej przed przypisaniem właściwości arkusza stylów wartości null.

Zastosowanie arkuszy CSS staje się znacznie bardziej funkcjonalne, jeśli arkusze CSS mogą być ładowane z pliku zewnętrznego podczas wykonywania kodu. Gdy dane arkuszy CSS są zewnętrzne względem aplikacji, możliwe jest modyfikowanie wyglądu tekstu w aplikacji bez zmiany kodu źródłowego w języku ActionScript 3.0. Po wdrożeniu aplikacji można zmienić zewnętrzny plik CSS, aby zmodyfikować wygląd aplikacji. Nie jest wówczas konieczne ponowne wdrażanie pliku SWF aplikacji.

Metoda StyleSheet.parseCSS() przekształca ciąg znaków zawierający dane CSS na deklaracje stylów w obiekcie StyleSheet. Poniższy przykład ilustruje odczyt zewnętrznego pliku CSS i zastosowanie deklaracji stylów z tego pliku do obiektu TextField.

Oto treść pliku CSS przeznaczonego do załadowania. Plik ten nosi nazwę 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; 
}    

Poniżej przedstawiono kod ActionScript klasy ładującej plik example.css i stosujący style do treści obiektu 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; 
        } 
    } 
}

Po załadowaniu danych CSS wykonywana jest metoda onCSSFileLoaded(), która wywołuje metodę StyleSheet.parseCSS() w celu przeniesienia deklaracji stylów do obiektu StyleSheet.

Użyteczną metodą klasy flash.text.TextField jest metoda setTextFormat(). Korzystając z metody setTextFormat(), można przypisywać konkretne właściwości do części pola tekstowego w odpowiedzi na działania użytkownika — bywa to przydatne np. w formularzach, w których chcemy przypomnieć użytkownikowi, że niektóre pola są obowiązkowe, lub w sytuacjach, gdy fragment tekstu w polu tekstowym powinien zostać wyróżniony w odpowiedzi na zaznaczanie części tekstu przez użytkownika.

W poniższym przykładzie zastosowano metodę TextField.setTextFormat() do zakresu znaków w celu zmiany wyglądu fragmentu treści obiektu myTextField, gdy użytkownik kliknie w polu tekstowym:

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