Библиотека Prototype – ваш путь в Web 2.0::Журнал СА 7.2007
www.samag.ru
     
Поиск   
              
 www.samag.ru    Web  0 товаров , сумма 0 руб.
E-mail
Пароль  
 Запомнить меня
Регистрация | Забыли пароль?
Журнал "Системный администратор"
Журнал «БИТ»
Подписка
Архив номеров
Где купить
Наука и технологии
Авторам
Рекламодателям
Контакты
   

  Опросы
  Статьи

День сисадмина  

Учите матчасть! Или как стать системным администратором

Лето – время не только отпусков, но и хорошая возможность определиться с профессией

 Читать далее...

День сисадмина  

Живой айтишник – это всегда движение. Остановка смерти подобна

Наши авторы рассказывают о своем опыте и дают советы начинающим системным администраторам.

 Читать далее...

Виртуализация  

Рынок решений для виртуализации

По данным «Обзора российского рынка инфраструктурного ПО и перспектив его развития», сделанного

 Читать далее...

Книжная полка  

Как стать креативным и востребованным

Издательский дом «Питер» предлагает новинки компьютерной литературы, а также книги по бизнесу

 Читать далее...

Книжная полка  

От создания сайтов до разработки и реализации API

В издательстве «БХВ» недавно вышли книги, которые будут интересны системным администраторам, создателям

 Читать далее...

Разбор полетов  

Ошибок опыт трудный

Как часто мы легко повторяем, что не надо бояться совершать ошибки, мол,

 Читать далее...

Принципы проектирования  

Dependency Inversion Principle. Принцип инверсии зависимостей в разработке

Мы подошли к последнему принципу проектирования приложений из серии SOLID – Dependency

 Читать далее...

Рынок труда  

Вакансия: Администратор 1С

Администратор 1С – это специалист, который необходим любой организации, где установлены программы

 Читать далее...

Книжная полка  

Книги для профессионалов, студентов и пользователей

Книги издательства «БХВ» вышли книги для тех, кто хочет овладеть самыми востребованными

 Читать далее...

Принципы проектирования  

Interface Segregation Principle. Принцип разделения интерфейсов в проектировании приложений

Эта статья из серии «SOLID» посвящена четвертому принципу проектирования приложений – Interface

 Читать далее...

Книжная полка  

Секрет успешных людей

Книги издательства «БХВ» по ИТ рассчитаны на разные категории читателей: от новичков

 Читать далее...

Учебные центры  

Карьерные мечты нужно воплощать! А мы поможем

Школа Bell Integrator открывает свои двери для всех, кто хочет освоить перспективную

 Читать далее...

Гость номера  

Дмитрий Галов: «Нельзя сказать, что люди становятся доверчивее, скорее эволюционирует ландшафт киберугроз»

Использование мобильных устройств растет. А вместе с ними быстро растет количество мобильных

 Читать далее...

Прошу слова  

Твердая рука в бархатной перчатке: принципы soft skills

Лауреат Нобелевской премии, специалист по рынку труда, профессор Лондонской школы экономики Кристофер

 Читать далее...

1001 и 1 книга  
19.03.2018г.
Просмотров: 11253
Комментарии: 0
Потоковая обработка данных

 Читать далее...

19.03.2018г.
Просмотров: 9505
Комментарии: 0
Релевантный поиск с использованием Elasticsearch и Solr

 Читать далее...

19.03.2018г.
Просмотров: 9556
Комментарии: 0
Конкурентное программирование на SCALA

 Читать далее...

19.03.2018г.
Просмотров: 5976
Комментарии: 0
Машинное обучение с использованием библиотеки Н2О

 Читать далее...

12.03.2018г.
Просмотров: 6684
Комментарии: 0
Особенности киберпреступлений в России: инструменты нападения и защита информации

 Читать далее...

12.03.2018г.
Просмотров: 3979
Комментарии: 0
Глубокое обучение с точки зрения практика

 Читать далее...

12.03.2018г.
Просмотров: 2903
Комментарии: 0
Изучаем pandas

 Читать далее...

12.03.2018г.
Просмотров: 3705
Комментарии: 0
Программирование на языке Rust (Цветное издание)

 Читать далее...

19.12.2017г.
Просмотров: 3714
Комментарии: 0
Глубокое обучение

 Читать далее...

19.12.2017г.
Просмотров: 6204
Комментарии: 0
Анализ социальных медиа на Python

 Читать далее...

19.12.2017г.
Просмотров: 3056
Комментарии: 0
Основы блокчейна

 Читать далее...

