Sergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk

1,795 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,795
On SlideShare
0
From Embeds
0
Number of Embeds
288
Actions
Shares
0
Downloads
41
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Sergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk

  1. 1. Эффективная разработка веб-интерфейсовс Ample SDK<br />
  2. 2. 1.1 О каких веб-интерфейсах идет речь?<br />
  3. 3. 1.2 JavaScript Библиотеки и Фреймворки<br /> Библиотеки (для веб-сайтов)<br />prototype.js, Mootools, Scriptaculous, jQuery...<br /> Пост-библиотеки / Пре-фреймворки<br />dojo, Qooxdoo, ExtJS, jQuery-UI, YUI, Google Closure...<br /> Фреймворки (для приложений)<br />Ample SDK, Backbase 4, Bindows, Cappuccino, Ajax.org...<br />
  4. 4. 1.3 Проблемы нефреймворков<br /> Проприетарный API<br /> Интерфейс «программируется» на JS+HTML<br /> Слабая поддержка цветовых схем компонентов<br /> Код приложения с ростом сложности быстро становится трудносопровождаемым<br />
  5. 5. 1.4 Когда нужен фреймворк?<br /> Интерфейс приложения содержит много типовых элементов взаимодействия<br /> Разрабатывается несколько приложений<br /> Требуется кросс-браузерность (IE до 9, FF etc.)<br /> Уровень абстракции браузера (HTML) недостаточен<br />
  6. 6. 2. Эксперимент «Ample SDK»<br />Ample SDK - это кросс-браузерный фреймворк для создания интерфейса пользователя в веб-браузере с использованием стандартных технологий и API.<br />Архитектура:<br /> Ядро (DOM, менеджеры UI, Extensibility API)<br /> Языки разметки интерфейса пользователя (SVG...)<br />
  7. 7. 2.1 Модель программирования<br />В сущности, Ample SDK есть веб-браузер написанный на JavaScript, поэтому модель программирования приложений идентична:<br /> Разметка интерфейса на XML (SVG, XUL, XHTML..)<br /> Стилизация интерфейса на CSS (CSS3-UI, CSS3-NS...)<br /> Логика интерфейса на JavaScript (DOM Level 3 APIs...)<br />
  8. 8. 3. Разметка интерфейса на XML<br /> Преимущества:<br /> Стандартная технология разметки<br /> Четкое отделение разметки интерфейса от стилизации и логики<br /> XML легко читается<br /> Подсказки кода в любом IDE<br />
  9. 9. 3.1 XML островки в HTML (Ample SDK)<br /><script type="application/ample+xml"><br /> <xul:menubar xmlns:xul="http://...only.xul"><br /> <xul:menu label="Файл"/><br /> <xul:menu label="Правка"/><br /> <xul:menu label="Вид"/><br /> </xul:menubar><br /></script><br />
  10. 10. 3.2 XML UI Технологии<br /> XHTML (eXtensible Hyper Text Markup Language, W3C)<br /> XUL (XML User interface Language, Mozilla)<br /> SVG 1.1 (Scalable Vector Graphics, W3C)<br /> XHTML 5 (в разработке)<br /> Charts (в разработке)<br /> XForms 1.1 (запланировано)<br /> ваша собственная?<br />
  11. 11. 4. Стилизация интерфейса на CSS<br /> Преимущества:<br /> Стандартная технология стилизации<br /> Отделение стиля от разметки интерфейса и логики<br /> Стилизация интерфейса как на уровне компонентов так и на уровне всего приложения<br />
  12. 12. 4.1 CSS островки в HTML (Ample SDK)<br /><style type="text/ample+css"><br /> @namespace xul url(http://...only.xul);<br /> xul|menu:hover {<br /> font-variant: italic;<br /> }<br /> xul|datepicker::value {<br /> background-color: red;<br /> }<br /></style><br />
  13. 13. 4.2 CSS Технологии<br /> CSS3 Namespaces<br /> @namespace xul url(http://...only.xul);<br /> xul|menuitem {font: normal 1em Verdana}<br /> CSS3 UI<br /> xul|datepicker::input {background-color:pink}<br /> Дополнительные псевдо-классы (:drag, :resize..)<br /> .mytarget:drop {border: dashed 1px red}<br />
  14. 14. 5. Логика приложения на JS, DOM API<br /> Преимущества:<br /> Стандартные технологии и API (W3C)<br /> Минимальный порог начала использования<br /> Возможность пере-использования написанного кода в браузерах нативно в будущем<br /> Разделение логики приложения и логики компонентов<br />
  15. 15. 5.1 JavaScript островки в HTML<br /><script type="text/javascript"><br />ample.addEventListener("load", function(oEvent) {<br /> var oNode = this.querySelector("svg|circle");<br /> oNode.setAttribute("r", 10);<br />}, false);<br /></script><br />"ample" — обьект, похожий на объект "document" веб-браузера, предоставляющий доступ к объектной модели документа Ample SDK, составленной из островков XML<br />
  16. 16. 5.2 JavaScript технологии Ample SDK<br /> DOM Core (Level 2/3)<br />Для создания и модификации документа<br /> DOM Events (Level 3)<br />Для подписки и реагирования на события в документе<br /> Selectors API<br />Для навигации по документу (поиска элементов)<br />
  17. 17. 5.3 Менеджеры UI<br /> Drag&Drop (e:dragstart, e:dragenter, e:dragleave, e:drag, e:drop s:dragend, p:$draggable, p:$droppable)<br /> Resize (e:resizestart, e:resize, e:resizeend, p:$resizeable)<br /> History (e:hashchange, m:$bookmark())<br /> Selection (p:$selectable)<br /> Capture (e:capture, e:losecapture, m:setCapture, m:releaseCapture)<br />
  18. 18. 5.4 Другие API и технологии<br />JavaScript APIs (обьекты):<br /> XMLHttpRequest, JSON,<br /> DOMParser, XMLSerializer, XSLTProcessor<br />XML APIs (mark-up):<br /> SMIL 3.0 (избранные модули), XInclude 1.0,<br /> XML Schema 1.1 (модуль типов данных)<br />
  19. 19. 6. Возможности расширения платформы<br /> Создание своих компонентов (XML языков и диалектов)<br />Примеры: Язык определения графиков, библиотека компонентов интерфейса мобильного приложения<br /> Создание менеджеров интерфейса<br />Примеры: Менеджер жестов мыши, менеджер окон<br />
  20. 20. 7. Почему стоит посмотреть Ample SDK?<br /> Знакомая модель программирования (W3C)<br /> Стандартные API (как в современном веб-браузере)<br /> Удобные «строительные элементы»<br /> Быстрый рендеринг<br /> Позволяет использовать SVG в Internet Explorer с 5.5<br /> Позволяет использовать XUL во всех браузерах<br /> Позволяет определять свои языки разметки<br />
  21. 21. 8. Ссылки<br />Ample SDK<br /> Сайт проекта: http://www.amplesdk.com<br /> Исходники: http://github.com/clientside/amplesdk<br /> Обсуждения: http://groups.google.com/amplesdk<br />Контакты докладчика<br /> E-mail: sergey@ilinsky.com<br /> Twitter: http://twitter.com/ilinsky<br />

×