Диджит HelloWorld (Дубль 1: Основа)

В первой попытке создания диджита HelloWorld будет полностью создано тело каждого компонента. Для краткости и ясности во всех последующих итерациях будут описываться только те части компонентов, которые будут подвергаться изменениям. Относительно структуры каталогов на диске предполагается, что главный файл HTML, включающий виджеты, находится в одном каталоге с каталогом модуля dtdg, где содержится программный код реализации виджета.

Страница HTML
Сначала рассмотрим страницу HTML, содержащую диджит, которая приводится в примере 12.2. Подробные комментарии, присутствующие в странице, достаточно ясно объясняют ее.
Пример 12.2. HelloWorld (Дубль 1)


Hello World, Take 1

type="text/javascript"
src="http://o.aolcdn.com/dojo/1.1/dojo/dojo.xd.js"
djConfig=isDebug:true,parseOnLoad:true,baseUrl:'./',
modulePaths:{dtdg:'dtdg'}">

Не забывайте, что, если вы не используете версию сборки AOL XDomain, вам следует указать ссылку на свой локальный файл dojo.css.
-->
rel="stylesheet"
type="text/css"
href="http://o.aolcdn.com/dojo/1.1/dojo/resources/dojo.css">
rel="stylesheet"
type="text/css"
href="dtdg/themes/hello/hello.css">








То, что вы только что увидели, является тем минимумом, который должен присутствовать в любой странице, содержащей диджит.


Здесь присутствуют ссылки на все необходимые таблицы стилей, улучшающие внешний вид диджитов, обычная ссылка на библиотеку Base, которая выполнит самонастройку Dojo, и далее инструкции dojo.require, явно выполняющие загрузку парсера и диджита HelloWorld, который используется в теле страницы. Из всего этого единственный момент, требующий особого внимания, – правильное указание пути к каталогу, в котором находится модуль dtdg, в параметре djConfig.modulePaths.

CSS
Стиль отображения виджета определяется простой каскадной таблицей стилей CSS и дополнительными статическими ресурсами, такими как файлы изображений. Однако следует понимать, что фактический стиль диджита определяется в его шаблоне, а не в элементе DOM, где указывается атрибут dojoType. Это добавляет элегантности в реализацию, так как, по сути, обеспечивает возможность применения к диджиту различных стилей или, выражаясь терминологией Dojo, обеспечивает возможность определять темы для диджита и изменять эти темы, с помощью таблицы стилей.

В нашем примере для отдельного элемента DIV используется очень простой стиль, но он наглядно демонстрирует, как можно применять стили к диджитам.


Наша тема HelloWorld состоит из единственного файла CSS, который содержит следующее определение стиля:
div.hello_class {
color: #009900;
}

Шаблон
Как и стиль, шаблон HTML диджита HelloWorld содержит самый минимум. Этот шаблон предписывает Dojo взять указанный тег DIV, находящийся в нашей странице HTML, и заменить его тем, что находится в шаблоне, – в данном случае шаблон просто содержит другой элемент DIV, к которому применен некоторый стиль и в котором содержится текст «Hello World».

Фактически файл шаблона содержит всего лишь следующую строку:
Hello World


JavaScript
При первом взгляде на программный код JavaScript создается впечатление, что он слишком объемный, однако большую его часть составляют подробные комментарии. Мы попрежнему используем только самые основные конструкции, которые уже рассматривали ранее, и, изучив листинг, вы убедитесь, что в нем нет ничего сложного. Итак, рассмотрите листинг, что приводится ниже, а затем мы перечислим, что в нем имеется. Вы можете заметить, что файл JavaScript – просто стандартный модуль:
//Описание: Пример диджита HelloWorld, демонстрирующий основные
//принципы создания диджитов Dojo
//Первая строка любого модуля должна содержать инструкцию dojo.provide,
//определяющую ресурс и принадлежность к родительским модулям.
//Имя ресурса должно совпадать с именем файла .js.
dojo.provide("dtdg.HelloWorld");
//Всегда подключайте необходимые ресурсы, прежде чем использовать их.
//Нам потребуются следующие два ресурса, потому что они являются
//частью иерархии наследования нашего диджита.
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
//Богатый возможностями конструктор, позволяющий объявлять "классы" Dojo.
dojo.declare(
"dtdg.HelloWorld", //dijit._Widget – это предок прототипа, который обеспечивает
//важные методызаглушки, часть которых используется ниже.
//dijit._Templated – это подмешиваемый класс, переопределяющий
//метод buildRendering класса dijit._Widget, который создает
//визуальное представление диджита из шаблона.
[dijit._Widget, dijit._Templated],
{
//Путь к шаблону этого диджита.


Класс dijit._Templated использует
//его для получения шаблона в виде указанного файла посредством
//выполнения синхронного вызова.
templatePath: dojo.moduleUrl("dtdg", "templates/HelloWorld.html")
}
);

В цепочке наследования класс _Widget является предком прототипа, который должен наследовать наш диджит, чтобы действительно стать диджитом. Поскольку это самый первый пример, мы не будем переопределять какиелибо методы управления жизненным циклом класса _Widget, но в последующих примерах эти методы будут переопределяться. Подмешиваемый предок, класс _Templated, реализует функциональные возможности работы с шаблонами, переопределяя метод buildRendering класса _Widget. Фактический шаблон определяется свой ством templatePath. Использование свойства templatePath вместо templateString влечет за собой дополнительный синхронный вызов сервера, однако полученный шаблон помещается в кэш, что позволяет избежать необходимости выполнять другие синхронные вызовы, если на той же странице будут присутствовать другие диджиты HelloWorld.

При выполнении этот пример просто выводит текст сообщения на экран, однако внутри происходит гораздо больше событий, чем неявный вызов инструкции print.


Более того, для создания диджита Hello World требуется приложить лишь самый минимум усилий, намного меньше, чем при создании любого другого диджита.

Давайте закрепим ваши знания, полученные ранее, и переопределим некоторые методы, чтобы расширить возможности диджита. Но вместо того чтобы идти напрямик, мы пойдем обходным путем. В конце концов, какой другой путь лучше способствует обучению?

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

Статьи из раздела Dojo на эту тему:
Анатомия библиотеки Dijit
Быстрое создание прототипов виджетов в разметке
Ваш первый диджит: HelloWorld
Диджит HelloWorld (Дубль 2: Изменение шаблона)
Диджит HelloWorld (Дубль 3: Внедрение шаблона)

Вернуться в раздел: Dojo / Анатомия Dijit и жизненный цикл