19.12.2017г.
Просмотров: 3359
Комментарии: 0
Java 9. Полный обзор нововведений

 Читать далее...

16.02.2017г.
Просмотров: 7172
Комментарии: 0
Опоздавших не бывает, или книга о стеке

 Читать далее...

17.05.2016г.
Просмотров: 10552
Комментарии: 0
Теория вычислений для программистов

 Читать далее...

30.03.2015г.
Просмотров: 12264
Комментарии: 0
От математики к обобщенному программированию

 Читать далее...

18.02.2014г.
Просмотров: 13901
Комментарии: 0
Рецензия на книгу «Читаем Тьюринга»

 Читать далее...

13.02.2014г.
Просмотров: 9034
Комментарии: 0
Читайте, размышляйте, действуйте

 Читать далее...

12.02.2014г.
Просмотров: 6996
Комментарии: 0
Рисуем наши мысли

 Читать далее...

10.02.2014г.
Просмотров: 5305
Комментарии: 3
Страна в цифрах

 Читать далее...

18.12.2013г.
Просмотров: 4532
Комментарии: 0
Большие данные меняют нашу жизнь

 Читать далее...

18.12.2013г.
Просмотров: 3345
Комментарии: 0
Компьютерные технологии – корень зла для точки роста

 Читать далее...

Друзья сайта  

 Библиотека Prototype – ваш путь в Web 2.0

Архив номеров / 2007 / Выпуск №7 (56) / Библиотека Prototype – ваш путь в Web 2.0

Рубрика: Веб /  Веб

Кирилл Сухов

Библиотека Prototype – ваш путь в Web 2.0

Требования к веб-разработке постоянно растут. Если для какого-нибудь программиста примером идеального пользовательского интерфейса является сайт lib.ru, то обычный пользователь такой аскетизм скорее всего не оценит, и самое страшное – не оплатит. Однако работа, направленная на повышение удобства и практичности пользовательского интерфейса, зачастую отнимает много времени, которое хотелось бы потратить на разработку бизнес-логики приложения. Разработчики настольных систем имеют в своём арсенале такие средства, как MFC, Gtk, Qt и другие библиотеки. Чем же может воспользоваться веб-программист?

WEB 2.0 – маркетинг на марше?

Если говорить откровенно, когда в мире веб-разработчиков случился некий «AJAX-бум», я был настроен довольно скептически. В чём, собственно, революция? В возможности направлять запрос к серверу и получать ответ без перезагрузки страницы? Но это и так уже было. Выучить четыре метода объекта XMLHttpRequest и стать разработчиком WEB 2.0? Звучит несерьёзно.

Со временем мне пришлось поменять свою точку зрения. Я понял, что WEB 2.0 – это не только маркетинговый термин, это новый подход к веб-программированию, позволяющий рассматривать результат труда не как html-страницы, а как полноценные приложения.

Впрочем, не будем на этом останавливаться, на эту тему уже сломано немало копий. Я просто хочу рассказать об инструменте, помогающем перейти к WEB 2.0 вполне безболезненно.

Новый подход диктует новые требования, в частности, язык программирования JavaScript, который многие разработчики считали чем-то вторичным и не заслуживающим внимания, вышел на первый план. Библиотеки, облегчающие работу с ним, начали создаваться со времени его возникновения, но именно сейчас они как никогда актуальны.

Я хочу рассказать о библиотеке, основное предназначении которой – обеспечить комфортную жизнь веб-разработчику, снабдить его новыми возможностями.

Знакомьтесь – Prototype

Что собой представляет Prototype? Это свободно распространяемая JavaScript-библиотека, значительно облегчающая жизнь разработчика. Она написана Сэмом Стефенсоном (Sam Stephenson) и доступна по адресу http://prototype.conio.net. Последняя версия (на момент написания статьи) пронумерована как 1.5.1.

Сама библиотека занимает всего 72 Кб и распространяется по свободной лицензии (MIT-style license).

Её установка не вызывает проблем, просто поместите на вашу страничку тег:

<script src=prototype.js></script>

и вся мощь библиотеки к вашим услугам.

Что мы получим в результате? Совсем не набор компонентов или каких-либо «виджетов», а коллекцию объектов и их методов, из которых можно конструировать свои библиотеки и расширения. Prototype – это библиотека для построения собственных библиотек, именно поэтому она используется, например, в Ruby On Rails, Rico и других framework-средах.

Приятные мелочи

