Yahoo! U er Interface&nb p;&mda h; открытый набор библиотек для веб-разработчика

Рис. 1. Yahoo! developer Network

Около года назад мы писали о старте проекта Yahoo! User Interface (рис.

 

 

1), который на тот момент был представлен версией 0.9.6. За год активного развития проект выпустил уже два релиза, и сейчас активной является сборка 2.2.2. В состав библиотеки входят скрипты, виджеты, комплекты стилей и огромная библиотека примеров. Распространяется YUI исключительно по BSD-лицензии.

Основные объекты Yahoo! User Interface

Корневым объектом является Yahoo Global Object (YGO). Этот объект отвечает за создание пространств имен (namespaces) для утилит, виджетов и примеров. Его обязательно необходимо включать в скрипты, в которых используются компоненты YUI. Приведем пример кода включения YGO в скрипт:

<script type="text/javascript" src="/redir.php?url=yui.yahooapis.com%2F2.3.0%2Fbuild%2Fyahoo%2Fyahoo-min.js%26%2334%3B%26gt%3B%3C%2Fnobr%3E%26lt%3B%2Fscript%26gt%3B%3C%2Fsamp%3E

В состав YGO входит следующий набор основных методов:

• YAHOO.namespace — создание пользовательского пространства имен;
• YAHOO.lang — обеспечение управления поддержкой языков;
• YAHOO.log — обеспечение ведения логов;
• YAHOO_config — управление конфигурацией решения;
• YAHOO.env — определение используемого на клиенте окружения: операционная система, браузер и тому подобное;
• YUI Module Names — поддержка именования пользовательских модулей.

DOM-модель

Библиотека YUI построена на использовании объектной модели браузера, точнее, загруженного в него документа: Document Object Model (DOM). Соответственно, объект библиотеки DOM является одним из базовых. Доступ к DOM обеспечивает компонент YAHOO.util.Dom, входящий в объект YGO. В нем собраны методы обработки событий в окне браузера, идентификации элементов страницы и стилей, расширенный набор регулярных выражений, определение типа и настроек браузера. Полная документация по DOM-объекту размещена в файле dom.js.html. Для использования объекта в своем скрипте достаточно подключить соответствующий js-файл: dom.js, или dom-min.js, или dom-debug.js. Первый из них содержит максимально полный набор функций, второй — базовый, а dom-debug содержит дополнительные функции отладки скрипта.

Для создания наиболее часто используемых на веб-сайтах функций библиотека содержит модули формирования дерева, меню (несколько различных представлений), перемещения элементов (Drag and Drop), работы с данными из базы, управления панелями на странице, сортировки данных, создания диалоговых окон, помощи пользователю, контекстных подсказок и многие другие. Познакомимся подробнее с использованием некоторых из этих модулей. Начнем с модуля создания меню. На самом деле в этот модуль входит несколько объектов, которые предназначены для создания различных представлений меню: файловое, контекстное, всплывающее и так далее. В качестве родительского объекта для любого меню используется виджет YAHOO.widget.Menu, который использует объектную DOM-модель. Для создания меню вызываем конструктор:

Утилита создания меню

YAHOO.widget.Menu.superclass.constructor.call(
 this,
 p_oElement,
 p_oConfig
);

Рис. 2. Простое меню

Посмотрим, как создать самый простой тип меню, который называется Basic Menu (рис. 2.). Для этого вызываем конструктор меню, как показано на примере, и в качестве параметра передаем тип меню: basicmenu. Параметр fixedcenter определяет расположение меню на странице. Непосредственно отображение на странице производит метод show.

<script type="text/javascript">
YAHOO.example.onMenuReady = function() {
 var oMenu = new YAHOO.widget.Menu("basicmenu", { fixedcenter: true });
 oMenu.render();
 oMenu.showEvent.subscribe(function() {
 this.focus();
 });
 oMenu.show();
 YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
};
YAHOO.util.Event.onContentReady("basicmenu", YAHOO.example.onMenuReady);
</script>

Рис. 3. Примеры типов меню

Помимо самого простого шаблона меню в YUI содержится еще немало других: горизонтальные, вертикальные, анимированные, с переменным позиционированием. Внешний вид различных вариантов меню представлен на рис. 3. С образцами использования можно познакомиться в стандартном пакете загрузки в папке examples\menu.

Утилита управления деревьями

В очередной версии YUI существенно увеличено количество различных видов деревьев (рис. 4). Это позволяет использовать готовые механизмы для самых различных дизайнов сайтов.

Рис. 4. Типы деревьев

Подключение утилиты treeview осуществляется в теле страницы следующими скриптами.

Подключение базовых библиотек:

<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="../../build/event/event.js"></script>

Подключение логирования:

<script type="text/javascript" src="../../build/dom/dom.js"></script>
<script type="text/javascript" src="../../build/logger/logger.js"></script>

Подключение утилиты построения дерева:

<script type="text/javascript" src="../../build/treeview/treeview-debug.js"></script>

Среди других полезных утилит можно назвать tableview, grids, dragdrop, animation, autocomplete. Так, утилиты tableview и grids позволяют организовать табличное отображение данных и управление ими. Dragdrop — отслеживает и позволяет обрабатывать события, связанные с взаимодействием мыши и объектов на веб-странице. Утилита animation содержит функции перемещения объектов, изменения их размеров и поворотов.

Powered by Yahoo! User Interface

Созданное за год с небольшим разнообразие модулей не осталось незамеченным веб-сообществом во всем мире. Уже несколько сотен публичных интернет-ресурсов используют те или иные элементы из представленной библиотеки. Среди них, например, фотоальбом сообщества Opera — My Opera и такая известная социальная сеть профессионалов, как Linked In, о которой подробно рассказывал и наш информационный ресурс. Сейчас в стадии бета-тестирования находится еще целый ряд интересных модулей, например текстовый редактор, утилиты работы с данными и специализированный модуль тестирования. Будем ждать!

Ссылки по теме

• Страница библиотеки Yahoo! User Interface
• Загрузка библиотеки Yahoo! User Interface

Статья получена: hostinfo.ru

загрузка...