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

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

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

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

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

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

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

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

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

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

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

11 Document Object Model

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

13 Пример Zen приложения /// Пример Zen приложения Class Demo.Application Extends %ZEN.application { /// Имя приложения. Parameter APPLICATIONNAME = "Demo"; /// URL стартовой страницы приложения. Parameter HOMEPAGE = "Demo.HomePage.cls"; /// Этот блок содержит CSS для всего приложения. XData Style { body {background: #F0F0FF;font-family: verdana;} } }

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

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

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

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

18 Zen стили Для каждого компонента можно задать стиль по умолчанию, используя стандартное CSS определение стиля Для каждого компонента можно задать стиль по умолчанию, используя стандартное CSS определение стиля Стиль может быть переопределен на уровне компонента, приложения и страницы Стиль может быть переопределен на уровне компонента, приложения и страницы Каскадное поведение: последний стиль имеет преимущество Каскадное поведение: последний стиль имеет преимущество Стиль определяется в XData блоке «Style» с помощью тегов и вручную или используя Zen Style Wizard Стиль определяется в XData блоке «Style» с помощью тегов и вручную или используя Zen Style Wizard

19 Zen методы Zen методы могут быть методами экземпляра и класса Zen методы могут быть методами экземпляра и класса Zen методы могут быть client-side, server-side, or server- only methods (параметр «Location» метода): 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 { XData Contents { } }

22 Пример серверного метода Method ServerMethod() [ ZenMethod ] {Try { set version = $ZVERSION &js } Catch(ex) { &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 Zen компонент является наследником класса %ZEN.Component.component Компоненты могут обладать самой разной функциональностью: от обертки для HTML элементов до сложных компонентов типа календарь и grid (таблица) Компоненты могут обладать самой разной функциональностью: от обертки для HTML элементов до сложных компонентов типа календарь и grid (таблица) Несколько категорий компонентов: Несколько категорий компонентов: –Элементы управления (Controls) – отображают данные и позволяют пользователю вводить данные (например, text или button) –Группы (Groups) – содержат набор других компонентов (например, group, menu и form) –Панели (Panes) – отображают информацию (например, tablePane)

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

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

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

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

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

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

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

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

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

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

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

36 Типы SVG компонентов Метрики – графическое представление 1-го значения Метрики – графическое представление 1-го значения – – Диаграммы – графическое представление набора значений Диаграммы – графическое представление набора значений – –

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

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

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

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

41 Создание PDF отчетов в Zen Для получения отчета в формате PDF необходим дополнительный инструментарий для преобразования XML в XSL-FO, а затем в PDF. Для получения отчета в формате PDF необходим дополнительный инструментарий для преобразования XML в XSL-FO, а затем в PDF. Инструментарий для преобразования XSL-FO to PDF: Инструментарий для преобразования XSL-FO to PDF: – – Определение дополнительного инструментария Определение дополнительного инструментария –^%SYS("zenreport","transformerpath")

42 Zen Community Ресурс для online общения о технологии Zen Ресурс для online общения о технологии Zen Пользователи могут найти полезную информацию, задать вопросы, обменяться опытом и кодом компонент и приложений Пользователи могут найти полезную информацию, задать вопросы, обменяться опытом и кодом компонент и приложений В сообщество входят партнеры-разработчики, конечные пользователи и сотрудники InterSystems В сообщество входят партнеры-разработчики, конечные пользователи и сотрудники InterSystems

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

44 Спасибо за внимание! Вопросы? Кудинов Сергей