С них обычно начинают описание библиотеки. Пусть они принципиально не важны, но очень удобны. Должен заметить, что к этому удобству, как и вообще ко всему хорошему, быстро привыкаешь.

Прежде всего это упрощение синтаксиса обращения к DOM-элементам и их свойствам посредством функций $() и $F(). Первая из них является заменой привычной конструкции document.getElementById(), но имеет несколько больший функционал. Она может принимать в качестве аргумента как id элемента, так и сам элемент. Аргументов может быть более одного, и в этом случае функция возвращает массив элементов.

allNodes  =  $("firstDiv",  "secondDiv"); 

for(i  =  0;  i  <  allNodes.length;  i++)  { 

        alert(allNodes[i].innerHTML); 

}

Функция $F(id) возвращает значение полей ввода, принимая аргументом идентификатор поля. Возможно, эта миссия покажется не очень принципиальной, но применение $() и $F() по крайней мере освобождают время для более глобальных задач. Кроме того, эта конструкция также может принимать в качестве аргумента не только идентификатор, но и сам DOM-элемент.

Следующая функция из этой компании – document.get ElementsByClassName. Вообще использовать имя класса для получения DOM (HTML) элемента, приём неновый, но требующий некоторых телодвижений, вроде перебора всех подобных элементов, поиска нужного класса в сложной структуре документа. Теперь мы избавлены от этой нудной работы.

Ниже представлен пример использования этой функции:

<head>

<script>

  document.getElementsByClassName('foo');

  // -> [HTMLElement, HTMLElement] (div#one, div#two)

  document.getElementsByClassName('thud');

  // -> [HTMLElement, HTMLElement, HTMLElement] (div#two, li#item_one, li#item_two);

  document.getElementsByClassName('thud', $('list'));

  // -> [HTMLElement, HTMLElement] (li#item_one, li#item_two)

</script>

</head>

<body>

    <div id="one" class="foo">Single class name</div>

    <div id="two" class="foo bar thud">Multiple class names</div>

    <ul id="list">

      <li id="item_one" class="thud">List item 1</li>

      <li>List item 2</li>

      <li id="item_two" class="thud">List item 3</li>

    </ul>

  </body>

Функция $A() представляет собой удобный конструктор массивов, преобразуя к этому типу данных любую коллекцию объектов, принимаемую в качестве аргумента.

Функция $W() выполняет вполне банальную, но часто встречающуюся задачу – приведение строки к массиву. Тут всё просто:

w('apples bananas kiwis')

// возвращает массив ['apples', 'bananas', 'kiwis']

Функция $H() предназначена для работы с хэш-массивами. Она возвращает объект класса Hash и предоставляет методы для работы с ним.

Прежде всего это Hash.merge() – добавляющий новые ключ/значение, each() – перебирающий все ключи/значения массива, а также методы toJSON и toQueryString, назначения которых вполне ясно по названиям.

Ниже представлен пример работы функции $H и объекта Prototype.Hash.

var h = $H({ name: 'Prototype', version: 1.5 });

var h = new Hash({ ... });

h.keys().sort().join(', ')

h.merge({ version: '1.5 final', author: 'Sam Stephenson' });

h.each(function(pair) {

  alert(pair.key + ' = "' + pair.value + '"'); });

$H({ action: 'ship', order_id: 123, fees: ['fee1', 'fee2'] }).toQueryString()

Кроме того, у объекта Hach есть исключительно полезный метод inspect(), позволяющий получить в браузере «читабельное» представление хэш-массива.

К приятным мелочам (хотя это, наверное, уже нечто по крупнее) я бы отнёс ещё и целый объект – PeriodicalExecuter, предоставляющий возможность периодического вызова заданной функции через указанный интервал. Его «родственник» – объект Ajax.PeriodicalUpdater выполняет такие же действия, с запросом к серверу, но об этом – позже.

Попытка за попыткой

Вообще процесс кроссбраузерной JavaScript-разработки всегда представлял некоторые трудности по причине неоднозначной реакции разных обозревателей на ошибки сценариев. В Prototype предусмотрен объект (функция) Try.these(), который сильно облегчает эту и другие задачи. Фактически он исполняет функции паттерна проектирования «Фасад». Он перебирает возможные варианты обработки и возвращает результат того обработчика, который оказался успешным. Пример его использования:

<script>

function getXmlNodeValue(xmlNode){

    return Try.these(

           function() {return xmlNode.text;},

           function() {return xmlNode.textContent;)

           );

}

</script>

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

Расширение объектов JavaScript

