Списки и Деревья

13.4 Возможности стилевого оформления

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

13.4.1 Тег <listbox>

Система списков в Mozilla не имеет дополнений, отличных от системы стилей CSS2. Но она, однако, имеет множество стилевых правил и тегов, к которым эти правила применимы. Правила можно посмотреть в файле xul.css в toolkit.jar и в listbox.css глобальной темы (т.е. в classic.jar). Все эти файлы находятся в каталоге chrome.

13.4.2 Тег <tree>

Язык XUL имеет одну дополнительную характерную функциональность. Эта функциональность используется для оформления деревьев, которые оформляются не так, как все иные теги. Тело данного дерева, описанное как тег <treechildren>, может быть оформлено прямо из селектора тега <treechildren>. Такую возможность дают стилевые расширения. Оформление реализуется с помощью новых псевдо-классов. Вот пример стиля дерева, изображающего граф персонала компании. Если служащий был нанят недавно, то строка с его или ее информацией подсвечена желтым:

treechildren:-moz-tree-row(hired) { background-color : yellow };

Псевдо-класс -moz-tree-row указывает то, что должно быть оформлено, в данном случае строку дерева. Этому селектору передается список из нуля или более параметров. Каждый из параметров - текстовая строка. Эта же текстовая строка может быть в числе аргументов ключевого слова properties. Например,

<row properties="hired,causeNewDept,dateJune">...</row>

Любая и каждая из строк дерева, имеющая в property аргумент hired будет оформлена согласно данному правилу, в том числе строка из нашего примера. Если правило будет выглядеть так:

treechildren:-moz-tree-row(hired,dateJuly) { background-color : yellow };

Тогда строка не будет оформлена, потому что она не содержит обоих свойств, перечисленных в правиле.

Чтобы встроенные в систему стили работали, требуются три части информации:

1. Должно быть выбрано имя правильного псевдо-класса.
2. Нужно найти имя подходящего свойства.
3. ****

13.4.2.1 Псевдо-классы деревьев

Таблица 13.6 перечисляет псевдо-селекторы дерева, которые являются дополнением Mozilla к стандарту CSS2.

13.4.2.2 Встроенные имена свойств

CSS2 использует зарезервированные ключевые слова, а не произвольные строки для большинства целей. Важно помнить, что свойства в стилевом оформлении дерева - наоборот, просто произвольные строки, назначаемые разработчиком приложения. Они зависят от приложения и не имеют специального значения в стилевой системе.

Некоторая работа по именованию свойств все же проделана. Специальные имена свойств автоматически присваиваются содержанию дерева в момент его создания и когда вы с ним взаимодействуете. Эти имена, тем не менее, ничего не означают в системе стилей. Они имеют смысл только для использования в определенных пользователем псевдо- селекторах. Эти имена автоматически добавляются к списку свойств Mozilla и могут быть выбраны точно так же, как и свойства, определенные самим пользователем. Таблица 13.7 перечисляет их.

Вспомним, что в простой древовидной структуре есть два вида узлов, или нод. А именно, внутренние ноды, содержащие другие ноды, и листья, содержащие данные. Узлы в деревьях XUL либо внутренние, либо листья, но не то и другое вместе.

Существует вторая группа автоматически доступных свойств. Все id всех колонок дерева доступны тем же методом, что и свойства строк. Нужно только следить, чтобы эти id были правильными именами в смысле CSS2.

Несмотря на то, что встроенные свойства можно использовать, вы вправе придумать собственные.

13.4.2.3 Соответствующие свойства CSS

Третий аспект этой особенной стилевой системы довольно хитрый. Каждый из псевдо-классов поддерживает лишь небольшое число стилевых свойств CSS2. Если выбрать неподдерживаемое свойство, ожидаемого эффекта не будет. В таблице 13.8 описывается, какие свойства CSS2 доступны для каждого псевдо-класса.

Совмещая таблицы 13.6, 13.7, и 13.8, получим следующий пример, содержащий только имена, присвоенные Mozilla:

treechildren:-moz-tree-cell(leaf,focus) { background-color : red; }

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

13.4.3 Встроенная поддержка тем

Вплоть до версии 1.4 в деревьях не реализована встроенная поддержка тем на платформе Microsoft Windows XP. Если бы темы поддерживались, стилевое свойство -moz-appearance могло бы иметь следующие значения:

listbox listitem treeview treeitem treetwity treetwistyopen 
treeline treeheader treeheadercell treeheadersortarrow