Sergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk

Эффективная разработка веб-интерфейсовс Ample SDK

1.1 О каких веб-интерфейсах идет речь?

1.2 JavaScript Библиотеки и Фреймворки
Библиотеки (для веб-сайтов)
prototype.js, Mootools, Scriptaculous, jQuery...
Пост-библиотеки / Пре-фреймворки
dojo, Qooxdoo, ExtJS, jQuery-UI, YUI, Google Closure...
Фреймворки (для приложений)
Ample SDK, Backbase 4, Bindows, Cappuccino, Ajax.org...

1.3 Проблемы нефреймворков
Проприетарный API
Интерфейс «программируется» на JS+HTML
Слабая поддержка цветовых схем компонентов
Код приложения с ростом сложности быстро становится трудносопровождаемым

1.4 Когда нужен фреймворк?
Интерфейс приложения содержит много типовых элементов взаимодействия
Разрабатывается несколько приложений
Требуется кросс-браузерность (IE до 9, FF etc.)
Уровень абстракции браузера (HTML) недостаточен

2. Эксперимент «Ample SDK»
Ample SDK - это кросс-браузерный фреймворк для создания интерфейса пользователя в веб-браузере с использованием стандартных технологий и API.
Архитектура:
Ядро (DOM, менеджеры UI, Extensibility API)
Языки разметки интерфейса пользователя (SVG...)

2.1 Модель программирования
В сущности, Ample SDK есть веб-браузер написанный на JavaScript, поэтому модель программирования приложений идентична:
Разметка интерфейса на XML (SVG, XUL, XHTML..)
Стилизация интерфейса на CSS (CSS3-UI, CSS3-NS...)
Логика интерфейса на JavaScript (DOM Level 3 APIs...)

3. Разметка интерфейса на XML
Преимущества:
Стандартная технология разметки
Четкое отделение разметки интерфейса от стилизации и логики
XML легко читается
Подсказки кода в любом IDE

3.1 XML островки в HTML (Ample SDK)
<script type="application/ample+xml">
<xul:menubar xmlns:xul="http://...only.xul">
<xul:menu label="Файл"/>
<xul:menu label="Правка"/>
<xul:menu label="Вид"/>
</xul:menubar>
</script>

3.2 XML UI Технологии
XHTML (eXtensible Hyper Text Markup Language, W3C)
XUL (XML User interface Language, Mozilla)
SVG 1.1 (Scalable Vector Graphics, W3C)
XHTML 5 (в разработке)
Charts (в разработке)
XForms 1.1 (запланировано)
ваша собственная?

4. Стилизация интерфейса на CSS
Стандартная технология стилизации
Отделение стиля от разметки интерфейса и логики
Стилизация интерфейса как на уровне компонентов так и на уровне всего приложения

4.1 CSS островки в HTML (Ample SDK)
<style type="text/ample+css">
@namespace xul url(http://...only.xul);
xul|menu:hover {
font-variant: italic;
}
xul|datepicker::value {
background-color: red;
}
</style>

4.2 CSS Технологии
CSS3 Namespaces
@namespace xul url(http://...only.xul);
xul|menuitem {font: normal 1em Verdana}
CSS3 UI
xul|datepicker::input {background-color:pink}
Дополнительные псевдо-классы (:drag, :resize..)
.mytarget:drop {border: dashed 1px red}

5. Логика приложения на JS, DOM API
Стандартные технологии и API (W3C)
Минимальный порог начала использования
Возможность пере-использования написанного кода в браузерах нативно в будущем
Разделение логики приложения и логики компонентов

5.1 JavaScript островки в HTML
<script type="text/javascript">
ample.addEventListener("load", function(oEvent) {
var oNode = this.querySelector("svg|circle");
oNode.setAttribute("r", 10);
}, false);
</script>
"ample" — обьект, похожий на объект "document" веб-браузера, предоставляющий доступ к объектной модели документа Ample SDK, составленной из островков XML

5.2 JavaScript технологии Ample SDK
DOM Core (Level 2/3)
Для создания и модификации документа
DOM Events (Level 3)
Для подписки и реагирования на события в документе
Selectors API
Для навигации по документу (поиска элементов)

5.3 Менеджеры UI
Drag&Drop (e:dragstart, e:dragenter, e:dragleave, e:drag, e:drop s:dragend, p:$draggable, p:$droppable)
Resize (e:resizestart, e:resize, e:resizeend, p:$resizeable)
History (e:hashchange, m:$bookmark())
Selection (p:$selectable)
Capture (e:capture, e:losecapture, m:setCapture, m:releaseCapture)

5.4 Другие API и технологии
JavaScript APIs (обьекты):
XMLHttpRequest, JSON,
DOMParser, XMLSerializer, XSLTProcessor
XML APIs (mark-up):
SMIL 3.0 (избранные модули), XInclude 1.0,
XML Schema 1.1 (модуль типов данных)

6. Возможности расширения платформы
Создание своих компонентов (XML языков и диалектов)
Примеры: Язык определения графиков, библиотека компонентов интерфейса мобильного приложения
Создание менеджеров интерфейса
Примеры: Менеджер жестов мыши, менеджер окон

7. Почему стоит посмотреть Ample SDK?
Знакомая модель программирования (W3C)
Стандартные API (как в современном веб-браузере)
Удобные «строительные элементы»
Быстрый рендеринг
Позволяет использовать SVG в Internet Explorer с 5.5
Позволяет использовать XUL во всех браузерах
Позволяет определять свои языки разметки

8. Ссылки
Ample SDK
Сайт проекта: http://www.amplesdk.com
Исходники: http://github.com/clientside/amplesdk
Обсуждения: http://groups.google.com/amplesdk
Контакты докладчика
E-mail: sergey@ilinsky.com
Twitter: http://twitter.com/ilinsky

http://ritconf.ru	183
http://www.ritconf.ru	67
http://new.profyclub.ru	12
http://www.slideshare.net	8
http://profyclub.ontico.ru	3
http://2011.ritconf.ru	1

Sergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk

by rit2010 on Apr 13, 2010

Accessibility

Upload Details

Usage Rights

6 Embeds 274

Statistics

Sergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk — Presentation Transcript