Первые элементы управления и темы

4.5. Альтернатива: таблицы стилей

Вся информация о стилях CSS 2 доступна для использования кнопками и в скинах.

Предложенный в CSS 3 стиль font-family: button, устанавливающий шрифт, соответствующий шрифту для <button>, можно применить так:

font-family: -moz-button;

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

button resizer scrollbarbutton_down scrollbarbutton_left 
scrollbarbutton_right scrollbarbutton_up 
scrollbargripper_horizontal scrollbargripper_vertical 
scrollbarthumb_horizontal scrollbarthumb_vertical toolbarbutton 
toolbargripper

Наконец, и здесь, и в следующих лекциях селекторы стилей и атрибуты классов, определенные для стандартных приложений Mozilla (Навигатор, почтовый клиент и т. д.) могут использоваться и другими приложениями, если это действительно нужно. Селекторы и атрибуты создают дополнительный уровень сложности поверх системы стилей. Они представляют собой набор целей приложений, к которым применяются стили. Можно использовать эти цели в дизайне приложения по своему усмотрению. Это может иметь смысл, если ваше приложение пересекается со стандартными частями классического браузера или использует дизайн любой из этих частей.

4.6. Практика: кнопки и темы для NoteTaker

В предыдущих двух лекциях мы добавили в наше приложение NoteTaker структуру размещения элементов интерфейса и основное текстовое содержимое. В этой лекции мы добавим кнопки. Наш план таков:

• сделать кнопки для операций "Сохранить" и "Отмена";
• временно сделать кнопки для операций "Редактировать" и "Ключевые слова". Далее мы научимся работать с вкладками и у нас для этих элементов управления будут особые кнопки;
• включить поддержку тем.

XUL-файл, описывающий окно приложения, над которым мы работаем - единственный файл, в который нам нужно внести существенные изменения. Необходимая правка для добавления кнопок очень проста, как видно из листинга 4.4.

<!-- change this: --> 
<text value="Cancel"/>
 <spacer flex="1"/>
 <text value="Save"/>
<!-- to this: -->
 <button label="Cancel"/>
 <spacer flex="1"/>
 <button label="Save"/>
<!-- and change this: -->
 <text value="Edit"/>
 <text value="Keywords"/>
<!-- to this: -->
 <toolbarbutton label="Edit"/>
 <toolbarbutton label="Keywords"/>

После сохранения изменений окно диалога будет похоже на снимок из рисунка 4.11. Кнопка "Ключевые слова" подсвечена, так как во время снимка над ней был указатель мыши.

Рис. 4.11. NoteTaker с кнопками

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

Глядя на рисунок 4.11, мы хотим избавиться от всех использованных нами стилей текста и, возможно, от некоторых границ блоков. Мы оставим несколько границ, просто чтобы помнить о том, что нам еще нужно сделать. Самая сложная и важная часть работы - найти соответствующие элементы управления, но мы пока знаем только о кнопках. Так что пока отложим замену всех блоков на элементы управления и просто убедимся, что у этих блоков с границами есть атрибут class="temporary", и изменим соответствующее правило стиля для отображения границ. Включения таблицы стилей в XUL-файле изменятся с

<?xml-stylesheet href="boxes.css" type="text/css"?>

на

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> 
<?xml-stylesheet href="boxes.css" type="text/css"?>

На рисунке 4.12 показан результат этой работы при отображении сначала в теме Classic, а затем в теме Modern.

Рис. 4.12. NoteTaker с поддержкой тем: темы Classic и Modern

Из рисунка 4.12 понятно, что <button>, <toolbarbutton> и <groupbox> принимают стандартный внешний вид, основанный на данных темах. Шрифты для текста также изменились.

Если этот XUL-файл установить в chrome, таблица стилей boxes.css должна находиться с ним в одном каталоге. Этого достаточно для тестирования, но не идеально, если мы хотим полноценно поддерживать темы.

Чтобы полностью поддерживать темы, требуется изменить следующую строчку в XUL-файле:

<?xml-stylesheet href="boxes.css" type="text/css"?>

на

<?xml-stylesheet href="chrome://notetaker/skin/boxes.css" type="text/css"?>

После этого мы переместим файл boxes.css в chrome вот сюда:

chrome/notetaker/skin/modern/boxes.css

Наконец, нам нужно зарегистрировать этот скин в реестре chrome, как мы регистрировали имя расширения в "Основные концепции" , "Основные концепции", и (возможно) файлы локализации в "Верстка с XUL" , "Проектирование с XUL". Это опять подразумевает создание стандартного файла contents.rdf, на этот раз в каталоге skin. В листинге 4.5 приведен текст необходимого RDF.

<?xml version="1.0"?>
<RDF
  xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
  xmlns:chrome="http://www.mozilla.org/rdf/chrome#">
  <Seq about="urn:mozilla:skin:root">
    <li resource="urn:mozilla:skin:modern/1.0" />
  </Seq>
  <Description about="urn:mozilla:skin:modern/1.0"> 
    <chrome:packages>
      <Seq about="urn:mozilla:skin:modern/1.0:packages"> 
      <li resource="urn:mozilla:skin:modern/1.0:notetaker"/>
      </Seq>
    </chrome:packages>
  </Description>
</RDF>

Опять же, чтобы понять, что весь этот RDF значит, придется заглянуть в лекции 11-17. Если мы уверены, что скин уже существует (а мы уверены в этом относительно Modern и Classic), атрибуты тега <Description> с префиксом chrome: можно опустить. Что мы здесь и сделали. В первой части файла утверждается, что существует тема modern; во второй, большей, говорится о том, что у расширения NoteTaker есть зависящая от темы информация для данной темы.

Чтобы все заработало, нужно сделать точную копию этого файла и заменить названия скинов (здесь "modern/1.0") и названия расширения (здесь "notetaker") на то, с чем вы работаете. Название "modern/1.0" включает номер версии, который объявляется в виде записей реестра приложений, описанного в "Система распространения и установки - XPInstall" , "Система распространения и установки - XPInstall". Здесь это всего лишь строчка, которую нам нужно правильно написать. Чтобы узнать ее правильное написание, следует заглянуть в файл contents.rdf в других расширениях, использующих эту тему.

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

skin,install,url,resource:/chrome/notetaker/skin/modern/

Если мы не скопируем boxes.css и contents.rdf в аналогичное место для скина Classic, нашему приложению будут недоступны стили, которые мы вынесли отдельно.

Во время тестирования, если только вы не работаете над собственно скином, проще всего хранить все css-файлы в каталоге content и перемещать таблицы стилей в каталог skin только тогда, когда нужно демонстрировать работу приложения.

Теперь окно NoteTaker начинает походить на окно приложения, а не на какой-нибудь набросок. Мы пока не можем добавлять другие элементы управления по двум причинам: во-первых, наши знания об элементах управления XUL еще ограничены, а во-вторых, мы еще не определились, с какими данными должны иметь дело эти элементы управления.

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