Март 2011

Вот простая таблица стилей, которая содержит два правила — одно для элементов и одно для элементов :

р {

font-family: sans-serif font-size: 12рх;

}

11 {

font-family: serif font-size: 10px; margin-left: 10px;

}

В языке ActionScript 3.0 таблица стилей, подобная той, которая продемонстрирована в предыдущем коде, представляется экземпляром класса Stylesheet. С помощью методов класса Stylesheet мы можем создать новую таблицу стилей программным путем или провести синтаксический разбор существующей внешней таблицы стилей. Чтобы связать объект Stylesheet с определенным объектом TextField, мы присваиваем объект Stylesheet переменной stylesheet (которая будет рассмотрена далее) данного объекта TextField. С каждым текстовым полем может быть связан всего лишь один объект Stylesheet, что резко контрастирует с языком CSS1, позволяющим связывать с одним документом HTML или XML несколько таблиц стилей.

Конкретные свойства, доступные для использования в таблицах стилей ActionScript, перечислены в табл. 27.7. Язык ActionScript поддерживает только те свойства стилей из рекомендации консорциума W3C, которые соответствуют параметрам форматирования класса TextFormat. В сравнении с полным набором свойств, определяемых консорциумом W3C, набор свойств, поддерживаемых ActionScript, чрезвычайно ограничен.

Таблица 27.7. Поддерживаемые свойства стиля языка CSS

Название свойства стиля Описание

