1. Zen - новые возможности для разработки Web-приложений Сергей Кудинов «InterSystems-Симпозиум 2007»

2. Содержание Архитектура Zen Application Framework Методология создание Zen приложения Компоненты Zen Подход Model-View-Controller Использование SVG компонентов Создание отчетов Zen Community

3. Что такое Zen? • Среда разработки и выполнения приложений (Application Framework) для разработки Web- приложенийна основе технологии AJAX • Расширяемая библиотека готовых компонентов, генерирующих стандартный HTML и JavaScript • Интеграция с постреляционной СУБД Caché • Интеграция с Caché Studio • Использование модели MODEL-VIEW-CONTROLLER • Интеграция с SVG

4. AJAX • AJAX (Asynchronous JavaScript and XML — «асинхронный JavaScript и XML») — это подход к построению интерактивных пользовательских интерфейсов web-приложений. При использовании AJAX web-страница не перезагружается полностью в ответ на каждое действие пользователя. Вместо этого с web-сервера догружаются только нужные пользователю данные. AJAX — один из компонентов концепции DHTML • AJAX базируется на двух основных принципах: • Использование DHTML для динамического изменения содержания страницы; • Использование XMLHttpRequest для обращения к серверу «на лету», без перезагрузки всей страницы полностью (также существует альтернативный вариант — динамическая подгрузка JavaScript с использованием DOM).

5. Zen и CSP • Среда Zen построена с использованием CSP. Zen использует объектный подход к разработке приложений CSP • Zen не заменяет и не вытесняет CSP • Zen использует основные возможности и особенности CSP: • Производительность • Доступ к данным • Безопасность • Локализацию • Управление сессией

6. Архитектура Zen Zen состоит из набора классов: • Приложения Zen, состоящее из страниц Zen • Страницы Zen: • Объект страница • Объекты компонент, определенные с помощью XML • Методы, выполняемые в браузере и на сервере • Компоненты Zen • Готовые • Собственные

7. Архитектура ZEN-приложения

8. Run-time поведение Zen • Обращение к странице создает объект страницы и объекты всех компонентов на сервере • Затем дерево объектов выдает (renders) CSS, JavaScript, и HTML, необходимый для отображения страницы в браузере у клиента • То же самое дерево объектов воссоздается в клиентском браузере в виде набора JavaScript объектов • Свойства, методы, наследование доступны на стороне клиента • Обработчик событий вызывает методы на сервере и/или на клиенте

9. Run-time поведение Zen

10. Document Object Model • Мы создаем экземпляр DOM во время генерации страницы, к которому можно обращаться и который можно модифицировать программно • Каждый компонент автоматически обрамляется HTML тегом div. Используйте «обрамление» тегом div для доступа и редактирования индивидуальных компонентов на странице • DOM браузера доступен как на стороне сервера, так и на стороне клиента. Он может быть обновлен в рамках вызова серверного (server side) метода

11. Document Object Model

12. Создание Zen приложения • Studio предлагает шаблоны для создания Zen приложения, Zen страниц, Zen компонентов, иZen методов • Новое Zen приложениесодержит: • Параметр APPLICATIONNAME • Параметр HOMEPAGE • Блок XData Style • Zen приложение является наследником класса %ZEN.application

13. Пример 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>}}

14. Добавление Zen страницы в приложение • НоваяZen страница содержит: • Параметр APPLICATION • Параметр PAGENAME • Параметр DOMAIN • Блок XDataStyle • Блок XData Contents • Zen страница является наследником класса %ZEN.Component.page

15. Callback-методы • Перед сборкой страницы - %OnBeforeCreatePage • После сборки страницы - %OnAfterCreatePage • После %OnAfterCreatePage – рендеринг страницы в %DrawHTML

16. Добавление компонента на страницу Элементы управления и компоненты могут быть добавлены к Zen странице 2 способами: • Добавлением XML тега со всеми необходимыми атрибутами вручную, редактируя блок Content страницы • С помощью соответствующего шаблона в Studio. В Studio добавлены шаблоны для HTML элементов, SQL утверждений, Zen методов и Zen XML элементов

