Transcript Document

ZEN - новая среда для разработки и выполнения
Web-приложений
Александр Павлов
«Школа Инноваций InterSystems 2007»
Содержание
Введение в ZEN Application Framework
Компоненты ZEN
Стили
Document Object Model
Что такое ZEN?
• Среда разработки и выполнения приложений
(Application Framework) для разработки Webинтерфейса приложений
• Управляемая моделями архитектура (Model driven
architecture)
• Расширяемая библиотека готовых компонентов,
генерирующих стандартный HTML и JavaScript
• Интеграция с постреляционной СУБД Caché
• Интеграция с Caché Studio
• Интеграция с SVG
Архитектура ZEN
ZEN состоит из набора классов:
• Приложения ZEN, состоящее из страниц ZEN
• Страницы ZEN:
– Объект страница
– Объекты компонент, определенные с помощью XML
– Методы, выполняемые в браузере и на сервере
• Компоненты ZEN
– Готовые
– Собственные
Run-time поведение ZEN
• Обращение к странице создает объект страницы и объекты всех
компонентов на сервере
• Затем дерево объектов выдает (renders) CSS, JavaScript, и
HTML, необходимый для отображения страницы в браузере у
клиента
• То же самое дерево объектов воссоздается в клиентском
браузере в виде набора JavaScript объектов
• Свойства, методы, наследование доступны на стороне клиента
• Обработчик событий вызывает методы на сервере и/или на
клиенте
Run-time поведение ZEN
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
Application
• Studio предлагает шаблоны для создания ZEN
приложения, ZEN страниц, ZEN компонентов, и ZEN
методов
• Новое ZEN приложение содержит:
–
–
–
–
Параметр APPLICATIONNAME
Параметр HOMEPAGE
Параметр DOMAIN
Блок XData Style
• ZEN приложение является наследником класса
%ZEN.application
ZEN Application
Упражнение 1
• В этом упражнении мы создадим новое приложение
ZEN, домашнюю страницу для этого приложения и
обратимся к ней из браузера.
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 странице 2 способами:
• Добавлением XML тега со всеми необходимыми
атрибутами вручную, редактируя блок Content страницы
• С помощью соответствующего шаблона в Studio. В
Studio добавлены шаблоны для HTML элементов, SQL
утверждений, ZEN методов и ZEN XML элементов
ZEN методы
• ZEN методы могут быть методами экземпляра и класса
• ZEN методы могут быть client-side, server-side, or serveronly methods (параметр «Location» метода):
– Клиентские (Client-side) методы пишутся на
JavaScript
[Language = JavaScript ]
– Серверные (Server-side) методы используют
ключевое слово «WebMethod»
– Методы, которые могут вызываться только на
сервере (server-only methods) должны начинаться с
«%»
ZEN методы
ZEN стили
• Для каждого компонента можно задать стиль по
умолчанию, используя стандартное CSS определение
стиля
• Стиль может быть переопределен на уровне
приложения, компонента и страницы
• Каскадное поведение: последний стиль имеет
преимущество
• Стиль определяется в XData блоке «Style» с помощью
тегов <style type=“text/css”> и </style>
Расположение на странице (ZEN Layout)
• Логическая структура компонентов на странице
обеспечивается компонентом group
• Каждая группа отвечает за расположение элементов,
которые в нее входят
• Используйте классы, унаследованные от класса
%ZEN.Component.group, для обеспечения
расположения на странице дочерних элементов
(например, group, menu, form, page)
• Специальные классы групп автоматически определяют
стратегию расположения для дочерних компонентов:
hgroup, vgroup.
Упражнение 2 – Добавляем простой элемент
• В этом упражнении мы добавим 2 простых элемента
(control) button на нашу ZEN страницу. Эти 2 элемента
будут вызывать client side и server side методы. Мы
также добавим элемент group для управления
расположением кнопок.
Document Object Model
• Мы создаем экземпляр DOM во время генерации
страницы, к которому можно обращаться и который
можно модифицировать программно
• Каждый компонент автоматически обрамляется HTML
тегом div. Используйте «обрамление» тегом div для
доступа и редактирования индивидуальных компонентов
на странице
• DOM браузера доступен как на стороне сервера, так и на
стороне клиента. Он может быть обновлен в рамках
вызова серверного (server side) метода и изменение
произойдет, когда вернется ответ после вызова метода
Упражнение 3 – Document Object
Model
• В этом упражнении мы добавим id для наших кнопок,
чтобы получить возможность модифицировать их с
помощью сгенерированного DOM во время исполнения.
Мы обратимся к DOM с помощью серверного (server
side) и клиентского (client side) методов для того чтобы
модифицировать компоненты.
Библиотека компонентов ZEN
Вот некоторые примеры готовых компонентов, которые
предоставляет ZEN:
• Forms (автоматические и «ручные»)
• Panes
• Calendar
• Dynamic tree
• Grid
Давайте посмотрим на эти компоненты …
tablePane компонент
• Отображает данные и результаты поиска в легком для
использования табличном формате
• Данные извлекаются из содержимого запроса. Запрос
может быть:
– SQL утверждением
– Запросом класса
– Callback методом, генерирующим динамический
SQL
– SQL утверждением, автоматически созданным на
основе определений колонок и выборе
пользователей
Особенности tablePane
• Обозначение выбранной строки
• Обработка события onselectRow
• Пользователь может устанавливать фильтры для колонок:
выбор новых критериев поиска перезапускает запрос и
обновляет содержимое таблицы без перезагрузки страницы
• Пользователи могут контролировать стиль строки или
индивидуальной ячейки с помощью «row conditions»
• Пользователи могут сортировать данные, нажимая на
колонку, по которой они хотят отсортировать данные.
• Могут использоваться «snapshot» и «direct» режимы
«Snapshot» режим
• Результаты запроса копируются во временное хранилище
на сервере и извлекаются для последовательные
обновлений (refresh)
• «Snapshot» предоставляет механизм постраничной
обработки: Результаты могут отображаться с помощью
нескольких страниц в рамках tablePane. Пользователи
могут перемещаться по страницам без повторного
выполнения запроса
• Пользователи могут сортировать результаты без
повторного выполнения запроса
Упражнение 4 – tablePane
• В этом упражнении мы добавим компонент tablePane,
связанный с запросом класса, на нашу страницу.
Компонент tablePane будет работать в «Snapshot»
режиме.
Model – View - Controller
• Форма для показа набора свойств из базы данных.
Форма использует элементы, соответствующие типам
данных каждого свойства
• Показ диаграммы по значениям свойств формы.
Диаграмма обновляется при изменении данных в
форме
• Индикация по данным на сервере. При обновлении
страницы значения индикаторов обновляются с сервера
Спасибо за внимание! Вопросы?
Александр Павлов
«Школа Инноваций InterSystems 2007»