Создание тулбара для Mozilla FireFox - часть 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” — и можно приступать к созданию стилей для тулбара.
Добавляем картинки
Всего у нас пять кнопок, при этом для простого веб-поиска будет использована одна и та же картинка и в выпадающем меню, и на простой кнопке — итого нам понадобятся четыре картинки:
- Картинка 1 (tut_main.gif): кнопка главного меню
- Картинка 2 (tut_combined.gif): кнопка комбинированного поиска
- Картинка 3 (tut_web.gif): Кнопка простого веб-поиска
- Картинка 4 (tut_image.gif): Кнопка поиска по картинкам
Все эти картинки мы складываем в папку 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. В результате таблица стилей станет доступна нашему расширению, и ее правила будут применены к соответствующим элементам.