color Задает цвет шрифта в виде 24-битного шестнадцатеричного числа, перед которым указывается знак фунта (#). Например, красный цвет записывается как #FF0000

display Определяет, должен ли элемент быть скрыт (попе), должен ли после него добавляться автоматический разрыв строки (block) или же автоматический разрыв строки добавляться не должен (inline)

font-family Задает название шрифта устройства или встроенного шрифта

font-size Указывает размер шрифта в пикселах

font-style Задает отображение символа с использованием курсива (italic) или обычное отображение символа (normal по умолчанию)

font-weight Задает отображение символа с использованием полужирного начертания (bold) или обычное отображение символа (normal по умолчанию)

kerning Определяет, должен ли быть использован автоматический кернинг для пар символов (true) или нет (false). Это свойство является неофициальным расширением набора поддерживаемых свойств стилей, описанных в рекомендации консорциума W3C

leading Задает расстояние по вертикали между строками текста, в пикселах. Это свойство является неофициальным расширением набора поддерживаемых свойств стилей, описанных в рекомендации консорциума W3C. Сравните его со свойством line-height, описанным в рекомендации консорциума W3C

Название свойства стиля Описание

letter-spacing Задает расстояние между буквами (то есть трекинг) в пикселах

margin-left Определяет расстояние по горизонтали между левой границей текстового поля и левым краем абзаца в пикселах

margin-right Задает расстояние по горизонтали между правой границей текстового поля и правым краем абзаца в пикселах

text-align Задает выравнивание абзаца по горизонтали (left (по умолчанию), right, center или justify)

text-decoration Определяет графические элементы украшения, добавляемые к тексту. В ActionScript поддерживаемыми значениями являются underline и попе (по умолчанию)

text-indent Задает расстояние, которое обозначает смещение первой строки абзаца относительно левой границы текстового поля (аналогично переменной экземпляра indent класса TextFormat), в пикселах

Таблицы стилей могут применяться для форматирования как XML-, так и HTML-элементов. Однако среди HTML-элементов, используемых приложением Flash Player для форматирования (см. табл. 27.7), с помощью таблиц стилей могут быть отформатированы только теги, и. Другие встроенные теги (например, и ) всегда выполняют свою предопределенную задачу форматирования HTML, и его нельзя изменить с помощью таблиц стилей. Более того, теги и всегда отображаются в виде блочных элементов, даже если в соответствии с таблицей стилей они должны отображаться в виде встроенных элементов.

Чтобы добавить форматирование для различных интерактивных состояний гипертекстовой ссылки, используйте следующие селекторы псевдоклассов: a: link, a: hover и a: active. Например, следующее правило определяет, что гипертекстовые ссылки при наведении на них указателя мыши должны подчеркиваться:

a:hover { text-decoration: underline:

}

Благодаря таблицам стилей у разработчиков появляется чрезвычайно важная возможность отделять информацию о стилях от содержимого и применять одинаковое определение стиля к нескольким блокам содержимого. Тем не менее в языке ActionScript таблицы стилей имеют много ограничений, снижающих их потенциальную полезность. Перед тем как рассмотреть вопросы форматирования текста с помощью таблиц стилей, внимательно познакомимся с этими ограничениями.

Существенные ограничения таблиц стилей в языке ActionScript

Приложение Flash Player намеренно предоставляет только минимальную реализацию таблиц стилей, играющую роль интерфейса для установки параметров форматирования текстового поля. В результате поддерживаемым приложением Flash Player таблицам стилей не хватает нескольких важных возможностей, описанных в рекомендации по языку CSS консорциума W3C. Читатели, привыкшие работать

с CSS и HTML, должны помнить о следующих ограничениях приложения Flash Player.

? Все длины выражаются в пикселах. Относительная единица em не поддерживается, а пункты трактуются как пикселы.

? В любой момент времени с каждым текстовым полем можно связать всего одну таблицу стилей. Таблицы стилей приложения Flash Player не каскадируются.

? Повторное присваивание таблицы стилей текстовому полю не приводит к отображению этого поля с использованием новой таблицы стилей (в качестве обходного решения можно применять подход, описание которого приводится сразу за данным списком).

? Свойства margin-topHmargin-bottomHe поддерживаются.

? Элементы не могут произвольным образом отображаться в виде элементов списка. Значение list-item свойства display не поддерживается. Более того, форму маркеров элемента списка (то есть метки) нельзя изменять, даже для собственного элемента языка HTML.

? Приложение Flash Player поддерживает только базовые селекторы типов и селекторы классов. Все остальные множества селекторов не поддерживаются. Более того, селекторы типов и селекторы классов нельзя объединять (например, следующий селектор в приложении Flash Player недопустим: р. someCustomClass). Если таблица стилей содержит селектор потомка, вся таблица стилей будет проигнорирована и никакое форматирование применено не будет.

? Если таблица стилей присваивается текстовому полю, то текстовое содержимое этого поля не может быть изменено с помощью методов replaceText ( ), appendText ( ), replaceSelText ( ) или через пользовательский ввод.

Чтобы изменить таблицу стилей текстового поля, сначала присвойте желаемый объект Stylesheet переменной stylesheet, а затем присвойте переменную htmlText самой себе, как показано в следующем коде:

t. stylesheet = некийНовый06ъектЗЬу1еЗЬееЬ\ t. html Text = t. html Text:

Стоит отметить, что новая таблица стилей должна устанавливать все свойства стиля, которые были установлены прежней таблицей стилей. В противном случае любые неустановленные прежние значения свойств стиля будут сохранены.

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

Форматирование текста с помощью таблицы стилей, создаваемой программным путем

Чтобы отформатировать текст с помощью таблицы стилей, создаваемой программным путем, используйте следующую обобщенную последовательность действий.

1. Создайте один или несколько базовых блоков, представляющих блоки объявления правил.

2. Создайте объект Stylesheet.

3. Используйте метод экземпляра setStyle ( ) класса Stylesheet, чтобы создать одно или несколько правил на основании блоков объявления, созданных на шаге 1.

4. Используйте переменную экземпляра stylesheet класса TextField, чтобы зарегистрировать объект Stylesheet в желаемом объекте TextField.

5. Присвойте желаемое содержимое HTML или XML переменной htmlText объекта TextField.

Всегда регистрируйте объект Stylesheet (шаг 4) до того, как будет присвоено содержимое HTML или XML (шаг 5). В противном случае таблица стилей не будет применена к этому

содержимому

Применим перечисленные шаги на практике. Наша цель — отформатировать весь текст в текстовом поле, используя шрифт Arial размером 20 пунктов полужирного начертания (как мы делали это ранее с помощью класса TextFormat и разметки HTML). Как и раньше, форматируемым текстом является следующий простой фрагмент на языке HTML:

ActionScript is fun!

В нашей таблице стилей мы определяем правило, которое говорит приложению Flash Player отображать содержимое всех тегов с помощью шрифта Arial размером 20 пунктов полужирного начертания. Блок объявления для нашего правила является простым базовым объектом с динамическими переменными экземпляра, имена которых соответствуют свойствам стиля CSS, а значения переменных задаются соответствующими значениями стиля CSS. Вот этот код:

// Создаем объект, который будет служить блоком объявления var pDeclarationBlock:Object = new 0bject( ):

// Присваиваем значения свойствам стиля pDeclarati onBlock. fontFami1 у = «Arial» pDeclarationBl ock. fontSize = «20″: pDeclarationBlock. fontWeight = «bold»;

В приведенном коде обратите внимание на то, что при создании таблиц стилей программным путем формат имен свойств CSS слегка изменяется: дефисы удаляются, а символы, которые следуют за дефисами, записываются в верхнем регистре. Например, свойство font-family превращается в свойство f ontFamily.

Теперь, когда наш блок объявления готов, мы создаем объект Stylesheet. Вот этот код:

var stylesheet:Stylesheet = new StyleSheet( );

Чтобы создать правило для тега, мы используем метод экземпляра se t S t yle ( ) класса Stylesheet. Метод setStyle ( ) создает новое правило стиля на основе

двух параметров: имени селектора (тип String) и блока объявления (тип Ob j ect), как показано в следующем обобщенном коде:

oObeKTStyleSheet. setStyleCселектор», блокОбъявления);

