Создание сайтов
<<  Официальный сайт турфирмы Silverlight 4  >>
ZEN - новая среда для разработки и выполнения web-приложений
ZEN - новая среда для разработки и выполнения web-приложений
Содержание
Содержание
Что такое ZEN
Что такое ZEN
Архитектура ZEN
Архитектура ZEN
Run-time поведение ZEN
Run-time поведение ZEN
Run-time поведение ZEN
Run-time поведение ZEN
AJAX
AJAX
ZEN и CSP
ZEN и CSP
Практическое занятие – ZEN Application
Практическое занятие – ZEN Application
ZEN Application
ZEN Application
Новое приложение ZEN
Новое приложение ZEN
ZEN компонент
ZEN компонент
Определение ZEN компонентов
Определение ZEN компонентов
Добавление компонента на страницу
Добавление компонента на страницу
ZEN методы
ZEN методы
ZEN методы
ZEN методы
ZEN стили
ZEN стили
Расположение на странице (ZEN Layout)
Расположение на странице (ZEN Layout)
Добавляем простой элемент
Добавляем простой элемент
Document Object Model
Document Object Model
Добавим id для наших кнопок
Добавим id для наших кнопок
Библиотека компонентов ZEN
Библиотека компонентов ZEN
Tablepane компонент
Tablepane компонент
Особенности tablePane
Особенности tablePane
«Snapshot» режим
«Snapshot» режим
TablePane
TablePane
Model – View - Controller
Model – View - Controller
Спасибо за внимание
Спасибо за внимание
Презентация «ZEN». Размер 507 КБ. Автор: elizabeth.

Загрузка...

ZEN

содержание презентации «ZEN.pps»
СлайдТекст
1 ZEN - новая среда для разработки и выполнения web-приложений

ZEN - новая среда для разработки и выполнения web-приложений

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

2 Содержание

Содержание

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

3 Что такое ZEN

Что такое ZEN

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

4 Архитектура ZEN

Архитектура ZEN

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

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

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

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

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

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

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

7 AJAX

AJAX

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

8 ZEN и CSP

ZEN и CSP

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

9 Практическое занятие – ZEN Application

Практическое занятие – ZEN Application

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

10 ZEN Application

ZEN Application

ZEN Application.

11 Новое приложение ZEN

Новое приложение ZEN

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

12 ZEN компонент

ZEN компонент

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

13 Определение ZEN компонентов

Определение ZEN компонентов

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

14 Добавление компонента на страницу

Добавление компонента на страницу

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

15 ZEN методы

ZEN методы

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

16 ZEN методы

ZEN методы

ZEN методы.

17 ZEN стили

ZEN стили

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

18 Расположение на странице (ZEN Layout)

Расположение на странице (ZEN Layout)

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

19 Добавляем простой элемент

Добавляем простой элемент

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

20 Document Object Model

Document Object Model

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

21 Добавим id для наших кнопок

Добавим id для наших кнопок

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

22 Библиотека компонентов ZEN

Библиотека компонентов ZEN

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

23 Tablepane компонент

Tablepane компонент

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

24 Особенности tablePane

Особенности tablePane

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

25 «Snapshot» режим

«Snapshot» режим

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

26 TablePane

TablePane

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

27 Model – View - Controller

Model – View - Controller

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

28 Спасибо за внимание

Спасибо за внимание

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

«ZEN»
Сайт

5informatika.net

115 тем