Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Курсовая(Ибрагимов Эльдар).docx
Скачиваний:
1
Добавлен:
19.09.2019
Размер:
57.13 Кб
Скачать

Министерство образования и науки Российской Федерации

ФЕДЕРАЛЬНОЕ Государственное БЮДЖЕТНОЕ образовательное учреждение

высшего профессионального образования

«Санкт-Петербургский государственный университет технологии и дизайна» Северо-западный институт печати

Факультет: Полиграфических технологий и оборудования

Специальность: Полиграфические машины и автоматизированные комплексы

Форма обучения: очная

Кафедра: Автоматизированного полиграфического оборудования

Курсовая работа

Дисциплина: Технология программирования.

Тема: Библиотека Yahoo! User Interface Library (YUI)

Выполнил:

Студент группы: ______________ Ибрагимов Э.И.

(подпись) (Ф.И.О.)

Руководитель:

______________ _______________ ________________________________

(уч.степень, звание) (подпись) (Ф.И.О.)

Дата защиты работы _______________

Оценка ___________________________

Санкт-Петербург

2012

Цели курсовой:

  1. Исследовать библиотеку Yahoo! User Interface Library (YUI) . Технология подключения и использования. Структура. Назначение. Особенности использования.

План курсовой:

  1. Введение:

  • История разработки

  • Что такое YUI?

  • Модули библиотеки

.

  1. Структура библиотеки:

  • Методы применения

  • Бонусы и плюсы

  • Использование в собственных веб-страницах

История разработки.

Проект начинался, как попытка расширить вышерассмотренный фреймворк Yahoo! User Interface, но на данном этапе – это уже полностью самобытный, практически никак не связанный с YUI проект. Движущей силой, основателем и бессменным лидером проекта остается Джэк Слоцум, — известный специалист в среде JavaScript-программистов.

YUI создана совместными усилиями ведущих инженеров Yahoo, а также разработчиками со всего мира. Сейчас это один из ведущих js-фреймворков, полностью готовый для промышленного использования, где очень продвинутые UI- и UX-составляющие интегрированы в одно целое в рамках одной поставки, образуя полностью завершенный, независимый и универсальный продукт. 

Что такое YUI?

Данная библиотека представляет собой набор утилит и систем управления, написанных на JavaScript, для создания богатых интерактивных веб-приложений с использованием таких технологий, как DOM скриптинг, DHTML и AJAX. YUI также включает несколько основных CSS компонентов. Все компоненты библиотеки YUI распространяются по лицензии BSD и бесплатны для всех видов использования.

Проработав с данной библиотекой более года, я могу с уверенностью сказать, что это очень мощный инструмент, который сделает жизнь любого вебмастера намного проще. В YUI не нужно волноваться о совместимости кода в разных браузерах, это за вас делает команда разработчиков Yahoo!

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

Легкий основной YUI и модульная архитектура делают его масштабируемым, быстрый и надежный. Построенный интерфейс инженеров Yahoo!, YUI полномочиями самых популярных сайтов в мире.

.

Среди наиболее распространенных библиотек можно отметить:

  • jquery

  • mootools

  • prototypejs

  • Yahoo! User Interface Library (YUI)

  • Extjs

Хотя существуют и другие исключительные CSS / JavaScript библиотеки, библиотеки YUI имеет ряд преимуществ: его BSD лицензия позволяет контроль, который будет использоваться для бизнеса или некоммерческих целях, и это абсолютно бесплатно. Yahoo! разработчики регулярно обновляют и уточняют YUI библиотеки, которая привлекает миллиарды

просмотров страниц ежедневно. Сообщество YUI библиотеки и документацию, продолжает расти через интернет-форумы.

YUI обертывания оба набора кода в один объект, который может быть использован программно с помощью одного конструктора, поэтому вместо того, чтобы иметь дело с различными наборами кода для различных браузеров, вы имеете дело с библиотекой, и это делает различные вызовы в зависимости от браузера 