Соответственно, вот код, создающий правило для тега :

stylesheet. setStylе(«р», pDeclarati onBlock);

Наша таблица стилей готова. Теперь мы создадим текстовое поле, к которому будет применено форматирование. Следующий код создает текстовое поле и присваивает наш объект Stylesheet переменной stylesheet этого поля:

var t:TextField = new TextFieldC ):

t. width = 200

t. stylesheet = stylesheet:

Наконец, мы присваиваем текст, который должен быть отформатирован, переменной htmlText:

t. htmlText = »

ActionScript is fun!

«;

В листинге 27.7 представлен весь код целиком для нашего текстового поля, к которому применяется форматирование.

Листинг 27.7. Форматирование текста с помощью таблицы стилей, создаваемой программным путем

// Создаем блок объявления

var pDeclarationBlock:Object = new Object( );

pDeclarationBlock. fontFamily = «Arial»

pDeclarationBlock. fontSize = «20″:

pDeclarationBlock. fontWeight = «bold»;

// Создаем таблицу стилей

var stylesheet:Stylesheet = new Stylesheet( );

// Создаем правило

styleSheet. setStyleCp», pDecl arati onBl ock);

// Создаем текстовое поле

var t:TextField = new TextField( );

t. width = 200

// Присваиваем таблицу стилей t. stylesheet = stylesheet;

// Присваиваем HTML-код, который должен быть отформатирован t. htmlText = »

ActionScript is fun!

«;

Результат выполнения кода из листинга 27.7 идентичен результату, который был проиллюстрирован ранее на рис. 27.10 и 27.11.

Селекторы класса

Чтобы применить стиль не ко всем абзацам сразу, а к одному определенному подмножеству абзацев, мы используем селектор класса CSS. Предположим, что мы

хотим акцентировать внимание пользователя на важных примечаниях в документе. Мы помещаем примечания в теги и присваиваем атрибуту class этих тегов собственное значение specialnote, как показано в следующем коде:

Set stylesheet before html Text!

Затем мы создаем правило для этого класса specialnote, используя селектор класса, как показано в следующем коде:

styl eSheet. setStyl е(«. special note», speci al noteDecl arati onBl ock):

Как и в языке CSS, селектор класса в языке ActionScript состоит из точки, за которой указывается желаемое значение атрибута class (в нашем случае specialnote).

В листинге 27.8 представлен переработанный пример нашей предыдущей таблицы стилей, чтобы продемонстрировать использование селекторов класса CSS в языке ActionScript.

Листинг 27.8. Форматирование, применяемое к определенному классу абзаца

var specialnoteDeclarationBlock:Object = new 0bject( ): specialnoteDecl arationBlock. fontFamily = «Arial» specialnoteDeclarationBlock. fontSize = «20″: specialnoteDeclarationBlock. fontWeight = «bold»:

var stylesheet:Stylesheet = new StyleSheet( );

styleSheet. setStyle(«.speci alnote», speci alnoteDeclarati onBlock):

// Создаем текстовое поле

var t:TextField = new TextField( ):

t. width = 300:

t. wordwrap = true:

t. multiline = true;

t. styleSheet = stylesheet;

t. htmlText = »

Always remember…

«

+ »

Set styleSheet before html Text!

«

+ »

Otherwise, the stylesheet will not be applied.

«;

Результат выполнения кода из листинга 27.8 продемонстрирован на рис. 27.12. Always remember…

Set stylesheet before html Text!

Otherwise, the stylesheet will not be applied. Рис. 27.12. Форматирование, примененное к определенному классу абзаца

Форматирование тегов XML с помощью стилей CSS

Чтобы применить стиль к определенному фрагменту содержимого, мы можем создать для этого фрагмента собственный XML-тег. Например, вместо того, чтобы описывать особое примечание в виде класса абзаца (как это было сделано в предыдущем разделе), мы могли бы создать совершенно новый XML-тег, как показано в следующем коде:

Set stylesheet before htmlText!

Чтобы применить правило стиля к тегу, мы используем обычный селектор типа (без точки в начале), как показано в следующем коде:

styleSheet. setStylе(«specialnote», specialnoteDeclarationBlock);

Кроме того, чтобы указать, что поведение нашего тега должно быть аналогичным поведению абзаца, мы присваиваем переменной display в правиле значение block. В листинге 27.9 представлен весь код целиком, предназначенный для форматирования пользовательского XML-тега, при этом заслуживающие внимания отличия от нашего предыдущего кода с применением селектора класса выделены полужирным шрифтом.

