Форматирование текста

Flash Player 9 и более поздних версий, Adobe AIR 1.0 и более поздних версий

Существует несколько способов форматирования отображаемого текста с помощью кода. Можно задать свойства непосредственно для экземпляра TextField, например, TextFIeld.thickness , TextField.textColor и TextField.textHeight .Также можно обозначить содержимое текстового поля с помощью свойства htmlText и использовать поддерживаемые теги HTML, например, b , i и u . Кроме того, можно применить объекты TextFormat к текстовым полям, содержащим обычный текст, или применить объекты StyleSheet к текстовым полям со свойством htmlText . Использование объектов TextFormat и StyleSheet обеспечивает самый полный контроль над внешним видом текста в рамках всего приложения. Можно определить объект TextFormat или StyleSheet и применить его к нескольким или ко всем текстовым полям в приложении.

Назначение форматов текста

Класс TextFormat позволяет определить ряд различных свойств отображения текста и применить их ко всему содержимому объекта TextField или к диапазону текста.

В следующем примере объект TextFormat применяется ко всему объекту TextField, а второй объект TextFormat применяется к диапазону текста в этом же объекте 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);

Метод TextField.setTextFormat() воздействует только на текст, уже отображаемый в текстовом поле. При изменении содержимого в TextField приложение повторно вызывает метод TextField.setTextFormat() для повторного применения форматирования. Также можно задать свойство defaultTextFormat объекта TextField, чтобы указать формат для текста, вводимого пользователем.

Применение каскадных таблиц стилей

Текстовые поля могут содержать неформатированный текст или текст в формате HTML. Неформатированный текст сохраняется в свойстве text экземпляра, а HTML-текст — в свойстве htmlText .

С помощью объявлений CSS-стилей можно определить стили текста, применяемые ко многим другим текстовым полям. Объявления CSS-стилей можно создать в коде приложения или загрузить во время выполнения из внешнего CSS-файла.

Класс flash.text.StyleSheet обрабатывает CSS-стили. Класс StyleSheet распознает ограниченный набор свойств CSS. Подробный список свойств стиля, поддерживаемых классом StyleSheet, см. в описании flash.textStylesheet в справочнике ActionScript® 3.0 для Adobe® Flash® Professional CS5.

Как показано в следующем примере, CSS-стили можно создать в коде и применить их к HTML-тексту с помощью объекта 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);

После создания объекта StyleSheet пример кода создает простой объект для хранения набора свойств, объявляющих стиль. Затем вызывается метод StyleSheet.setStyle() , который добавляет в таблицу стилей новый стиль с именем «.darkred». После этого форматирование таблицы стилей применяется путем назначения объекта StyleSheet свойству TextField styleSheet .

Чтобы CSS-стили вступили в силу, таблицу стилей необходимо применить к объекту TextField до того, как будет задано свойство htmlText .

Текстовое поле с таблицей стилей не подлежит редактированию. Если применить таблицу стилей к существующему текстовому полю ввода, оно отображает свойства таблицы стилей, но не позволяет пользователям вводить новый текст. Кроме того, если текстовому полю присвоена таблица стилей, для него нельзя использовать следующие API-интерфейсы ActionScript:

  • Метод TextField.replaceText()

  • Метод TextField.replaceSelectedText()

  • Свойство TextField.defaultTextFormat

  • Метод TextField.setTextFormat()

Если текстовому полю присвоена таблица стилей, но впоследствии свойство TextField.styleSheet устанавливается на значение null , содержимое свойств TextField.text и TextField.htmlText добавляет для содержимого теги и атрибуты, чтобы включить форматирование из назначенной ранее таблицы стилей. Для сохранения исходного свойства htmlText следует сохранить его в переменной перед установкой таблицы стилей на значение null .

Загрузка внешнего CSS-файла

Форматирование с помощью CSS обеспечивает больше возможностей, если данные CSS загружаются из внешнего файла во время выполнения. Если приложение использует внешние данные CSS, отображаемый стиль текста в приложении можно изменить, не затрагивая исходный код ActionScript 3.0. После развертывания приложения внешний вид приложения можно изменить путем модификации внешнего CSS-файла. Такой метод не требует разворачивать SWF-повторно.

Метод StyleSheet.parseCSS() преобразует данные CSS в объявления стилей в объекте StyleSheet. В следующем примере показано, как считывается внешний CSS-файл и как его объявления стилей применяются к объекту TextField.

Ниже приводится содержимое загружаемого CSS-файла с именем 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; 
}    

Код ActionScript создает класс, который загружает файл example.css и применяет стили к содержимому 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; 
        } 
    } 
}

После загрузки данных CSS выполняется метод onCSSFileLoaded() , который вызывает метод StyleSheet.parseCSS() для преобразования объявлений стилей в объект StyleSheet.

Форматирование диапазонов текста в текстовом поле

Полезным методом класса flash.text.TextField является метод setTextFormat() . С помощью setTextFormat() можно назначить определенные свойства содержимому части текстового поля, чтобы оно реагировало на пользовательский ввод (например, для вывода напоминания об обязательных полях при заполнении форм) или чтобы изменить стиль начертания фрагмента текста в поле, когда пользователь выделяет части текста.

В следующем примере метод TextField.setTextFormat() вызывается для диапазона символов, чтобы изменить внешний вид части содержимого myTextField , когда пользователь щелкает мышью в текстовом поле.

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