Лекцията цели да представи личния опит на автора в разработката на богати потребителски интерфейси базирани на AJAX. Ще бъдат демонстрирани различни шаблони, използвани при изграждането на JavaScript класова йерархия за моделиране на входни контроли, позволяващи сложни взаимодействия и валидация на входа при голяма степен на независимост от представянето. Авторът ще дискутира различни ограничения в съвременните браузъри и начините те да бъдат заобиколени ефективно. Представена на WebTech 2006

1. WebTech 2006 AJAX и създаване на богати потребителски интерфейси в браузър Свилен Иванов (svilen@netclime.com)

2. Защо „приложения в браузър“? По-лесна поддръжка обновяване на софтуера, сигурност, фин контрол „Моят дом е там, където е моят компютър“? работа с приложението от произволна работна станция Независимост от клиентската платформата Не са необходими отделни версии за Windows, GNU/Linux, MacOS Пресъздаване на потребителско усещане за настолно приложение не само визуално, но и функционално

4. Общи проблеми Разлики в отделните браузъри Труден избор на външни библиотеки Prototype, Dojo, MochiKit? Ограничени езикови възможности на JavaScript Ограничения от браузърите поради съображения за сигурност Липса на опит при изграждане на големи приложения за браузър

5. Технически проблеми Обектно-ориентирано програмиране на JavaScript Създаване на потребителски интерфейс Сложни взаимодействия между входните контроли Предаване на данни чрез JSON Предпазване от загуба на данни при затваряне на прозореца Модални прозорци

6. ООП на JavaScript (1/2) JavaScript прототипно-базиран език: Създаването на нови обекти става чрез клониране на базов прототип Разширяване на функционалността на един обект (в смисъл на „наследяване“ в клас-базираните езици) става чрез добавяне на нова функция към прототипа Базови обекти като String, Array, Date също могат да бъдат разширявани: String.prototype.trim = function () { return this.replace(/^\s*(.*)\s*$/, "$1"); }

7. ООП на JavaScript (2/2) Лесен начин за добавяне на функционалност от един или повече обекта: function Animal(breed) { this.breed = breed; this.getBreed = function(){ return this.breed; } } function Pet(name) { this.name = name; this.getName = function(){ return this.name; } } function Cat(name) { this. inherit = Animal; this. inherit ('Tonkinese'); this. inherit = Pet; this. inherit (name); }

8. Създаване на потребителски интерфейс (1/2) Представителна част: статичен HTML с подходящи CSS за оформяне на цвят, размери, и подредба: предимство: лесно за редактиране и създаване Логическа част: JavaScript обекти за всеки един тип входен контрол: textfield, textarea, dropdown, checkbox... Всеки един обект „управлява“ определен DOM входен елемент: <input type=&quot;text&quot; id=&quot;name&quot; class=&quot;textfield&quot;> var nameField = new Textfield('name');

9. Създаване на потребителски интерфейс (2/2) Достъпът до текущата стойност или нейната промяна става през унифициран интерфейс, който е еднакъв за всички обекти: Обектът се „грижи“ да прихване събитията (events) за дадения входен елемент Основна цели: уеднаквяване на интерфейса към входните контроли спрямо текущия интерфейс, които DOM ни предлага създаване на база, от която да се създават по-сложни елементи на потребителския интерфейс var dropdown = new Dropdown('dd1'); var textarea = new Textarea('t1'); textarea.setValue(drodown.getValue());

10. Взаимодействие между входните контроли (1/2) Задача: взаимодействие входните контроли – напр. избор на цвят и промяна на предварителния изглед ( preview ) универсален механизъм – използван при настъпване на събитие от потребителя или генериране по програмен път намаляване на зависимостта (decoupling) между двете страни Защо да не използваме системата за събития в браузъра (events) ? недостатъци - събития специфични за взаймодействие с потребителя, необходим е DOM елемент, труден API

11. Взаимодействие между входните контроли (2/2) Решение: реализация на шаблона Observer на JavaScript

12. Предаване на данни чрез JSON (1/3) Необходимост от лек формат за предаване на структурирани данни между клиента и сървъра: варианти: XML, YAML, CSV, и др. недостатък: специално конвертиране до JS структура JSON (Javascript Object Notation ) базиран на 2 основни структури съвкупност от двойки „име“:„стойност“ ( хеш, запис, асоц.масив) подреден списък от стойности ( масив, вектор)

13. Предаване на данни чрез JSON (2/3) Пример { &quot;name&quot; : &quot;Fruits&quot; &quot;types&quot; : [ { &quot;name&quot; : &quot;apple&quot; &quot;taste&quot; : &quot;sweet&quot;, }, { &quot;name&quot; : &quot;lemon&quot; &quot;taste&quot; : &quot;sour&quot;, } ], } # конверитране до JS обект var data; eval(&quot;data = &quot; + str); data.name // “Fruits” data.types[0].taste // “sweet” data.types.length // “2” for (var p in data.types[1]) { alert(p + “=” + data.types[1][p]) } // “name=lemon” // “taste=sour”

14. Предаване на данни чрез JSON (3/3) Предимства много лесен начин за създаване на JS обект – eval лек и разбираем езиково и платформено независим наличие на библиотеки за: Perl, PHP, Java, Ruby, Python, и др Комуникация: Преобразуване на JS обект до низ: http://www.json.org/json.js var myJSONText = myObject.toJSONString(); Предаване като HTTP параметър: XmlHttpObject.open(&quot;POST&quot;, &quot;data=&quot; + escape(myJSONText));

15. Предпазване от загуба на данни (1/2) Предотвратяване на затваряне на текущия прозорец: чрез събитието onbeforeunload – потребителя може да предотврати затваря на прозореца чрез събитието onunload и синхронен XMLHttpRequest - потребителя може да избере дали преди затваряне да запише данните Модални прозорци използване на реализацията в отделните браузъри window.showModalDialog(...); // IE window.open(url, '...;modal=yes;...'); // Gecko

16. Предпазване от загуба на данни (2/2) отваряне на прозорец само ако няма още отворен прозорец: var url = 'http://srv.com/page.html'; var h = window.open('', 'myWindow','width=400...'); if ('' == h.location.href) { // this is new window h.location.href = url; ... } else { // there is such window 'myWindow' ... }

17. Връзки Специфики на отделните браузъри http://www.quirksmode.org/ Шаблонът Observer http://sern.ucalgary.ca/courses/SENG/609.04/W98/lamsh/observerLib.html JSON http:/ /www.json.org/ Библиотека за JSON на Perl и C – http://libs.netclime.com/json_dl.html

18. Благодаря за вниманието! Въпроси, коментари, забележки?