Листинг 27.9. Форматирование содержимого XML с помощью таблицы стилей

var specialnoteDeclarationBlock:Object = new Object( ); specialnoteDeclarationBlock. fontFamily = «Arial» specialnoteDeclarationBlock. fontSize = «20″: specialnoteDeclarationBlock. fontWeight = «bold»: specialnoteDeclarationBlock. display = «block»:

var styleSheet:StyleSheet = new StyleSheet( ):

styleSheet. setStyle(«speci alnote», speci alnoteDecla rati onBlock);

var t:TextField = new TextField( ):

t. width = 300:

t. wordwrap = true:

t. multiline = true:

t. styleSheet = styleSheet:

t. htmlText = »

Always remember…

«

+ «Set stylesheet before htmlText!»

+ »

Otherwise, the stylesheet will not be applied.

«:

Результат выполнения кода из листинга 27.9 идентичен результату, который был проиллюстрирован на рис. 27.12.

Форматирование текста с помощью загружаемой извне таблицы стилей

Чтобы отформатировать текст с помощью загружаемой извне таблицы стилей, используйте следующую обобщенную последовательность действий.

1. Создайте таблицу стилей во внешнем CSS-файле.

2. Используйте класс URLLoader, чтобы загрузить этот CSS-файл.

3. После завершения загрузки CSS-файла создайте объект Stylesheet.

4. Используйте метод экземпляра parseCSS ( ) класса Stylesheet, чтобы импортировать правила из CSS-файла в объект Stylesheet.

5. Используйте переменную экземпляра stylesheet класса TextField, чтобы зарегистрировать объект Stylesheet в желаемом объекте TextField.

6. Присвойте требуемое содержимое HTML или XML переменной htmlText объекта TextField.

Применим перечисленные шаги на примере. Наша цель, как и раньше, — создать приложение, которое форматирует весь текст в поле, используя шрифт Arial разме-

ром 20 пунктов полужирного начертания. Как и раньше, форматируемым текстом является следующий простой фрагмент на языке HTML:

ActionScript is fun!

Сначала мы добавляем следующее CSS-правило в текстовый файл с именем styles. ess:

Р {

font-family: Arial; font-size: 20px; font-weight: bold:

}

Далее мы создаем основной класс нашего приложения StyleSheetLoadingDemo. Он использует объект URLLoader для загрузки файла styles. ess, как показано в следующем коде:

package { import flash. display.*: import flash. text.*; import flash. events.*; import flash. net.*;

public class StyleSheetLoadingDemo extends Sprite { public function StyleSheetLoadingDemo ( ) { // Загружаем файл styles. ess var urlLoader:URLLoader = new URLLoader( ); urlLoader. addEventListener(Event. COMPLETE, completeListener); urlLoader.1oad(new URLRequest(«styles. ess»));

}

private function completeListener (e:Event):void { // Код этого метода выполняется после заверения загрузки // файла styles. css

}

}

}

Когда загрузка файла styles. ess будет завершена, произойдет вызов метода completeListener ( ). Внутри этого метода мы создаем новый объект Stylesheet и импортируем в него правила из файла styles. ess, как показано в следующем коде:

private function completeListener (e:Event):void { var styleSheet:StyleSheet = new StyleSheet( ); styleSheet. pa rseCSS(e. ta rget. data);

}

Как только правила будут импортированы в объект Stylesheet, мы создаем наш объект TextField, регистрируем таблицу стилей и затем присваиваем форматируемый текст, как показано в следующем коде:

t. stylesheet = stylesheet;

t. htmlText = »

ActionScript is fun!

«;

В листинге 27.10 показан весь код целиком для класса StyleSheetLoadingDemo.

Листинг 27.10. Форматирование текста с помощью внешней таблицы стилей

package { import flash. display.*; import flash. text.*; import flash. events.*; import flash. net.*;

public class StyleSheetLoadingDemo extends Sprite { public function StyleSheetLoadingDemo ( ) { var urlLoader:URLLoader = new URLLoader( ); urlLoader. addEventLi stener(Event. COMPLETE, completeLi stener); url Loader. 1 oad(new URLRequest(«styles. ess»));

}

private function completeListener (e:Event):void { var stylesheet. Stylesheet = new StyleSheet( ); styleSheet. pa rseCSS(e. ta rget. data);

var t. TextField = new TextField( );

t. width = 200;

t. stylesheet = stylesheet;

t. htmlText = »

ActionScript is fun!

«;

addChild(t);

}

}

}

Результат выполнения кода из листинга 27.10 идентичен результату, который был проиллюстрирован ранее на рис. 27.10 и 27.11.