17. Расположение на странице (Zen Layout) • Логическая структура компонентов на странице обеспечивается компонентом group • Каждая группа отвечает за расположение элементов, которые в нее входят • Используйте классы, унаследованные от класса %ZEN.Component.group, для обеспечения расположения на странице дочерних элементов (например, group, menu, form, page) • Специальные классы групп автоматически определяют стратегию расположения для дочерних компонентов: hgroup, vgroup.

18. Zen стили • Для каждого компонента можно задать стиль по умолчанию, используя стандартное CSS определение стиля • Стиль может быть переопределен на уровне компонента, приложения и страницы • Каскадное поведение: последний стиль имеет преимущество • Стиль определяется в XData блоке «Style» с помощью тегов <style type=“text/css”> и </style> вручную или используя Zen Style Wizard

19. Zen методы • Zen методы могут быть методами экземпляра и класса • Zen методы могут быть client-side, server-side, or server-only methods (параметр «Location»метода): • Клиентские (Client-side)методы пишутся на JavaScript [Language = JavaScript ] • Серверные (Server-side)методы используют ключевое слово «WebMethod» • Методы, которые могут вызываться только на сервере (server-only methods) должны начинаться с «%»

20. Zen методы

21. Пример блока Contents страницы XData Contents {<page title=“Заголовок страницы"><button caption="ClientMethod" onclick="zenPage.ClientMethod();"/> <button caption="ServerMethod" onclick="zenPage.ServerMethod();"/></page>}

22. Пример серверного метода Method ServerMethod() [ ZenMethod ]{Try { set version = $ZVERSION &js<alert('#(version)#');> } Catch(ex) { &js<alert('Error in Servermethod:\n#($ZCVT(ex.DisplayString(),"O","JS"))#');> } Quit}

23. Пример клиентского метода Method ClientMethod() [ Language = javascript ]{ try { alert('This is a browser method!'); } catch (ex) {zenExceptionHandler(ex,arguments); }}

24. Zen компонент • Zen компонентявляется наследником класса %ZEN.Component.component • Компоненты могут обладать самой разной функциональностью: от обертки для HTML элементов до сложных компонентов типа календарь и grid (таблица) • Несколько категорий компонентов: • Элементы управления (Controls) – отображают данные и позволяют пользователю вводить данные (например, text или button) • Группы (Groups) – содержат набор других компонентов (например, group, menu и form) • Панели (Panes) – отображают информацию (например, tablePane)

25. Определение Zen компонентов Zen компоненты состоят из 2 частей: • Стиль (Style) • Стандартная CSS Style Sheet • Поведение (Behavior) • Определение начального HTML, который будет сгенерирован • Набор свойств и методов

26. Библиотека компонентов Zen Вот некоторые примеры готовых компонентов, которые предоставляет Zen: • Forms (автоматические и «ручные») • Panes • Поля ввода, списки, переключатели, кнопки… • Calendar • Dynamic tree • Grid

27. tablePane компонент • Отображает данные и результаты поиска в легком для использования табличном формате • Данные извлекаются из содержимого запроса. Запрос может быть: • SQL утверждением • Запросом класса • Callback методом, генерирующим динамический SQL • SQL утверждением, автоматически созданным на основе определений колонок и выбора пользователей

28. Особенности tablePane • Обозначение выбранной строки • Обработка события onselectRow • Пользователь может устанавливать фильтры для колонок: выбор новых критериев поиска перезапускает запрос и обновляет содержимое таблицы без перезагрузки страницы • Пользователи могут контролировать стиль строки или индивидуальной ячейки с помощью «row conditions» • Пользователи могут сортировать данные, нажимая на колонку, по которой они хотят отсортировать данные. • Могут использоваться «snapshot»и«direct»режимы

29. «Snapshot»режим • Результаты запроса копируются во временное хранилище на сервере и извлекаются для последовательные обновлений (refresh) • «Snapshot» предоставляет механизм постраничной обработки: Результаты могут отображаться с помощью нескольких страниц в рамках tablePane. Пользователи могут перемещаться по страницам без повторного выполнения запроса • Пользователи могут сортировать результаты без повторного выполнения запроса

30. Model – View - Controller • Простой способ для привязки элементов формы к данным. Компонентами могут быть: • Простые элементы данных • Сложные объекты • Использование в формах, диаграммах, индикаторах • Разработчик управляет потоком данных настолько детально, насколько это необходимо, или полностью динамически

31. Архитектура MVC • Модель • Класс, свойства которого представляют данные на сервере • Контроллер • Невидимый компонент Zen на странице, связанный с моделью • Посредничество между моделью и одним или несколькими представлениями, определенными на странице Zen • Представление • Визуальное отображение данных на странице Zen • Получает и изменяет свойства модели, связанной с контроллером

32. Model – View - Controller • Форма для показа набора свойств из базы данных. Форма использует элементы, соответствующие типам данных каждого свойства • Показ диаграммы по значениям свойств формы. Диаграмма обновляется при изменении данных в форме • Индикация по данным на сервере. При обновлении страницы значения индикаторов обновляются с сервера

33. Адаптер MVC • Другой способ использования MVC - добавлениеадаптера MVC Adapter к хранимому классу. Это автоматически создает страницу для редактирования объекта с привязкой к контроллеру. • %ZEN.DataModel.Adapter

34. Что такое SVG? • Стандарт для работы с двухмерной векторной графикой в XML формате • Поддержка браузерами • Firefox поддерживаетSVG • Для Internet Explorer требуется установка Adobe plug-in • Графика может быть статической или динамической (отображение меняется в зависимости от значений данных).

35. Поддержка SVG в Zen • Zen содержитбиблиотеку встроенных SVG компонентов. • Можно создать пользовательский SVG компонент, унаследовав его от базового класса%ZEN.SVGComponent.svgComponent. • SVG компоненты можно разместить на Zen странице : • Статические внутри тегов <iframe> или<image>. • Динамические внутри компонента SVG Frame <svgFrame>.

36. Типы SVG компонентов • Метрики– графическое представление 1-го значения • <fuelGauge> • <indicatorLamp> • <smiley> • <speedometer> • Диаграммы– графическое представление набора значений • <lineChart> • <barChart> • <pieChart>

37. Метрики • Добавьте компонент на страницу и задайте для него атрибуты: надпись, диапазон значений, начальное значение ... • 2 способа изменения значения метрики: • Программное изменение значения • Связать метрику со значение в БД, используя MVC

38. Диаграммы • Добавьте компонент на страницу и задайте для него атрибуты: ширину, высоту, надписи, цвета ... • 2 способа изменения значения данных диаграммы : • Программное, задав через атрибут ongetData javascript метод • Связать метрику со значение в БД, используя MVC

39. Создание отчетов в Zen • Каждый отчет в Zen Report – это класс. • Один и тот же отчет может быть отображен в форматах: xml, html илиpdf. • Значение формата по умолчанию может быть задано внутри класса отчета. Во время получения отчета значение формата может быть изменено через параметр в URL. • Класс отчета состоит из параметров и 2 блоков XData: ReportDefinition и ReportDisplay.

40. Создание отчетов в Zen • ReportDefinition определяет: • SQL запрос • Набор полей в виде XML тегов, которые будут отображаться в отчете • ReportDisplay определяет внешний вид форматирования полученного XML документа.

41. Создание 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")

42. Zen Community http://www.intersystems.com/community/zen http://groups.google.com/group/InterSystems-Zen • Ресурс для online общения о технологии Zen • Пользователи могут найти полезную информацию, задать вопросы, обменяться опытом и кодом компонент и приложений • В сообщество входят партнеры-разработчики, конечные пользователи и сотрудники InterSystems

43. Zen Community • Вопросы-ответы (доступны через Web и e-mail подписку) • Технические статьи • Примеры создания приложений • Библиотеки пользовательских компонентов

44. Спасибо за внимание! Вопросы? Кудинов Сергей Sergey.Kudinov@InterSystems.com