Еще один важный аспект в библиотеке, что я должен отметить, на данный момент является уважение к глобальному пространству имен. Все объекты, созданные в библиотеке и весь его код в перспективе, и могут быть доступны только через, YAHOO Глобальный объект пространства имен. Это означает, что все библиотеки, в том числе каждый полезности и каждый контроля, и его многочисленные классы, создать только один объект в пространстве имен.

Так, чтобы получить максимальную отдачу от YUI, вам нужно иметь по крайней мере базовые знания JavaScript и принципы объектно-ориентированного программирования. Тем не менее, базовые знания рабочий все, что требуется, и те разработчики, которые имеют меньше информации о сценарии, несомненно, найдет, что они выйдут из опыта разработки с YUI зная, намного больше, чем это было с самого начала. YUI может научить вас выдвинули JavaScript сценариев методы кодирования и рекомендации по обеспечению безопасности, а также более эффективные способы делать то, что вы хотите сделать. Это будет даже помочь более опытных программистов оптимизации их кода и резко сократить их время разработки, так что каждый может получить что-то от него.

Модули библиотеки.

Компоненты:

  • Анимация перемещения блоков, плавная смена цветов (Animation)

  • Автоматический подбор вводимой фразы (AutoComplete)

  • Менеджер истории браузера (Browser History Manager)

  • Нестандартные кнопки (Button)

  • Календарь (Calendar)

  • Построение диаграмм (Charts)

  • Подбор цвета на палитре (Color Picker)

  • AJAX-компонент (Connection Manager)

  • Удобная работа с куками (Cookie)

  • Генерация различных блоков (Container)

  • Хранение данных (DataSource)

  • Создание удобных таблиц, с сортировками и редактированием «на лету» (DataTable)

  • Работа с dom-деревом (Dom)

  • Перемещение пользователем элементов на странице (Drag & Drop)

  • Удобная работа с элементами страницы (Element)

  • Создание и управление событиями (Event)

  • Прием дополнительных css- и javascript-файлов (Get)

  • Фронтенд для подрезания картинок (ImageCropper)

  • Предварительная загрузка изображений (ImageLoader)

  • Работа с JSON-массивами

  • Автоматическая генерация разметки (Layout Manager)

  • Запись действий (Logger)

  • Генератор меню (Menu)

  • Profiler

  • ProfilerViewer

  • Изменение размеров блоков (Resize)

  • Визуальный html-редактор (Rich Text Editor)

  • Выборка узлов на основе css-пути (Selector)

  • Слайдеры (Slider)

  • Переключение контента через табы (TabView)

  • Построение древовидных структур (TreeView)

  • Пакетная загрузка файлов с отображением процентного статуса (Uploader)

  • Дополнительная загрузка компонентов библиотеки (YUI Loader)

  • Тесты (YUI Test)

  • CSS-фреймворки для избавления от рутинной подготовки (Reset CSS, Base CSS, Fonts CSS, Grids CSS)

  • Огромная библиотека инструментов, включающая одну из самых совершенных таблиц данных.

  • Удобная документация: к каждому инструменту и компоненту прилагается подробная инструкция и примеры. (api documentation)

  • Инструменты разработки: профайлер, встроенная в браузер консоль и фрэймворк тестирования.

  • Удобное управление событиями со встроенными событиями касаний и жестов.

Методы применения.

Итак, теперь вы уже кое-что услышали об YUI, так что можно заглянуть в код!

Подключение библиотеки

Подгрузить YUI очень легко. Рассмотрим несколько методов.

Метод 1: файл прототипа YUI 3

Использование файла прототипа - это самый простой способ поместить YUI на вашу веб-страницу. Всего лишь прикрепите этот файл прототипа (около 6 KB), затем через JavaScript подключите нужные модули. Вот пример:

YUI().use('node', 'anim','yui2-calendar', function(Y) {

var YAHOO = Y.YUI2;

Y.one('#test');

});

YUI.use() запрашивает необходимые модули и возвращает объект YUI со всеми модулями. Компоненты YUI 2 также можно включить, прописав yui2- к названию модуля. Если вы подключили компоненты YUI 2, то обращаться к ним можно через Y.YUI2.

Метод 2: конфигуратор YUI 3

