spbcypher Sep 27 2011 at 15:38

Dojo-виджет своими руками

3 min

2.9K

Доброго времени суток всем читателям! В данном топике я поделюсь своим опытом создания виджетов на Dojo на примере числового LED-индикатора (часов, таймера и пр.). Я не буду углубляться в историю создания фреймворка и теорию — топик носит практический характер.
Итак, начнём.

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

    dojo.declare(
      'имя класса',
      [родитель1,родитель2,...],
      {
        свойства/методы
      }
    );

Наш виджет будет наследовать два класса — базовый dijit._Widget и dijit._Templated, назначение которого состоит в создании DOM-узла из шаблона, определённого в данном случае в параметре
templateString.
Класс dijit._Widget предоставляет несколько специальных методов (с их списком вы можете ознакомиться здесь), мы воспользуемся методом postCreate, вызываемом после создания виджета и переопределим его.

        postCreate : function () {
            this.digits = dojo.query('.digit', this.containerNode);
            this.render();
        },

В этом методе мы запоминаем коллекцию узлов, содержащихся в containerNode (значение атрибута dojoAttachPoint) с классом digit (элементы span, которые и будут отображать цифры) и вызываем пользовательский метод render.
Метод render вызывается каждый раз при изменении значения индикатора (метод setValue). В нём мы проходим по сохранённой коллекции узлов и назначаем каждому элементу соответствующий класс (digit_0, digit_1,… digit_9). Реализация метода не нуждается в детальном пояснении, поэтому приведу полный код виджета:

    dojo.declare(
      'LedIndicator',
      [dijit._Widget,dijit._Templated],
      {
        currentValue : '000000',
        templateString: "<div>" + 
        '<span class="led" dojoAttachPoint="containerNode">' + 
        '<span class="digits"><span class="digit"></span><span class="digit"></span></span>' + 
        '<span class="digits"><span class="digit"></span><span class="digit"></span></span>' + 
        '<span class="digits"><span class="digit"></span><span class="digit"></span></span>' + 
        "</div>" ,
        postCreate : function () {
            this.digits = dojo.query('.digit', this.containerNode);
            this.render();
        },
        render : function () {
            var i = 0;
            var dc = Math.min(this.digits.length, this.currentValue.length);
            this.digits.removeClass();
            for (i=0; i < dc; i++) {
                dojo.addClass(this.digits[i],'digit_'+this.currentValue.charAt(i));
            }
        },
        setValue : function (value) {
            this.currentValue = value;
            this.render();
        }
      }
    );

На этом пожалуй всё, теперь мы можем создать экземпляр виджета с помощью разметки

<div dojoType="LedIndicator" id="led_1" class="led"></div>

Я не буду приводить CSS — как вы наверное уже догадались, у всех узлов коллекции один бэкграунд с цифрами, но по разному спозиционированный.

Заключение

Есть два пути создания виджета для Dojo — декларативный и программный.

Декларативный метод заключается в создании виджета из HTML-разметки. Его преимущество — простота и скорость разработки, недостаток — сканирование DOM-дерева существенно снижает скорость загрузки объёмных страниц. Таким образом, декларативный метод может оказаться весьма полезным при прототипировании веб-приложения, в рабочей же версии рекомендуется использовать программный метод.
Немного об этих методах вы можете найти здесь.

Статья не претендует на полноту и гениальность, но тем не менее, надеюсь она будет вам полезна.

Hubs:

JavaScript