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