Основное предназначение Prototype – расширение возможностей для javascript-разработчика. Для этой благой цели стандартные объекты JavaScript обрели новые возможности (если быть формальным – методы). Полный список расширений можно получить, ознакомившись с документацией по библиотеке. Обозначим только некоторые из них.

Прежде всего «тюнингу» подвергся объект Event. С точки зрения скептика, конечно, использование Prototype не добавляет каких-либо новых, принципиальных возможностей в работу с этим объектом, но, безусловно, делает удобными и самое главное кроссбраузерными уже существующие.

Например, метод observe(element, name, observer, useCapture) добавляет обработчик события DOM-элементу, с учётом различий объектной модели браузеров.

Метод stopObserving(element, name, observer, useCapture) убирает это событие. Фактически эти методы дают реализацию паттерна проектирования «Обозреватель» в JavaScriot.

Метод findElement(event, tagName) находит в дереве DOM-объектов первый тег, совпадающий с параметром tagName, начиная с объекта, породившего событие.

Метод stop(event) останавливает распространение события.

Кроме этого, расширенный объект Event теперь имеет свойства, соответствующие нажатию специальных клавиш (таких, как <Tab> или <Esc>), а также статические методы обработки нажатия кнопки мыши и положения курсора на странице.

К классу Object были применены не совсем обычные расширения. Во-первых, это метод extend(object), позволяющий реализовать наследование (если, конечно, для объектов JavaScript этот термин вообще применим), а во-вторых, тот же метод с двумя аргументами – extend(destination, source), позволяющий копировать все свойства и методы объекта source в объект destination).

Впрочем, манипуляции с объектами (не слишком укладывающимися в классическую концепцию ООП), тема для отдельного разговора.

Класс Function дополнен методами, позволяющими связать данный экземпляр функции с объектами bind(object) и bindAsEventListener(object).

Не остался без внимания и класс String. Он дополнен методами, широко распространёнными в веб-программировании, но применяемыми на стороне сервера. Это escapeHTML()/unescapeHTML(), отвечающие за экранирование и восстановление HTML-разметки, и stripTags(), просто убирающим любые HTML- и XML-теги.

Обработка форм

Для облегчения этой часто встречающейся задачи в библиотеке предусмотрен объект Form с рядом полезных методов:

Form.getElements(form) возвращает массив значений элементов формы вне зависимости от их типа:

llNodes = Form.getElements("myform");

for(i = 0; i < allNodes.length; i++) {

 //операции над каждым элементом

}

getInputs(form [, typeName [, name]]) возвращает массив значений элементов Input, причём с помощью необязательных элементов можно уточнить тип и имя элемента.

Функционал методов findFirstElement(form), focusFirst-Element(form), а также disable(form) и reset(form) вполне ясен из их названий.

Замечательный метод Form.serialize() помогает передавать данные на сервер, возвращая элементы формы в виде строки, параметров HTTP-запроса:

'field1=value1&field2=value2&field3=value3'

что очень удобно как при отправке сложных форм, так и для работы с AJAX.

Расширения класса Form, такие как класс Form.Element, Form.Observer, предоставляют дополнительные возможности для работы, но о них особый разговор.

Работа с JSON

JSON (JavaScript Object Notation), формат, который в настоящее время стал одним из стандартов обмена информацией между объектами javascript и в особенности в клиент-серверном взаимодействии. В некоторых случаях он удобней XML и гораздо экономичней, а следовательно – быстрее в работе.

В этом формате данные определяются коллекцией пар ключ/значение, которые можно представить, как хэш или ассоциативный массив.

Ниже приведён пример представления данных в нотации JSON. По-моему, довольно удобно и читаемо:

var g_books = [

 {

id: 1,

name: 'Code Generation in Action',

first: 'Jack',

last: 'Herrington',

publisher: 'Manning'

}, {

id: 2,

name: 'PHP Hacks',

first: 'Jack',

last: 'Herrington',

publisher: 'O\'Reilly'

}, {

id: 3,

name: 'Podcasting Hacks',

first: 'Jack',

last: 'Herrington',

publisher: 'O\'Reilly'

}

];

Для работы с этим форматом Prototype даёт нам не только функции приведения к данной нотации хэш-массива (объект Hash) или получение/передачу в JSON обычной строки (объект String). В библиотеке присутствует очень полезная функция evalJSON (разумеется, объекта String), облегчающая работу с ответом сервера, сгенерированным в этой нотации.

Пример:

var person = '{ "name": "Violet", "occupation": "character" }'.evalJSON();

