ZEN - новая среда для разработки и выполнения Web-приложений Александр Павлов «Школа Инноваций InterSystems 2007»

Содержание Введение в ZEN Application Framework СтилиСтили Компоненты ZEN Document Object Model

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

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

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

Run-time поведение ZEN

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).

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

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

ZEN Application

Упражнение 1 В этом упражнении мы создадим новое приложение ZEN, домашнюю страницу для этого приложения и обратимся к ней из браузера. В этом упражнении мы создадим новое приложение ZEN, домашнюю страницу для этого приложения и обратимся к ней из браузера.

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

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

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

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) должны начинаться с «%»

ZEN методы

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

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

Упражнение 2 – Добавляем простой элемент В этом упражнении мы добавим 2 простых элемента (control) button на нашу ZEN страницу. Эти 2 элемента будут вызывать client side и server side методы. Мы также добавим элемент group для управления расположением кнопок. В этом упражнении мы добавим 2 простых элемента (control) button на нашу ZEN страницу. Эти 2 элемента будут вызывать client side и server side методы. Мы также добавим элемент group для управления расположением кнопок.

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

Упражнение 3 – Document Object Model В этом упражнении мы добавим id для наших кнопок, чтобы получить возможность модифицировать их с помощью сгенерированного DOM во время исполнения. Мы обратимся к DOM с помощью серверного (server side) и клиентского (client side) методов для того чтобы модифицировать компоненты. В этом упражнении мы добавим id для наших кнопок, чтобы получить возможность модифицировать их с помощью сгенерированного DOM во время исполнения. Мы обратимся к DOM с помощью серверного (server side) и клиентского (client side) методов для того чтобы модифицировать компоненты.

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

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

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

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

Упражнение 4 – tablePane В этом упражнении мы добавим компонент tablePane, связанный с запросом класса, на нашу страницу. Компонент tablePane будет работать в «Snapshot» режиме. В этом упражнении мы добавим компонент tablePane, связанный с запросом класса, на нашу страницу. Компонент tablePane будет работать в «Snapshot» режиме.

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

Спасибо за внимание! Вопросы? Александр Павлов «Школа Инноваций InterSystems 2007»