684 Инструмент Dojo обладает удивительным UI фреймворком, называемым Dijit.
Dijit — это обширный набор виджетов Dojo, позволяющий создавать весьма тематические, функциональные формы, макеты и многое другое. С точки зрения разработчика, одним из достоинств Dijit, является создание виджетов двумя способами: декларативно и программно.
Цель поста показать вам примеры использования каждого виджета и анализ преимущества создания тем или иным способом.
Требуемые классы
Не зависимо от того, будете ли вы создавать виджеты программно или декларативно, для начала вам нужно указать необходимые виджет классы:
|
1 2 3 |
dojo.require('dijit.form.FilteringSelect'); dojo.require('dijit.layout.TabContainer'); dojo.require('dijit.layout.ContentPane'); |
Как только объявили необходимые классы, приступаем к созданию! Например, не плохой вариант сделать парочку виджетов на Apple MacBook Pro понравился тем, что просто идеален для профи.
Способ первый: Создание виджетов декларативным методом
Под «декларативностью» подразумевается создание виджетов с использованием HTML верстки с атрибутами, чтобы описать какой элемент должен стать виджетом.
Во-первых, чтобы декларативно создать виджет, нужно распарсить страницу в поисках Dojo виджетов. Есть два варианта, как это сделать: первый — настроить djConfig переменные для свойства parseOnLoad:
|
1 |
<script src="/js/dojo.js" djConfig="parseOnLoad:true;"></script> |
parseOnLoad в точности делает то, что нам нужно: парсит страницу в поисках виджетов, как только загрузятся все элементы и DOM. Второй вариант, самому парсить страницу:
|
1 2 3 4 5 6 7 |
//load the parser dojo.require('dojo.parser'); //parse the page dojo.ready(function() { dojo.parser.parse() }); |
Вот теперь можно приступить к созданию Dijit виджетов с помощью верстки. Атрибут dojoType нужен для объявления типа Dijit виджета элемента:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!-- turn a select into a "FilteringSelect" --> <select dojoType="dijit.form.FilteringSelect"> <option value="value1">Key 1</option> <!-- more options here --> </select> <!-- create a layout widget --> <div dojoType="dijit.layout.TabContainer"> <div dojoType="dijit.layout.ContentPane"><!-- content 1 here --></div> <div dojoType="dijit.layout.ContentPane"><!-- content 2 here --></div> <div dojoType="dijit.layout.ContentPane"><!-- content 3 here --></div> </div> |
Бум! DOM готов, ресурсы загружены, элементы с атрибутами dojoType включены в виджеты. Опции виджетов могут быть добавлены, как различные атрибуты ключей и значений:
|
1 2 3 4 5 6 7 8 9 10 11 |
<!-- turn a DIV into a "FilteringSelect"; options will come from data store --> <div dojoType="dijit.form.FilteringSelect" store="optionsStore" searchAttr="val"> <!-- options come from a data store --> </div> <!-- create a layout widget; contentpane has custom attributes for JS --> <div dojoType="dijit.layout.TabContainer"> <div dojoType="dijit.layout.ContentPane" closable="true" href="somepage.php" preload="true"> <!-- content 1 here --> </div> </div> |
Не сладко? Подумайте, сколько вы можете сэкономить времени, внедряя виджет типы и опции в пределах самих элементов.
Способ второй: Создание виджетов программно
Чтобы создать виджет программно, вы создаете DOM ноды, которые будут работать в качестве заполнителя для будущего виджета:
|
1 |
<button id="makeMeAWidget">Click Me</button> |
После того, как загрузятся DOM и все зависимые элементы, вы должны явно указать JavaScript, чтобы включить HTML элементы в виджет.
|
1 2 3 4 5 |
//when dependencies are loaded... dojo.ready(function() { //...make elements into widgets var widget = new dijit.form.Button({},'makeMeAWidget'); //options,elementID }); |
Вместо того, чтобы вручную назначать виджеты элементам, вы можете использовать dojo.behavior, чтобы найти элементы по селекторам и завиджитировать их:
|
1 2 3 4 5 6 7 |
dojo.behavior.add({ 'button': { found: function(button) { new dijit.form.Button({},button); //options,elementID } } }) |
Dojo нашел все элементы по выбранным селекторам и виджитнул их.
Что лучше?
Есть несколько вещей, которые нужно отметить:
- Программный способ создания быстрее, потому что не нужно чистить DOM, чтобы найти элементы для виджетов.
- Декларативный способ позволяет вам кодировать быстрее. Но если у вас маленькая страница, то разница между быстротой создания виджетов этими способами очень мала.
Как программно создать и разместить dijit.form.Form и поместить в неё контролы?