Создание Dojo виджетов программно и декларативно

Инструмент Dojo обладает удивительным UI фреймворком, называемым Dijit.

Dijit — это обширный набор виджетов Dojo, позволяющий создавать весьма тематические, функциональные формы, макеты и многое другое. С точки зрения разработчика, одним из достоинств Dijit, является создание виджетов двумя способами: декларативно и программно.

Цель поста показать вам примеры использования каждого виджета и анализ преимущества создания тем или иным способом.

Требуемые классы

Не зависимо от того, будете ли вы создавать виджеты программно или декларативно, для начала вам нужно указать необходимые виджет классы:

Как только объявили необходимые классы, приступаем к созданию! Например, не плохой вариант сделать парочку виджетов на Apple MacBook Pro понравился тем, что просто идеален для профи.

Способ первый: Создание виджетов декларативным методом

Под «декларативностью» подразумевается создание виджетов с использованием HTML верстки с атрибутами, чтобы описать какой элемент должен стать виджетом.

Во-первых, чтобы декларативно создать виджет, нужно распарсить страницу в поисках Dojo виджетов. Есть два варианта, как это сделать: первый — настроить djConfig переменные для свойства parseOnLoad:

parseOnLoad в точности делает то, что нам нужно: парсит страницу в поисках виджетов, как только загрузятся все элементы и DOM. Второй вариант, самому парсить страницу:

Вот теперь можно приступить к созданию Dijit виджетов с помощью верстки. Атрибут dojoType нужен для объявления типа Dijit виджета элемента:

Бум! DOM готов, ресурсы загружены, элементы с атрибутами dojoType включены в виджеты. Опции виджетов могут быть добавлены, как различные атрибуты ключей и значений:

Не сладко? Подумайте, сколько вы можете сэкономить времени, внедряя виджет типы и опции в пределах самих элементов.

Способ второй: Создание виджетов программно

Чтобы создать виджет программно, вы создаете DOM ноды, которые будут работать в качестве заполнителя для будущего виджета:

После того, как загрузятся DOM и все зависимые элементы, вы должны явно указать JavaScript, чтобы включить HTML элементы в виджет.

Вместо того, чтобы вручную назначать виджеты элементам, вы можете использовать dojo.behavior, чтобы найти элементы по селекторам и завиджитировать их:

Dojo нашел все элементы по выбранным селекторам и виджитнул их.

Что лучше?

Есть несколько вещей, которые нужно отметить:

  • Программный способ создания быстрее, потому что не нужно чистить DOM, чтобы найти элементы для виджетов.
  • Декларативный способ позволяет вам кодировать быстрее. Но если у вас маленькая страница, то разница между быстротой создания виджетов этими способами очень мала.


Один комментарий на “Создание Dojo виджетов программно и декларативно

  1. Как программно создать и разместить dijit.form.Form и поместить в неё контролы?

    Thumb up 0 Thumb down 0

Оставить комментарий