Этот веб инструмент позволяет собрать все необходимые модули и загрузить или соединить ссылкой файл со всеми зависимостями (подобно jQuery UI). Он также предоставляет информацию о том, как файлы повлияют на загрузки.

Метод 3: упрощенный YUI

Simple YUI - это недавно появившийся инструмент, упрощающий работу с подключениями модулей, для тех, кто привык подключать библиотеку JavaScript и получать ко всему доступ. Подключите файл Simple YUI и вы получите глобальный объект YUI. Через переменную Y вы сможете управлять DOM, AJAX и эффектами UI.

//Y - это глобальная переменная, установленная скриптом SimpleYUI

Y.one("#test").addClass("my class");

Через Simple YUI вы все же можете динамически использовать другие модули YUI, подключая их с помощью YUI.use().

Y.use('dd-drag', function(Y) {

// подключение модуля 'drag and drop'

});

Simple YUI может помочь программистам, привыкшим использовать jQuery, перейти на YUI.

Работа с DOM

В YUI 3 работа с DOM осуществляется очень просто. Синтаксис покажется вам знакомым, если вы работали с jQuery в этом направлении.

YUI предоставляет два способа для получения корневых элементов DOM через Node module.

Y.one('selecter') возвращает элемент YUI, являющийся элементом DOM.

Y.all('selecter') возвращает список совпадающих элементов YUI.

Вот пример:

// Y.one

var node = Y.one('#test-div'); // получает элемент с идентификатором test-div

var node2 = Y.one(document.body); // в Y.one также можно прописать элемент DOM

Y.one('#my-list').get('id'); // my-list

// Y.all

var nodes = Y.all('#my-list li'); // все элементы с идентификатором my-list

// связывание

var nodes2 = Y.one('#my-list').all('li'); // все элементы с идентификатором my-list

var parent = Y.one('#my-list').get('parentNode'); // возвращает родительский элемент элемента my-list (как объект YUI Node)

В YUI также есть метод 'test', который проверяет, есть ли у элемента заданный селектор.

var node = Y.one('#test-div');

// если у элемента node есть селектор primary

if(node.test('.primary')) {

doSomething();

}

Для управления атрибутами элемента в YUI есть методы get и set, а также очень удобные функции addClass и removeClass.

// get и set

Y.one('#test-div').get('id');

Y.one('#test-div').set('innerHTML', 'Test Content');

// addClass, removeClass

Y.one('#test-div').addClass('highlighted'); // добавляет класс блоку div

Y.all('p').removeClass('highlighted'); // удаляет класс у всех элементов p

События

Добавить событие можно с помощью метода on. Вы можете применить метод к элементу (Node) или к объекту YUI. Например:

// вызов через YUI объект

// myevent|click указывает пространство имен myevent

Y.on("myevent|click", function() { // do something

}, "#test p");

// вызов через NodeList

Y.all("#test p").on("myevent|click", function() { // do something

});

Интересно то, что если вы используете метод из первого примера, не обязательно, чтобы совпадение обнаружилось немедленно. YUI продолжает поиск совпадений еще 15 секунд после завершения загрузки страницы, то есть, для использования этого метода нет необходимости ждать, чтобы документ загрузился (вам не нужно передавать обработчика события в функцию document.load).

Заметьте также, что мы приписали к типу события необязательную строку, которая указывает пространство имен события. Вы можете использовать это, чтобы в последствии отсоединить событие, если понадобится.

Y.all("#test p").detach("myevent|click");

Вы также можете моделировать события...

Y.one("#test").simulate("click");

... и запускать встроенные события.

Y.one("#test").fire("myevents:custom_event_one");

YUI 3 также поддерживает обработку событий касаний, что позволит использовать ваше JavaScript приложение на мобильных телефонах. Естественно, чтобы заставить события касаний действовать, необходимо подключить модуль "event-touch" через YUI.on.

Y.one("#test").on('touchstart', function() {

// запущено событие касания

});

AJAX

Запросы AJAX обрабатываются через IO module YUI 3. Вызов AJAX осуществляется через функцию io:

