ZEN – новые возможности для разработки Web

Zen - новые возможности для разработки Webприложений
Сергей Кудинов
«InterSystems-Симпозиум 2007»
Содержание
Архитектура Zen Application Framework
Методология создание Zen приложения
Компоненты Zen
Подход Model-View-Controller
Использование SVG компонентов
Создание отчетов
Zen Community
Что такое Zen?
• Среда разработки и выполнения приложений
(Application Framework) для разработки Webприложений на основе технологии AJAX
• Расширяемая библиотека готовых компонентов,
генерирующих стандартный HTML и JavaScript
• Интеграция с постреляционной СУБД Caché
• Интеграция с Caché Studio
• Использование модели MODEL-VIEW-CONTROLLER
• Интеграция с SVG
AJAX
• AJAX (Asynchronous JavaScript and XML — «асинхронный
JavaScript и XML») — это подход к построению интерактивных
пользовательских интерфейсов web-приложений. При
использовании AJAX web-страница не перезагружается
полностью в ответ на каждое действие пользователя. Вместо
этого с web-сервера догружаются только нужные пользователю
данные. AJAX — один из компонентов концепции DHTML
• AJAX базируется на двух основных принципах:
– Использование DHTML для динамического изменения
содержания страницы;
– Использование XMLHttpRequest для обращения к серверу
«на лету», без перезагрузки всей страницы полностью
(также существует альтернативный вариант —
динамическая подгрузка JavaScript с использованием DOM).
Zen и CSP
• Среда Zen построена с использованием CSP. Zen
использует объектный подход к разработке приложений
CSP
• Zen не заменяет и не вытесняет CSP
• Zen использует основные возможности и особенности
CSP:
–
–
–
–
–
Производительность
Доступ к данным
Безопасность
Локализацию
Управление сессией
Архитектура Zen
Zen состоит из набора классов:
• Приложения Zen, состоящее из страниц Zen
• Страницы Zen:
– Объект страница
– Объекты компонент, определенные с помощью XML
– Методы, выполняемые в браузере и на сервере
• Компоненты Zen
– Готовые
– Собственные
Архитектура ZEN-приложения
Run-time поведение Zen
• Обращение к странице создает объект страницы и объекты всех
компонентов на сервере
• Затем дерево объектов выдает (renders) CSS, JavaScript, и
HTML, необходимый для отображения страницы в браузере у
клиента
• То же самое дерево объектов воссоздается в клиентском
браузере в виде набора JavaScript объектов
• Свойства, методы, наследование доступны на стороне клиента
• Обработчик событий вызывает методы на сервере и/или на
клиенте
Run-time поведение Zen
Document Object Model
• Мы создаем экземпляр DOM во время генерации
страницы, к которому можно обращаться и который
можно модифицировать программно
• Каждый компонент автоматически обрамляется HTML
тегом div. Используйте «обрамление» тегом div для
доступа и редактирования индивидуальных
компонентов на странице
• DOM браузера доступен как на стороне сервера, так и
на стороне клиента. Он может быть обновлен в рамках
вызова серверного (server side) метода
Document Object Model
Создание Zen приложения
• Studio предлагает шаблоны для создания Zen
приложения, Zen страниц, Zen компонентов, и Zen
методов
• Новое Zen приложение содержит:
– Параметр APPLICATIONNAME
– Параметр HOMEPAGE
– Блок XData Style
• Zen приложение является наследником класса
%ZEN.application
Пример Zen приложения
/// Пример Zen приложения
Class Demo.Application Extends %ZEN.application
{
/// Имя приложения.
Parameter APPLICATIONNAME = "Demo";
/// URL стартовой страницы приложения.
Parameter HOMEPAGE = "Demo.HomePage.cls";
/// Этот блок содержит CSS для всего приложения.
XData Style
{
<style type="text/css">
body {background: #F0F0FF;font-family: verdana;}
</style>
}
}
Добавление Zen страницы в
приложение
• Новая Zen страница содержит:
–
–
–
–
–
Параметр APPLICATION
Параметр PAGENAME
Параметр DOMAIN
Блок XData Style
Блок XData Contents
• Zen страница является наследником класса
%ZEN.Component.page
Callback-методы
• Перед сборкой страницы - %OnBeforeCreatePage
• После сборки страницы - %OnAfterCreatePage
• После %OnAfterCreatePage – рендеринг страницы в
%DrawHTML
Добавление компонента на страницу
Элементы управления и компоненты могут быть
добавлены к Zen странице 2 способами:
• Добавлением XML тега со всеми необходимыми
атрибутами вручную, редактируя блок Content страницы
• С помощью соответствующего шаблона в Studio. В
Studio добавлены шаблоны для HTML элементов, SQL
утверждений, Zen методов и Zen XML элементов
Расположение на странице (Zen Layout)
• Логическая структура компонентов на странице
обеспечивается компонентом group
• Каждая группа отвечает за расположение элементов,
которые в нее входят
• Используйте классы, унаследованные от класса
%ZEN.Component.group, для обеспечения
расположения на странице дочерних элементов
(например, group, menu, form, page)
• Специальные классы групп автоматически определяют
стратегию расположения для дочерних компонентов:
hgroup, vgroup.
Zen стили
• Для каждого компонента можно задать стиль по
умолчанию, используя стандартное CSS определение
стиля
• Стиль может быть переопределен на уровне
компонента, приложения и страницы
• Каскадное поведение: последний стиль имеет
преимущество
• Стиль определяется в XData блоке «Style» с помощью
тегов <style type=“text/css”> и </style> вручную или
используя Zen Style Wizard
Zen методы
• Zen методы могут быть методами экземпляра и класса
• Zen методы могут быть client-side, server-side, or serveronly methods (параметр «Location» метода):
– Клиентские (Client-side) методы пишутся на
JavaScript
[Language = JavaScript ]
– Серверные (Server-side) методы используют
ключевое слово «WebMethod»
– Методы, которые могут вызываться только на
сервере (server-only methods) должны начинаться с
«%»
Zen методы
Пример блока Contents страницы
XData Contents
{
<page title=“Заголовок страницы">
<button caption="ClientMethod"
onclick="zenPage.ClientMethod();"/>
<button caption="ServerMethod"
onclick="zenPage.ServerMethod();"/>
</page>
}
Пример серверного метода
Method ServerMethod() [ ZenMethod ]
{
Try {
set version = $ZVERSION
&js<alert('#(version)#');>
}
Catch(ex) {
&js<alert('Error in Server
method:\n#($ZCVT(ex.DisplayString(),"O","JS"))#');>
}
Quit
}
Пример клиентского метода
Method ClientMethod() [ Language = javascript ]
{
try {
alert('This is a browser method!');
}
catch (ex) {
zenExceptionHandler(ex,arguments);
}
}
Zen компонент
• Zen компонент является наследником класса
%ZEN.Component.component
• Компоненты могут обладать самой разной функциональностью:
от обертки для HTML элементов до сложных компонентов типа
календарь и grid (таблица)
• Несколько категорий компонентов:
– Элементы управления (Controls) – отображают данные и
позволяют пользователю вводить данные (например, text
или button)
– Группы (Groups) – содержат набор других компонентов
(например, group, menu и form)
– Панели (Panes) – отображают информацию (например,
tablePane)
Определение Zen компонентов
Zen компоненты состоят из 2 частей:
• Стиль (Style)
– Стандартная CSS Style Sheet
• Поведение (Behavior)
– Определение начального HTML, который будет
сгенерирован
– Набор свойств и методов
Библиотека компонентов Zen
Вот некоторые примеры готовых компонентов, которые
предоставляет Zen:
• Forms (автоматические и «ручные»)
• Panes
• Поля ввода, списки, переключатели, кнопки…
• Calendar
• Dynamic tree
• Grid
tablePane компонент
• Отображает данные и результаты поиска в легком для
использования табличном формате
• Данные извлекаются из содержимого запроса. Запрос
может быть:
– SQL утверждением
– Запросом класса
– Callback методом, генерирующим динамический
SQL
– SQL утверждением, автоматически созданным на
основе определений колонок и выбора
пользователей
Особенности tablePane
• Обозначение выбранной строки
• Обработка события onselectRow
• Пользователь может устанавливать фильтры для колонок:
выбор новых критериев поиска перезапускает запрос и
обновляет содержимое таблицы без перезагрузки страницы
• Пользователи могут контролировать стиль строки или
индивидуальной ячейки с помощью «row conditions»
• Пользователи могут сортировать данные, нажимая на колонку,
по которой они хотят отсортировать данные.
• Могут использоваться «snapshot» и «direct» режимы
«Snapshot» режим
• Результаты запроса копируются во временное
хранилище на сервере и извлекаются для
последовательные обновлений (refresh)
• «Snapshot» предоставляет механизм постраничной
обработки: Результаты могут отображаться с помощью
нескольких страниц в рамках tablePane. Пользователи
могут перемещаться по страницам без повторного
выполнения запроса
• Пользователи могут сортировать результаты без
повторного выполнения запроса
Model – View - Controller
• Простой способ для привязки элементов формы к
данным. Компонентами могут быть:
– Простые элементы данных
– Сложные объекты
• Использование в формах, диаграммах, индикаторах
• Разработчик управляет потоком данных настолько
детально, насколько это необходимо, или полностью
динамически
Архитектура MVC
• Модель
– Класс, свойства которого представляют данные на сервере
• Контроллер
– Невидимый компонент Zen на странице, связанный с
моделью
– Посредничество между моделью и одним или несколькими
представлениями, определенными на странице Zen
• Представление
- Визуальное отображение данных на странице Zen
- Получает и изменяет свойства модели, связанной с
контроллером
Model – View - Controller
• Форма для показа набора свойств из базы данных.
Форма использует элементы, соответствующие типам
данных каждого свойства
• Показ диаграммы по значениям свойств формы.
Диаграмма обновляется при изменении данных в
форме
• Индикация по данным на сервере. При обновлении
страницы значения индикаторов обновляются с сервера
Адаптер MVC
• Другой способ использования MVC - добавление
адаптера MVC Adapter к хранимому классу. Это
автоматически создает страницу для редактирования
объекта с привязкой к контроллеру.
• %ZEN.DataModel.Adapter
Что такое SVG?
• Стандарт для работы с двухмерной векторной графикой
в XML формате
• Поддержка браузерами
– Firefox поддерживает SVG
– Для Internet Explorer требуется установка Adobe
plug-in
• Графика может быть статической или динамической
(отображение меняется в зависимости от значений
данных).
Поддержка SVG в Zen
• Zen содержит библиотеку встроенных SVG
компонентов.
• Можно создать пользовательский SVG компонент,
унаследовав его от базового класса %ZEN.SVG
Component.svgComponent.
• SVG компоненты можно разместить на Zen странице :
– Статические внутри тегов <iframe> или <image>.
– Динамические внутри компонента SVG Frame
<svgFrame>.
Типы SVG компонентов
• Метрики – графическое представление 1-го значения
–
–
–
–
<fuelGauge>
<indicatorLamp>
<smiley>
<speedometer>
• Диаграммы – графическое представление набора
значений
– <lineChart>
– <barChart>
– <pieChart>
Метрики
• Добавьте компонент на страницу и задайте для него
атрибуты: надпись, диапазон значений, начальное
значение ...
• 2 способа изменения значения метрики:
– Программное изменение значения
– Связать метрику со значение в БД, используя MVC
Диаграммы
• Добавьте компонент на страницу и задайте для него
атрибуты: ширину, высоту, надписи, цвета ...
• 2 способа изменения значения данных диаграммы :
– Программное, задав через атрибут ongetData
javascript метод
– Связать метрику со значение в БД, используя MVC
Создание отчетов в Zen
• Каждый отчет в Zen Report – это класс.
• Один и тот же отчет может быть отображен в форматах:
xml, html или pdf.
• Значение формата по умолчанию может быть задано
внутри класса отчета. Во время получения отчета
значение формата может быть изменено через
параметр в URL.
• Класс отчета состоит из параметров и 2 блоков XData:
ReportDefinition и ReportDisplay.
Создание отчетов в Zen
• ReportDefinition определяет:
– SQL запрос
– Набор полей в виде XML тегов, которые будут
отображаться в отчете
• ReportDisplay определяет внешний вид
форматирования полученного XML документа.
Создание PDF отчетов в Zen
• Для получения отчета в формате PDF необходим
дополнительный инструментарий для преобразования
XML в XSL-FO, а затем в PDF.
• Инструментарий для преобразования XSL-FO to PDF:
– http://xmlgraphics.apache.org/fop
– http://www.renderx.com/tools/xep.html
• Определение дополнительного инструментария
– ^%SYS("zenreport","transformerpath")
Zen Community
http://www.intersystems.com/community/zen
http://groups.google.com/group/InterSystems-Zen
• Ресурс для online общения о технологии Zen
• Пользователи могут найти полезную информацию,
задать вопросы, обменяться опытом и кодом компонент
и приложений
• В сообщество входят партнеры-разработчики, конечные
пользователи и сотрудники InterSystems
Zen Community
• Вопросы-ответы (доступны через Web и e-mail
подписку)
• Технические статьи
• Примеры создания приложений
• Библиотеки пользовательских компонентов
Спасибо за внимание! Вопросы?
Кудинов Сергей
Sergey.Kudinov@InterSystems.com