Огляд бібліотеки Yahoo User Interface, Hostinfo

Огляд бібліотеки Yahoo User Interface

Yahoo User Interface

Створення уніфікованих та водночас різноманітних бібліотек скриптів, стилів, елементів оформлення — не надто нове завдання. Однак Yahoo підійшла до неї творчо та глобально. Якийсь час тому було оголошено про запуск проекту з формування бібліотеки Javascript, CSS-модулів у рамках ініціативи Yahoo! Developer Network.

The Yahoo! User Interface Library – це набір утиліт та елементів керування на мові Javascript з використанням DHTML-методів, моделі DOM та технології AJAX. Також бібліотека YUI включає набір різноманітних таблиць стилів. Для використання YUI необхідно завантажити бібліотеку з сайту Yahoo або одного із дзеркал, посилання на які дано тут же на сторінці проекту. Об'єм при завантаженні невеликий - всього близько 6 Мб. Наразі доступна версія 0.11.2, проте проект розвивається дуже динамічно, і оновлення релізів відбувається приблизно раз на місяць. До складу завантаженого пакета входять: власне бібліотека, збірка прикладів з модулів та документація. Використання бібліотеки безкоштовно згідно з ліцензією BSD. Можливі два варіанти застосування – встановлення безпосередньо на веб-сервер та підключення окремих модулів та стилів до власного проекту локально.

Довгий час веб-сайти розроблялися під певні типи браузерів. Нині їх налічується близько 10 000, рахуючи різні версії та модифікації. Однак основні браузери загалом дотримуються специфікацій консорціуму W3C. Відповідно, YUI також дотримується вимог специфікацій консорціуму і є браузер-і платформно-незалежною.

Наведемо склад функціональних модулів:

анімація - animation;
автозаповнення - autocomplete;
робота з календарями -calendar;
керування підключенням до серверів - connection;
контейнери - container;
управління об'єктами DOM-моделі - dom;
керування переміщенням об'єктів браузера - dragdrop;
перехоплення та обробка подій - event;
шрифти - fonts;
таблиці - grids;
ведення логів - logs;
елементи меню – menu, reset, slider, treeview;
використання сервісів Yahoo - yahoo;

Тепер докладніше познайомимося з можливостями окремих компонентів бібліотеки YUI та прикладами їх використання. Як завжди, освоєння нового програмного компонента починається з документації. Отже, після розпакування архіву заходимо в папку docs і вибираємо підпапку по модулю, що нас цікавить. Нехай це буде "контекстне меню" (рис. 2). Для побудови допомоги використано компоненти самого YUI. Їх можна як у вигляді дерева, і поэлементным списком. Користуватися довідкою більш ніж зручно: реалізовано докладні меню, перехресні посилання на елементи.

Окремо зупинимося на докладному та структурованому документуванні класів, інтерфейсів, їх методів та параметрів (рис. 3). У лівому меню наведено класи компонентів та відповідні файли. Таким чином, розробник в одному вікні отримує доступ до всієї необхідної інформації щодо компонента. Певним недоліком документування є централізованого меню навіть у межах модуля. Для доступу до документації з іншого модуля необхідно відкривати його підпапку. У документації з деяких модулів наведено приклади використання. Проте для ознайомлення з практикою використання краще користуватися прикладами, що додаються в папці. Загалом, ознайомившись із описом бібліотеки Yahoo! User Interface,можна зробити висновок, що побудована вона за класичним об'єктним принципом як проект з вихідним кодом. Це значно спрощує як її освоєння, і практичне використання.

Компоненти створення меню

У модуль menu входять три скриптові компоненти: міні-меню, повнофункціональне меню та відладчик меню, а також набір таблиць стилів для оформлення створюваного меню. На жаль, більшість представлених прикладів містить помилки. Будемо поблажливі, адже це ще нульова версія. І розглянемо працюючий приклад створення контекстного меню (рис. 4) з урахуванням компонентів event, dom, menu і container.

Проаналізуємо на прикладі порядок використання компонентів бібліотеки. Спочатку імпортуємо простір імен із файлу yahoo.js. Потім імпортуємо стандартними засобами необхідні файли компонентів event.js, dom.js, container_core.js, menu.js. Все, що залишається зробити розробнику, – це викликати необхідні функції та передати їм необхідні параметри. Меню готове!

Розглянемо ще один приклад цікавого та корисного використання YUI-бібліотеки – компоненти ведення логів на сторінці (рис. 5). Нижче наведено фрагмент коду кореневого компонента, який забезпечує перехоплення події та записує його у стек. Після цього опис події може бути записано в балку, потім раховано і проаналізовано.

YAHOO.widget.Logger.log = function(sMsg, sCategory, sSource)

Ми розглянули лише два невеликі приклади. Можливості бібліотеки YUI набагато більші, і познайомитися з ними буде нескладно, як можна переконатися на наведених прикладах. Залишилося сказати кілька слів про таблиці стилів, що надаються YUI. Кожному модулю, крім службових, відповідає власна таблиця стилів. При розпакуванні бібліотекифайли *.css розміщуються у підпапках з ім'ям asset у папці відповідного модуля. Як видно з наведених вище прикладів, всі файли компонентів, у тому числі і таблиці стилів, докладно документовані, тому розібратися в них не важко.

Підсумовуючи нашому короткому огляду, можна сказати, що бібліотека Yahoo! User Interface може стати великою підмогою для швидкого створення сайтів. Незважаючи на свою поки що недосконалість, вона надає великі можливості для створення динамічних привабливих веб-рішень.