Создаем динамический поиск изображений из Flickr на Dojo

Инструментарий Dojo — сокровищница JavaScript классов. В ней вы можете найти основные JavaScript классы для AJAX: манипуляции с нодами, анимация и все то что есть в Dojo. Также вы можете найти элегантные и функциональные UI виджеты, например: выпадающее меню, интерфейсы со вкладками и элементы форм. В DojoX вы можете найти библиотеки графиков, специальные хранилища данных, векторную графику и много другое.

В этой статье мы создадим динамический поиск изображений из Flickr с помощью Dojo, а будем при этом использовать три коллекции скриптов.

Для начала построим интерфейс со вкладками для захвата изображений с Flickr, используя Dijit's TabContainer, далее возьмемся за хранилища данных на DojoX's Flickr, и в конце поработаем с кодом Dojo для обработки событий и манипуляций с нодами.

Пример

Выбираем тему

Есть два основных шага добавления темы на страницу: импорт стиля темы и добавление темы, как имя класса в элемент BODY.

Тема «claro» является новой в Dojo 1.5 и выглядит очень приятно.

Импорт Dojo из CDN, parseOnLoad:true

Используя ресурсы CDN Google, Dojo будет загружаться быстрее, чем если бы он располагался на вашем сервере. А добавление атрибута djConfig parseOnLoad:true поручает Dojo просматривать страницу в поисках виджетов.

Как альтернатива, можно настроить Dojo, используя переменную djConfig:

В любом случае этого будет достаточно.

Создание HTML структуры: контейнер со вкладками и поисковая форма

Первыми идут настройки формы. Формы будут очень простыми. Они будут содержать окно поиска и кнопку «отправить». Каждый нод (форма, ввод и кнопка) преобразуется в эквивалентный Dijit виджет, что добавляет функциональности и более гибкого отображения.

Окно поиска становится dijit.form.ValidationTextBox, которое позволяет нам запрашивать значение запроса и отображать сообщение об ошибке, если того требуют правила поиска.

Вторая часть — установка TabContainer и инициализация начального содержания в панели страницы. Начальный контент будет прост — это вкладка «welcome»:

Следующие вкладки можно будет закрывать.

Загрузка Dojo/Dijit/DojoX

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

Dojo, Dijit, DojoX

И так, все практически готово для создания динамического поиска. Начнем с создания объекта, который будет содержаться во всех наших вкладках, и экземпляра dojox.data.FlickrStore, который будет использоваться для запроса к Flickr:

Затем собираются элементы формы и TabContainer:

Добавляем событие submit в TabContainer...

...которые остановят нормальное представление формы:

...забираем значение из поискового окна:

Если значение актуально, проверяем, что нет открытой вкладки по этому запросу и фокусируемся на окне поиска. Если это новый поисковый запрос, обращаемся к dojox.data.FlickrStore для поиска и возврата изображений для данного запроса. Во время поиска, создается новая вкладка для поискового запроса с заголовком и контентом по умолчанию, добавляется TabContainer, и выбирается новая вкладка:

Когда поиск будет завершен, мы очищаем контент на панели и обрабатываем каждое изображение, для добавления его на панель. В конце, мы создаем подсказку для каждого изображения, отображающую его название:

Далее представлен весь JavaScript код для этого приложения:

Вот и все.) Кстати, на DojoX можно написать такое же приложение для вытягивания картинок с Picasa.

Пример


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