person.name;

person = 'grabUserPassword()'.evalJSON(true);

person = '/*-secure-\n{"name": "Violet", "occupation": "character"}\n*/'.evalJSON()

person.name;

Соответственно существует и обратное преобразование. Это метод unfilterJSON. Пример его работы:

'/*-secure-\n{"name": "Violet", "occupation": "character", "age": 25}\n*/'.unfilterJSON()

// получаем на выходе: '{"name": "Violet", "occupation": "character", "age": 25}'

С помощью расширения стандартного класса Object можно легко автоматизировать приведение к данной нотации:

var Person = Class.create();

Person.prototype = {

  initialize: function(name, age) {

    this.name = name;

    this.age = age;

  },

  toJSON: function() {

    return ('My name is ' + this.name +

      ' and I am ' + this.age + ' years old.').toJSON();

  }

};

var john = new Person('John', 49);

Object.toJSON(john);

А как же Ajax?

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

Для работы с объектом XMLHttpRequest в Prototype существует объект Ajax, классы, наследуемые от которого стоит подробно рассмотреть.

В первую очередь это класс Ajax.Base, служащий основой для других классов, определённых в Ajax. Основным инструментом для формирования запросов к серверу является его наследник – класс Ajax.Request. Пример его использования:

<script>

    function someAjax($url)

    {

var myAjax = new Ajax.Request(

           url,

{method: 'get',

 parameters: {

type:'care',

name:'volga’

},

onLoaded:function(){

alert(‘test’)

}

 onComplete: someFunction}

                               );

    }

    function someFunction (req)

    {

           $('tagert').value = req.responseText;

    }

</script>

<div id

<br><textarea id="tagert" cols=100 rows=10 ></textarea>

<input type=button onlick="somrAjax">

Ничего не понятно? Сейчас разберёмся. Аргументы, передаваемые Ajax.Request, обозначены в нотации JSON (JavaScript Object Notation).

Первый параметр, который получает при создании Ajax.Request, это URL ресурса, к которому идёт запрос.

Второй – это параметры запроса, записанные в вышеупомянутой нотации JSON (это только один вариант, они могут быть переданы методу и в качестве строки, сформированной как URL).

Третий параметр, в данном случае функция onLoaded(), выполняемая при получении ответа сервера объекта, но на её месте мог быть и массив нескольких обработчиков с функциями, заданными пользователем:

var myOpts = {onComplete: showResponse,

onLoaded: registerLoaded};

Остальные параметры этого метода:

  • requestHeader – список HTTP-заголовков в виде ассоциативного массива, где ключами выступают названия заголовков.
  • onSuccess/onFilure – значениями этих полей являются пользовательские функции, выполняемые при успешном или неудачном выполнении запроса.
  • Asynchronous – булевый индикатор асинхронности AJAX-запроса. По умолчанию имеет значение TRUE.
  • postBody – содержит данные, передаваемые в теле HTTP-запроса.

Остальные ещё более интересные возможности содержатся в следующем классе, наследуемом от Ajax.Request, это класс Ajax.Udapter, который решает задачу по вставке возвращённого сервером HTML-кода в заданный DOM-объект. Ajax.Udapter очень удобен для динамического изменения содержания страницы. В дополнение к свойствам родительского класса он содержит и некоторые дополнительные.

Во-первых, это insertion (Object, String) – функция, которая вызывается для вставки полученного текста в объект, вызываемая с двумя аргументами – объект, в который будет производиться вставка текста и непосредственно сам текст, полученный в результате запроса.

Второе свойство – evalScripts определяет, будут ли выполняться скрипты, полученные в HTTP- ответе.

Конструктор этого объекта – Ajax.Updater (container, url, options) содержит новый аргумент – container, значение которого является идентификатором DOM-элемента, в который будет произведена вставка текста, полученного в результате запроса.

Ajax.PeriodicalUpdater, наследуемый от Ajax.Base, идёт ещё дальше. В вызове его конструктора используется аргумент container, являющийся идентификатором, или самим DOM-элементом, принимающим текст ответа на запрос. Кроме того, такие его методы, как start(), stop(), updateComplete(), и другие позволяют контролировать выполнение периодических задач в процессе исполнения запроса.

Для «низкоуровневой» работы с XMLHttpRequest в базовом классе Ajax предусмотрен метод getTransport(), который просто возвращает объект XMLHttpRequest. Разумеется, учитывая особенности используемого браузера.

Позиционирование

