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

4.7. Отладка: обнаружение ошибок в работе кнопок и скинов

Для создания темы вам может понадобиться более глубокое понимание того, как кнопки (или любые другие элементы управления) работают со стилями. Таблица 4.1 помогает понять структуру системы стилей, но это очень общий пример. Существует возможность отслеживать самую важную информацию о стилях для элемента управления XUL напрямую. Вот как это делается для тега <button>. Эту же методику можно применить и ко многим другим тегам.

Прежде всего, нужно взглянуть на файл xul.css. Его URL: chrome://global/content.css, но лучше всего найти его в файле toolkit.jar в chrome и скопировать оттуда. В этом файле находятся одно или несколько правил стилей для каждого XUL-тега. Нас интересует свойство стиля -moz-binding. Для тега <button> оно выглядит так:

-moz-binding: 
url("chrome://global/content/bindings/button.xml#button");}

Этот URL указывает на XBL-файл, который также находится в toolkit.jar. Вам не нужно знать XBL, чтобы понимать информацию о стиле. Конечная часть этого URL, #button - имя XBL-связки. Совершенно случайно оно совпадает с именем тега, <button>, но очевидно, что это сделано всего лишь для удобства.

Если скопировать из архива упомянутый файл button.xml, затем можно найти тег <binding> с атрибутом id="button". В этом теге будет заключаться тег <resources>, а в нем будет находиться тег <stylesheet>. Этот тег <stylesheet> определяет таблицу стилей для элемента управления <button>, и это скин. Его можно прочитать, открыв любой JAR-архив с именем темы, например, classic.jar или modern.jar, так как во всех хорошо написанных темах предоставляются эти стандартные скины.

Второй сложный вопрос таков: отображаемая кнопка (или другой элемент управления) использует системную тему или нет? В сущности, это не особенно важно, если только вы не рассматриваете полосы прокрутки. У полос прокрутки есть отдельный тег <nativescrollbar>, который используется, когда весь элемент управления должен отображаться в соответствии с системной темой. Если вы действительно хотите знать, применяется ли тема графической среды к вашему элементу управления, проверьте значение свойства -moz-appearance в таблице стилей или с помощью JavaScript. Например, это правило стиля окрашивает в красный цвет все кнопки, использующие системные темы:

button[-moz-appearance="button"] { background-color:red; }

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

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

Во-первых, попробуйте запустить приложение с явно указанными таблицами стилей, а не стилями. Так можно проверить, согласовано ли содержимое таблицы стилей с XUL-кодом. Если вместе они работают корректно, вероятнее всего, XUL-часть приложения в порядке. Проверьте исходный порядок включения скинов в XUL-файлы. Глобальный скин должен идти первым; затем следуют все скины, специфичные для приложения; последними должны идти особые таблицы стилей, не связанные со скинами. Если и в случае явно указанных таблиц стилей работа некорректна, нужно убедиться с помощью Инспектора DOM, что вы все правильно делаете со стилями, идентификаторами и классами.

Если кажется, что все в порядке, вероятнее всего, проблема в содержимом файла contents.rdf. Здесь очень легко допустить синтаксические ошибки. Простой способ убедиться, что этот файл корректно читается - проверить содержимое файла chrome.rdf в корневом каталоге chrome.

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

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

4.8. Итоги

Язык XUL в Mozilla богат разными элементами управления, и тег <button> - простейший из них. Так как понятие кнопки широко распространено, существует множество разных ее вариантов, которые следует принять во внимание. <button> и <toolbarbutton> соответствуют большинству требований. Хотя возможности кнопки делают ее уникальной, для пользователей очень важен и внешний вид. Кнопка должна и выглядеть, и реагировать как кнопка.

Внешний вид напрямую связан с темами. Основой для тем в Mozilla является технология таблиц стилей CSS 2 плюс несколько хитростей с изменениями URL. Темы применяются к каждому окну XUL-приложения, и каждое окно использует один или несколько скинов данной темы. Скин - это всего лишь набор документов, определяющих стили, которые следуют концепциям дизайна темы плюс несколько связанных со стилями файлов.

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

Один из аспектов системы таблиц стилей, который снова возвращает нас к кнопкам и элементам управления - расширение -moz-appearance. Это расширение позволяет XUL-тегу отображаться в соответствии с правилами системной темы, то есть текущей темы графической среды. Благодаря атрибуту -moz-appearance система стилей Mozilla становится частично прозрачной для системных тем. Эта система работает только для тех XUL-тегов, которые совпадают с системными элементами управления. Эта поддержка реализована в теме Classic, но может быть и в любой другой теме.

Кнопки - лишь первые из многих XUL-тегов для элементов управления в Mozilla. Перед изучением остальных тегов необходимо понять, как заставить тег <button> что-нибудь делать. Для этого нам понадобятся скрипты. Скрипты и язык JavaScript описываются в следующей лекции.