Y.io('/url/to/call', {

// метод POST

method: 'POST',

// сериализация формы

form: {

id: "my_form",

useDisabled: true

},

// жизненный цикл обработчика событий ajax

on: {

complete: function (id, response) {

var data = response.responseText; // полученные данные

}

}

});

Метод IO принимает в качестве параметров URL и конфигурационный объект. Этот объект включает много полей, но я включил в пример только самые используемые.

method - какой HTTP метод использовать.

form - если определено данное поле, форма с заданным id будет сериализована и передана с запросом.

on - устанавливает обработчиков событий для различных стадий запрашиваемого жизненного цикла.

Модуль YUI io также позволяет обрабатывать запросы между доменами с помощью файла, основанного на Flash. Правда, есть некоторые предостережения. Во-первых, копия данного файла должна находится на вашем сервере, а во-вторых, домен, к которому вы хотите получить доступ, должен поддерживать услугу междоменного доступа к файлам.

Y.io('http://www.somedomain/web/service/', {

method: 'POST',

data: 'data=123',

// использует flash

xdr: {

use: 'flash',

dataType: 'xml'

}

// жизненный цикл обработчика событий ajax

on: {

complete: function (id, response) {

var data = response.responseText; // полученные данные

}

}

});

В YUI также есть поддержка JSONP через специальный модуль jsonp.

Y.jsonp(someurl, function(response) {

// обработка полученных данных jsonp

});

Есть три стиля для кода. Код слов в тексте представлены следующим образом: "мы также можем добавить атрибут язык для открытия тега <html>..." Блок кода будет установлен следующим образом: / / получаем дату компонентов

Var dates = args[0];

Var date = dates[0];

Var theYear = date[0];

Var theMonth = date[1];

Var theDay = date[2];

Когда мы хотели бы обратить Ваше внимание на определенную часть блока кода, соответствующие строки или элементы будут сделаны шрифтом: <body> <div id="doc3"> <div id="hd"> Это заголовок </ div> <div id="bd"> это тело <div class="yui-b"> Это вторичный блок </ div> <div class="yui-main"> <div class="yui-b"> Это основной блок </ div> </div>

</div>

<div id="ft">This is your footer</div>

</div>

</body>

Бонусы и плюсы

Самым большим преимуществом данной библиотеки является то, что она разрабатывается профессионалами, работающими в компании Yahoo! и постоянно обновляется.

Одним большим плюсом я считаю то, что все функции JavaScript и CSS код оптимизированы и написаны для работы во всех современных браузерах. Вот таблица, показывающая оценку совместимости билиотеки YUI с различными браузерами на различных ОС.

A-grade означает, что библиотека YUI максимально совместима с браузером.

Каждый браузер существования попадает в один из определенных классов, наиболее распространенный класс браузера класса различных браузеров, которые являются браузеры, что создатели библиотеки активно поддерживать. Это современные, как правило, соответствует стандартам и способна предоставления в полном объеме расширенной визуальной точности и расширенной функциональности интерфейс, предоставляемый библиотекой, а также внутреннее ядро ​​содержания. X-класс браузеров, как правило, неизвестных и непроверенных, и счет для широкого круга менее распространенных, часто весьма конкретных браузеров, просто предполагается, что доступ к полной, расширение опыта.Любой браузер, который не был тщательно протестирован командой разработчиков YUI автоматически X-класс браузер вне зависимости от его возможностей; IE7 на Vista, был оценен как X-класса в течение некоторого времени после его выхода просто потому, что не были полностью проверены Yahoo! команды.

Примеры известных сайтов на базе этого фреймворка: Yahoo! Shopping, Bebo, ImageShack, LinkedIn, Walmart.com.

Один из самых больших преимуществ библиотеки YUI, что она является гибкой и легкой. С помощью всего лишь 11 КБ "на проводе", он включает в себя набор событий, DOM нормализации, и язык коммунальные услуги. Если вы выберете больше 17,4 КБ размер, он поставляется со всеми основными функциями, а также YUI Loader, который использует один запрос для CSS, а другой для JS, чтобы динамически загружать требований по тем или иным YUI на основе модуля выработать. Ни один из других предложений рынка могут конкурировать с точки зрения власти или легкости.