Часть 5. Создаем скин для тулбара

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

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

Обновляем структуру файлов

Для начала мы должны создать папку, в которой будут храниться все файлы, относящиеся к скину. Эту папку нужно назвать skin и поместить в папку chrome. Теперь дерево файлов выглядит так:

+- GBLTutorial/
   +- install.rdf
   +- chrome/
      +- content/
         +- contents.rdf
         +- gbltutorial.xul
         +- gbltutorial.js
      +- skin/

Убедитесь, что папка skin находится на том же уровне, что и папка content. Теперь, когда мы имеем папку для хранения файлов скина, нужно отметить (... эй, на седьмом ряду с портвейном! наливай! — прим. пер.)... нет, зарегистрировать этот факт в декларации установки (install manifest).

Обновляем декларацию установки

Вспомните декларацию установки из раздела 2. Этот файл отвечает за регистрацию всех необходимых путей chrome, а также за исполнение различных заданий установки. Давайте взглянем на часть этого файла, где регистрируются пути chrome:

<em:file>
  <Description about="urn:mozilla:extension:file:gbltutorial.jar">
    <em:package>content/</em:package>
  </Description>
</em:file>

Единственный путь, зарегистрированный в этом примере — папка content. Для того, чтоб использовать созданную папку skin, ее нужно тоже зарегистрировать, вот так:

<em:file>
  <Description about="urn:mozilla:extension:file:gbltutorial.jar">
    <em:package>content/</em:package>
    <em:skin>skin/</em:skin>
  </Description>
</em:file>

На этот раз, вместо элемента em:package мы используем em:skin. Не забудьте прямой слэш после слова skin — он указывает, что речь идет о папке, а не о файле.

Второй файл contents

Дальше нам надо создать файл contents для папки skin (как мы это уже делали для папки content во втором разделе). Соответственно, делаем файл contents.rdf в папке skin. Файл имеет следующее содержание:

<?xml version="1.0"?>
<RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
         xmlns:chrome="http://www.mozilla.org/rdf/chrome#">

   <RDF:Seq about="urn:mozilla:skin:root">
      <RDF:li resource="urn:mozilla:skin:classic/1.0" />
   </RDF:Seq>

   <RDF:Description about="urn:mozilla:skin:classic/1.0">
      <chrome:packages>
         <RDF:Seq about="urn:mozilla:skin:classic/1.0:packages">
            <RDF:li resource="urn:mozilla:skin:classic/1.0:gbltutorial" />
         </RDF:Seq>
      </chrome:packages>
   </RDF:Description>

</RDF:RDF>

Синтаксис для этого файла тот же, что и для файла contents.rdf из раздела 2, так что не будем повторяться. Нам нужно только добавить имя нашей сборки (package) после "classic/1.0" — и можно приступать к созданию стилей для тулбара.

Добавляем картинки

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

Все эти картинки мы складываем в папку skin.

Применяем изображения при помощи CSS

Теперь нужно добавить изображения к нашим кнопкам. Для этого мы воспользуемся каскадными таблицами стилей (CSS) — замечательной технологией, применяемой для хранения информации о стилях. Если вы не знакомы с CSS, очень рекомендую почитать W3Schools' CSS Tutorial — он научит всем тонкостям этого великолепного механизма описания стилей.

Как и все предыдущие файлы (за вычетом картинок, разумеется), файл CSS — это простой текстовый файл. Все файлы CSS мы будем хранить в папке skin, вместе с картинками. Давайте придумаем простое имя для нашего CSS файла, например tut_overlay.css, и посмотрим, как выглядит дерево файлов на данном этапе работы:

+- GBLTutorial/
   +- install.rdf
   +- chrome/
      +- content/
         +- contents.rdf
         +- gbltutorial.xul
         +- gbltutorial.js
      +- skin/
         +- contents.rdf
         +- tut_main.gif
         +- tut_combined.gif
         +- tut_web.gif
         +- tut_image.gif
         +- tut_overlay.css

Перед тем, как я начну объяснять что-либо про этот файл, взгляните на его содержание:

#GBLTut-MainMenu {
    list-style-image: url("chrome://gbltutorial/skin/tut_main.gif");
}

#GBLTut-TB-Web,
#GBLTut-TB-Combined-Web {
    list-style-image: url("chrome://gbltutorial/skin/tut_web.gif");
}

#GBLTut-TB-Combined-Image {
    list-style-image: url("chrome://gbltutorial/skin/tut_image.gif");
}

#GBLTut-TB-Combined {
    list-style-image: url("chrome://gbltutorial/skin/tut_combined.gif");
}

#GBLTut-TB-Combined > .toolbarbutton-menubutton-button {
    -moz-box-orient: horizontal;
}

Тут все как обычно просто. Вспомните раздел 3: создавая кнопки тулбара, мы назначали им ID — "GBLTut-MainMenu", "GBLTut-TB-Web" и так далее. Соответственно, в таблице стилей мы используем селекторы ID (таким селекторам предшествует знак #решетки), чтоб обозначить правило для каждого элемента. Обратите внимание, что второе правило применяется к двум элементам, их ID разделены запятыми.

Чтоб установить каждое изображение, мы используем свойство CSS list-style-type. В этом свойстве мы указываем chrome-путь до картинк, которая нам нужна. Например, в правиле для кнопки "GBLTut_MainMenu" мы передаем chrome-путь до файла tut_main.gif. Напомню, как задается chrome-путь:

chrome://<packagename>/skin/<image_filename>

Приведенные выше правила сразу добавят картинки для элементов toolbarbutton. А вот элементы menuitem не такие сговорчивые. Сначала надо сообщить Firefox'у, к каким пунктам меню мы хотим добавить иконки. Помните загадочный атрибут class, который мы использовали в одном из элементов menuitem в разделе 3?

class="menuitem-iconic"

Этот атрибут указывает FireFox'у, какой класс CSS мы хотим применить для этого конкретного пункта меню. Вы наверно заметили, что в нашем CSS нигде не упомянут класс "menuitem-iconic". Конечно, мы можем создавать собственные классы, но в данном случае мы используем встроенный класс Firefox. Класс "menuitem-iconic" позволяет связывать иконку с пунктом меню — как раз то, что нам нужно.

Последнее правило в приведенной выше таблице стилей устанавливает свойство -moz-box-orient в "horizontal". Благодаря этому правилу, у кнопок "кнопка-меню" текстовый лэйбл будет располагаться справа от картинки, а не под ней. Вам оно может и не понадобится, но вообще — не повредит использовать это свойство для всех кнопок "кнопка-меню".

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

-moz-appearance: none;

Оно указывает, что нужно выключить все умолчательные настройки стиля элемента, которые обычно применяет FireFox. Тогда стиль по умолчанию применяться не будет, и вы сможете управлять любыми свойствами. Есть и другие специфичные только для мозиллы свойства стилей — ищите их на XUL Planet.

Таблицу стилей мы создали, теперь надо сообщить об этом XUL файлу.

Применяем таблицу стилей

Для этого нам понадобится разместить в XUL файле (gbltutorial.xul) всего лишь одну строчку кода. Она должна располагаться прямо перед объявлением директивы XML:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://gbltutorial/skin/tut_overlay.css"
                 type="text/css"?>

Эта строка указывает chrome-путь до нашего CSS-файла. Атрибут type просто сообщает обработчику, что файл, на который мы ссылаемся — это CSS. В результате таблица стилей станет доступна нашему расширению, и ее правила будут применены к соответствующим элементам. А вот как теперь выглядит наш XUL-файл: [XUL, Вариант 7].