Размещать или перемещать в некотором заданном пространстве DOM (в частности HTML) элементы, уже давно вполне решаемая задача. Проблемы, правда, присутствуют – это опять пресловутое различие между браузерами и дикое количество кода (зачастую немотивированно повторяющегося), используемого в целях реализации сложного позиционирования. Для решения этих проблем библиотека предлагает объект Position. Его методы позволяют определить смещение любого DOM-элемента с учётом прокрутки и смещения родительских элементов. С позиционированием тесно связан класс Insertion, управляющий вставкой текста или DOM-элемента, в HTML-страницу. Названия его методов – After(), Before(), Bottom(), Top() уже говорят об их назначении.

Библиотеки на основе Prototype

Как уже говорилось, Prototype – это скорее не продукт для конечного пользователя, а framework для построения JavaScript-библиотек. Перечислю лишь некоторые из них. Библиотека Rico (http://openrico.org) предназначена для построения сложных визуальных и анимационных эффектов. На демо-странице проекта можно познакомиться и «поиграться» с её основными объектами. На рис. 1 показан компонент Rico.Accordion. Каждая горизонтальная панель раскрывает или закрывает свою вкладку с независимым содержимым. Фактически он помещает набор DOM-элементов в заданную разработчиками область с возможностью независимого доступа. На рис. 2 – компонент Rico.Color. Его работа, мне кажется, в пояснениях не нуждается.

Рисунок 1. Компонент Rico.Accordion. Вкладки на горизонтальной панели раскрывают независимое содержимое

Рисунок 1. Компонент Rico.Accordion. Вкладки на горизонтальной панели раскрывают независимое содержимое

Рисунок 2. Компонент Rico.Color. Цвет бара меняется в зависимости от введённых цифр

Рисунок 2. Компонент Rico.Color. Цвет бара меняется в зависимости от введённых цифр

Библиотека script.aculo.us (http://script.aculo.us) также реализует многочисленные визуальные эффекты. Это перетаскивание (drag-and-drop) объектов по странице, динамическая сортировка, автозаполнение форм и т. д. Сайт библиотеки (см. рис. 3) – прекрасный образец её возможностей. В её составе три основных объекта: Sortable, обеспечивающий динамическое перемещение объектов, Controls, реализующий интерактивные элементы управления и Effect – набор самых различных визуальных эффектов, таких как Effect.Pulsate(), заставляющих видимый объект вибрировать, или Effect.Puff(), представляющий собой красивый способ растворить объект в воздухе. Полезна также функция Parallel(), позволяющая одновременную работу нескольких визуальных эффектов. Жалко, что страница журнала не поддерживает DOM-модель и не даёт возможности проиллюстрировать вышесказанное, поэтому рекомендую посетить сайт этого проекта.

Рисунок 3. Главная страница сайта библиотеки script.aculo.us

Рисунок 3. Главная страница сайта библиотеки script.aculo.us

Можно упомянуть ещё небольшую библиотеку Prototype window. Это дополнительный класс, позволяющий создавать симпатичные окошки, которые вы видите на рис. 4 и некоторые другие объекты (модальные диалоги, динамические визуальные эффекты).

Рисунок 4. Окошки, созданные с помощью библиотеки Prototype window

Рисунок 4. Окошки, созданные с помощью библиотеки Prototype window

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

var win = new Window({className: "spread", title: "Ruby on Rails", top:70, left:100, width:300, height:200, \

    url: "http://www.rubyonrails.org/", showEffectOptions: {duration:1.5}}) win.show();

Наконец, Prototype используют такие мощные framework, как Ruby On The Rails и Symfony (популярный web application framework, для PHP5 http://www.symfony-project.com).

Что дальше?

Честно говоря, описав возможности библиотеки (или framework) Prototype, я совсем «забыл» сказать о самом главном – возможности создания собственных полноценных объектов и гибкого управления ими. Об этом – в следующий раз.

В статье была использована документация библиотеки Prototype (http://www.prototypejs.org/api), а также неофициальное руководство разработчика, составленное Sergio Pereira (http://www.sergiopereira.com/articles/prototype.js.html) и доступное теперь на русском языке в переводе, выполненным Виктором Кроллом (http://kropp.spb.ru/docs/prototype).


Комментарии отсутствуют

Добавить комментарий

Комментарии могут оставлять только зарегистрированные пользователи

               Copyright © Системный администратор

Яндекс.Метрика
Tel.: (499) 277-12-41
Fax: (499) 277-12-45
E-mail: sa@samag.ru