Темы

Темы в библиотеке Dijit – это целостная коллекция правил CSS, применяемых ко всему набору виджетов. Можно даже сказать, что виджеты из библиотеки Dijit поддерживают возможность смены скинов («шкур»), где темы играют роль используемых скинов. Если необходимо быстро взять несколько виджетов и поместить их на страницу, особенно удобно использовать темы, потому что при разработке не нужно беспокоиться о CSS. Начиная с версии 1.1 инструментарий Dojo включает три готовые и достаточно привлекательные темы:
Tundra
Преобладающими являются светлосерые и светлосиние тона, а название тема получила в честь ландшафта Арктики.
Soria
Преобладающими являются синие оттенки. Элементы управления решены в глянце и лоске стиля «Web 2.0 sheen». Гамма этой темы навеяна оттенками синего неба на фотографиях, сделанных в Испании, в провинции Soria.
Nihilo
Преобладающими являются белый с мягкими серыми контурами, с сероватосиним текстом. В некоторых элементах управления используются желтоватые оттенки в качестве выделяющего цвета. Ходят слухи, что побудительным мотивом к созданию этой темы стала концепция ex nihilo (из ничего) (создать чтото из ничего), целью которой является обеспечение минималистской элегантности – с некоторым трудом, но вы ее обнаружите.


В исходных текстах инструментария можно найти средство тестирования тем dijit/themes/themeTester.html, которое отображает некоторые диджиты с применением выбираемой вами темы. Рассмотреть темы на экране – лучший способ составить себе представление о них, так как чернобелые страницы книги не смогут передать вам впечатление от них.
Структура каталогов с темами следует шаблону, что приводится ниже, но при этом каждый основной файл CSS содержит инструкции @import, которые подключают другие файлы CSS, являющиеся частями общего дизайна (инструменты сборки объединяют файлы CSS, поэтому пользователю доставляется только один файл, что минимизирует задержки при передаче ресурсов по протоколу HTTP):
themes/
tundra/
tundra.css
images/
комплект статических изображений
soria/
soria.css
images/
комплект статических изображений
nihilo/
nihilo.css
images/
комплект статических изображений
<здесь, следуя тому же шаблону, могут располагаться ваши собственные темы...>

В примере 11.1 выделены те части страницы, которые имеют отноше
ние к теме.
Пример 11.1. Использование темы


Fun With the Themes!

href="http://o.aolcdn.com/dojo/1.1/dojo/resources/dojo.css" />
href="http://o.aolcdn.com/dojo/1.1/dijit/themes/tundra/tundra.css" />
type="text/javascript"
src="http://o.aolcdn.com/dojo/1.1/dojo/dojo.xd.js"
>


(body class="tundra")

(/body)


Обратите внимание, насколько просто использовать тему – для этого достаточно подключить таблицу стилей и применить соответствующее имя класса к тегу BODY, хотя точно так же можно было бы применить имя класса к любому другому тегу на странице, если у вас есть веские причины варьировать стиль страницы.


Темы допускается применять к любому произвольному элементу страницы, ко всей странице, к конкретному тегу DIV или к определенному виджету. В этом примере также производится подключение файла dojo.css, который содержит некоторый базовый стиль.

Переключение темы также выполняется очень просто – достаточно лишь заменить все ссылки на тему tundra ссылками на тему soria или nihilo. Проще не придумаешь.

Мы не будем углубляться в изучение тем, потому что это всего лишь система хорошо продуманных правил CSS и, несмотря на то, что темы играют важную и положительную роль в обеспечении эффективности библиотеки Dijit, они не являются необходимой частью текущего обсуждения. Однако, если вы заинтересовались вопросом использования тем, вооружитесь хорошим справочником по CSS и начните изучать содержимое различных файлов CSS. В них вы увидите такие определения, как .tundra.dojoButton { /* здесь находится определение стиля */}, которые достаточно легко читаются и без труда обнаруживаются в файлах шаблонов библиотеки Dijit или в страницах при помощи Firebug..



Оцените статью: (0 голосов)
0 5 0

Статьи из раздела Dojo на эту тему:
WAI-ARIA
Библиотека Dijit для дизайнеров
Диджиты приложения
Диджиты размещения
Диджиты форм

Вернуться в раздел: Dojo / Обзор Dijit