При первом входе в developerWorks для Вас будет создан профиль. Выберите информацию отображаемую в Вашем профиле — скрыть или отобразить поля можно в любой момент.

Вся введенная информация защищена.

При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Вся введенная информация защищена.

My developerWorks:

Сообщения:

Выйти

Выбрать язык:

Введение в XForms, Часть 3: Применение действий и событий

Крис Херборт, внештатный сотрудник, Свободный писатель

Крис Херборт (Chris Herborth) уже более 10 лет пишет об операционных системах и программировании. Он выигрывал награды как старший технический писатель. Если он не играет с сыном Алексом или просто проводит время с женой, Крис посвящает свое свободное время написанию статей и исследованию видео игр (то есть, игре).

Описание: XForms – это новое поколение обработки данных, использующее web-технологии. Новая версия заменяет традиционные формы HTML на модели данных XML и элементы представления. Эта серия статей содержит информацию о XForms и их возможностях, об основных моделях и формах XForms, о различных типах управления, а также об основных и расширенных формах представления. В третьей статье данной серии описывается, как с XForms использовать действия и события, как управлять форматом вывода формы.

Больше статей из этой серии

Пометить это!

Дата: 26.09.2006
Уровень сложности: средний
Активность: 2482 просмотров
Комментарии:

Введение

XForms быстро получила распространение; имея поддержку для общих браузеров, используя расширения или подключение с помощью технологии IBM ® Workplace Forms (см. раздел Ресурсы, чтобы узнать больше). Гибкость и производительность делают эту техногологию привлекательной для web разработчиков, а маленькое дисковое пространство и простота в обслуживании клиентов привлекает системных администраторов. В данный момент W3C анализирует XForms 1.1 как рабочий проект документа (официально рекомендовано 1.0, что позволяет им находится на одном уровне с XHTML, PNG и CSS). IBM пытается соединить конкурирующие формы стандартов, основывающихся на XML, с возможностями и свойствами XForms.

Свободный просмотр и редактирование XForms

В этой серии используются Firefox web-браузер с расширением XForms для отображения и взаимодействия с документами XForms. Поддержка XForms прибавляется к современной версии Mozilla, Firefox и Seamonkey. Пользователи Microsoft Internet Explorer 6 могут загрузить и установить formsPlayer (см. в разделе Ресурсы информацию, которая описывает оба браузера), чтобы добавить XForms-поддержку в качестве подключения ActiveX.

В этой статье описывается, как с XForms использовать действия и события, как управлять форматом вывода формы. В Части 1 были описаны различные браузеры и их программы подключения, которые нужны для отображения и взаимодействия с документами XForms, поэтому в этой части останавливаться на этом вопросе мы не будем. В Части 2 рассказывается, как посредством применения любых доступных элементов управления создать формы, базирующиеся на XForms; как создать модель данных и различные виды основных доступных действий представления. Если вы находитесь в процессе или у вас уже есть подключение, работающее с вашим любимым браузером, вы можете сразу же загрузить код этой статьи и просмотреть примеры XForms.

В начало

События и Действия

XForms применяют сиандарт XML Events для подключения обработчиков событий к особым элементам документа. События XML – это XML представление модели события DOM от HTML. В случае если вы еще не сталкивались с этим вопросом, давайте вкратце разберем модель события.

Как организовываются события

Фаза вывода изображения начинается, когда происходит событие (щелчок или активизация мышкой). Начиная от основания дерева документа и спускаясь к элементам, где было запущено событие, каждый элемент имеет возможность обработать событие. Если событие достигло целевого элемента без обработки и тип события это допускает, начинается пузырьковая фаза. Событие обратно по дереву перемещается к основанию документа.

Элементы могут быть наблюдателями; обработчик событий наблюдателя будет активизироваться тогда, когда событие проходит в двух направлениях. Обработчик событий может прослушать только одну фазу, следовательно, если вы хотите совершить действия во время каждой фазы, к элементу вы должны подключить два обработчика событий.

В листинге 1 показан пример достаточно простого XHTML-документа. Когда он загружается в web-браузер, для изображения этого документа создается дерево DOM (как показано на рисунке 1).

Листинг 1. Простой XHTML-документ

                 
  <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Event path</title>
</head>
<body>
<h1>Event path</h1>
<p>
What happens if you click on <em>this</em> element?
</p>
</body>
</html>

Если пользователь щелкнет на элемент <p>, событие начнет перемещаться по маршруту сети (рисунок 1); это фаза сбора данных. Если не один из обработчиков событий не обработал запрос, событие будет обратно перемещаться по тому же маршруту, до тех пор, пока не вернется к основному элементу, где установленный по умолчанию обработчик запроса будет пропускать его.

Рисунок 1. Перемещение события по дереву DOM

В HTML вы можете соединять действия JavaScript с различными событиями, например, использовать onclick (щелчок) или mouseover (движение мышкой) для обработки события. Например, если вы изменяете элемент <p> листинга 1 на элемент из листинга 2, вы можете щелкнуть на "this" (этот) элемент и на экране пользователя высветится окно предупреждения JavaScript™. Событие в данном случае - это щелчок мышкой, который обрабатывается наблюдателем (элемент <em>) и обработчиком (та часть, где используется JavaScript).

Листинг 2. Обработчик событий XHTML

                 
 <p>
What happens if you click on <em onclick="alert('Click!'); return
 true;">this</em> element?
</p>

Данные технологии применялись годами, так почему же их не использовать и для XForms? Имя события жестко закодировано, в данном случае используется язык XHTML. Для того чтобы добавить новое событие, нужно добавить новый атрибут. Имя события также имеет особенности в области аппаратного обеспечения, такие как "щелчок" во время активации элемента (можно щелкнуть мышкой, выделить, активизировать, нажав на Return на клавиатуре или запустить другим способом). Чтобы создать обработчика вы можете использовать только один язык сценариев, так как вы можете получить только один экземпляр атрибута. И, наконец, тексты обработчика событий соединяются с представленной разметкой.

С XForms эти проблемы решаются путем применения XML и усиления XML Events (см. Ресурсы ). Событие, наблюдатель и обработчик считаются частью управления XForms. Например, в листинге 3, щелкая по кнопке мышки, XHTML высветит на экране предупреждение.

Событие и обработчик XHTML вложенные в элемент <button>

                
<button name="Click me" onclick="alert("You clicked me!"); return true;"/>

Листинг 4 описывает, как получить те же результаты, используя XForms.

Листинг 4. События и обработчик XForms

                 
<xf:trigger>
   <xf:label>Click me</xf:label>
   <xf:message level="modal" ev:event="DOMActivate">You clicked
 me!</xf:message>
</xf:trigger>

Создается наблюдатель, который следит за событием DOMActivate (также как onclick событие в XHTML) к действию <xf:message> (которое отображает сообщение, содержащее предупреждение) к запуску. Когда вы щелкаете на эту процедуру, на экране высвечивается предупреждение.

Стандарт XForms ведет список большого количества событий, который может быть направлен на управление (любой элемент из <xf:group>, <xf:input>, <xf:output>, <xf:range>, <xf:submit>, <xf:secret>, <xf:select>, <xf:select1>, <xf:textarea>, <xf:trigger>, или <xf:upload>), модель, <xf:submission> и экземпляр. Просмотрите раздел Ресурсы, содержащий основную информацию о различных событиях и о том, как ими пользоваться.

Как вы могли видеть в листинге 4, обработчик событий XForms (как <xf:message> ) присоединен к определенному событию. Существует ряд действий в XForms, которые можно использовать в обработчике событий:

<xf:action> - Контейнер для других действий, который активизируется в порядке установленном внутри элемента <xf:action>.
<xf:dispatch> - Отправьте событие (законченное или предопределенное событие XForms) к целевому объекту. Вы можете установить, отправилось ли событие по направлению к основе дерева, в случае, если целевой элемент его не обработал.
<xf:load> - Загрузите установленный URL в новом окне, или замените существующий документ.
<xf:message> - Выведите на экран установленное сообщение (оно может быть в экземпляре, загруженным с внешнего файла или инкапсулированным в элемент <xf:message>) для пользователя.
<xf:rebuild> - Вызывает процессор XForms для восстановления любой внутренней структуры данных, которая применяется для отслеживания отношений между элементами данных экземпляра. Вызывает событие xforms-rebuild.
<xf:recalculate> - Пересчитайте и обновите элементы данных экземпляра. Вызывает событие xforms-recalculate.
<xf:refresh> - Обновите пользовательский интерфейс XForms, изменив элементы управления для отображения состояния экземпляра. Вызывает событие xforms-refresh.
<xf:reset> - Восстановите форму, вызвав событие xforms-reset. Скорее всего вам не нужно будет это делать, так как пользователи никогда не восстанавливают первичное состояние формы.
<xf:revalidate> - Перепроверьте данные экземпляра согласно установленной модели обработки. Вызывает событие xforms-revalidate.
<xf:send> - Отправляет событие xforms-submit, активизировав обработку представленных форм.
<xf:setfocus> - Отправьте событие xforms-focus к установленному управлению. Это может использоваться для получения доступа к свойствам.
<xf:setvalue> - Точно установите значение установленных данных экземпляра документа.

Давайте воспользуемся простой формой поиска, которая была разработана в двух первых статьях. Она содержит отдельное поле ввода текста для поиска ключевого слова и одну кнопку для отображения результатов поиска. В листинге 5 некоторые обработчики событий DOMFocusIn (которые были выделены) присоединяются к дополнительным временным ("ephemeral") отображениям для элементов управления.

Увеличение количества полезных сообщений с <xf:message>

                
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:xf="http://www.w3.org/2002/xforms"
    xmlns:xsd="http://www.w3.org/2001/XMLSchema"
    xmlns:ev="http://www.w3.org/2001/xml-events">
<head>
<title>Search Form</title>
<xf:model>
    <xf:instance>
        <data xmlns="">
            <query/>
        </data>
    </xf:instance>
    <xf:submission action="http://localhost/imaginary-search-engine" 
        method="get" id="submit-search"/>
</xf:model>
</head>
<body>
<h1>Search Form</h1>

<p>
Enter a search string, then click the Search button.
</p>

<p>
<xf:input ref="query">
    <xf:label>Find:</xf:label>
    <xf:message level="ephemeral" ev:event="DOMFocusIn">
    Enter your search keywords here, then click Search.
    </xf:message>
</xf:input>
<xf:submit submission="submit-search">
    <xf:label>Search</xf:label>
    <xf:message level="ephemeral" ev:event="DOMFocusIn">
    Click here to begin searching for your keywords.
    </xf:message>
</xf:submit>
</p>
</body>
</html>

Они могут быть в виде всплывающей подсказки или однотипных мини окон, как показано на рисунке 2.

Рисунок 2. Элементы <xf:message> в действии
<xf:message> в действии

Теперь, когда у вас есть достаточно информации об обработке событий с XForms, мы рассмотрим некоторые дополнительные вопросы и опции.

В начало

Представленные форматы и опции

Вторая часть этой серии кратко описывает различные основные представленные методы XForms, которые перечисляются ниже:

<xf:submission method="form-data-post" action="url"/> так же как <form method="post" enctype="multipart/form-data"> в HTML, они могут обрабатываться в полученных URL тем же способом. Экземпляр данных переходит в последовательный режим как многоэлементная форма данных

<xf:submission method="get" action="url"/> так же как <form method="get"> В HTML. Экземпляр данных переходит в последовательный режим с кодировкой URL и прикрепляется к определенному URL.

<xf:submission method="post" action="url"> отправляет экземпляр модели данных формы к определенному URL, как и в случае с документом XML. Аналога в документе HTML нет.

<xf:submission method="put" action="url"> составляет экземпляр модели данных формы к определенному URL, как и в случае с документом XML, при условии, что для этого URL у вас есть PUT разрешение сервера. Аналога в документе HTML нет.

<xf:submission method="urlencoded-post" action="url"> тоже, что <form method="post" enctype="application/x-www-form-urlencoded"> в HTML. Экземпляр данных переходит в последовательный режим как многоэлементные связанные данные.

put и get вспомогательный файл методов: http:/https: URL, другой поддерживается http:/https: и mailto: URLs.

Элемент <xf:submission> позволяет некоторым дополнительным атрибутам содействовать в управлении XML, созданного процессором XForms из экземпляра модели данных:

version - Определяет версию XML для создания (значение по умолчанию"1.0")
indent - Определяет, должен ли созданный XML содержать свободное место, необходимое для улучшения качества чтения
mediatype - Определить тип MIME для созданного XML (вы должны убедится, что тип среды совместим с приложением/xml, значение по умолчанию)
encoding - Определяет кодировку текста для созданного XML
omit-xml-declaration - Определяет, нужно ли опустить описание XML
standalone - Определяет, нужно ли включить автономное описание в XML
includenamespaceprefixes - Список без разделенного пространства имен; элементы, которые согласовывают эти пространства, содержатся в выходных данных XML

Атрибут separator также может использоваться для определения символов, которые используются для разделения пар ключ=значение в кодировке URL (значение по умолчанию ";").

Незначительно изменяя основную форму поиска чтобы применить put к файлу, вы можете видеть, что выходные данные XML дают результаты в листинге 6, который показывает, как выглядит созданный по умолчанию XML при помощи XForms из экземпляра модели данных. Он содержит описание пространства имен XML с документа XForms, который не совсем соответствует экземпляру.

Листинг 6. Образец выходных данных XForms XML

                
<?xml version="1.0" encoding="UTF-8"?>
<data xmlns:xf="http://www.w3.org/2002/xforms" 
xmlns:xsd="http://www.w3.org/2001/XMLSchema" 
xmlns:ev="http://www.w3.org/2001/xml-events">
            <query>xforms standard</query>
        </data>

Добавление includenamespaceprefixes="#default" к элементу <xf:submission> обеспечит вам доступ к документу в листинге 7, в котором содержится пространство имен по умолчанию, которое вы установили для модели. В этом случае, пространство имен отсутствует, и вы получаете основной неприкрашенный XML-документ, содержащий данные, полученные от экземпляра модели данных.

Листинг 7. Только пространство имен по умолчанию

                    
<?xml version="1.0" encoding="UTF-8"?>
<data xmlns="">
            <query>another test</query>
        </data>

Применяя <xf:submission> и используя его опции, вы можете контролировать процесс пересылки ваших данных на сервер.

Форма без объекта

С XForms вы можете получить форму без каких-либо элементов, типа <xf:submission>. Данные появляются и исчезают вместе с web-браузером пользователя, хотя все еще могут быть полезными. Например, вы можете вообразить, что являетесь учеником средней школы, который изучает компьютерные науки (см. рисунок 3), и занимаетесь созданием преобразователя температуры.

Рисунок 3. Задание ученика средней школы по компьютерным наукам: Создать преобразователь температуры

Это можно легко сделать (см. листинг 8), если ваши друзья, с которыми вы общаетесь через интернет, будут жаловаться, что у них жаркая или холодная погода. Вы должны быстро определить какие у них проблемы с температурой.

Листинг 8. Преобразователь температуры в стиле XForms

                
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:xf="http://www.w3.org/2002/xforms"
    xmlns:xsd="http://www.w3.org/2001/XMLSchema"
    xmlns:ev="http://www.w3.org/2001/xml-events">
<head>
<title>Temperature Converter</title>
<xf:model>
    <xf:instance>
        <data xmlns="">
            <f/>
            <c>20</c>
        </data>
    </xf:instance>
</xf:model>
</head>
<body>
<h1>Temperature Converter</h1>

<p>
Enter a value, then click the appropriate button to convert
between units:
</p>

<p>
<xf:input ref="c"><xf:label>Degrees Celcius (&deg;C): 
</xf:label></xf:input>
</p>

<p>
<xf:input ref="f"><xf:label>Degrees Fahrenheit (&deg;F): 
</xf:label></xf:input>
</p>

<p>
<xf:trigger>
    <xf:label>&deg;C &rarr; &deg;F</xf:label>
    <xf:action ev:event="DOMActivate">
        <xf:setvalue ref="f" value="number(/data/c) * 9 div 5 + 32"/>
    </xf:action>
</xf:trigger>
<xf:trigger>
    <xf:label>&deg;F &rarr; &deg;C</xf:label>
    <xf:action ev:event="DOMActivate">
        <xf:setvalue ref="c" value="( number(/data/f) - 32 ) * 5 div 9"/>
    </xf:action>
</xf:trigger>
</p>
</body>
</html>

В листинге 8 были даны сведения о XForms. Сначала вы описывали достаточно простую модель данных, которая различает температуру как по шкале Цельсия (Метрическая система), так и по шкале Фаренгейта (Имперская мера). Вы только вводили данные величины; вам нужно, чтобы компьютер сам сделал пересчет.

Вы также создали две области ввода для того, чтобы пользователи могли ввести значения температуры по любой шкале. Помните, что, для того чтобы преобразовать входные данные в числа вы не использовали элемент <xf:bind>; это один из сложных вопросов, касающихся XForms, который не рассматривался в этой серии статей.

И наконец, нужно создать кнопку для перевода градусов с Цельсия в Фаренгейты, и кнопку для обратного действия. Внутри элемента <xf:action>, используется <xf:setvalue>, для того чтобы подсчитать температуру без использования какого-либо сценария (это просто XPath-выражение в атрибуте value) и без необходимости вмешательства какого-либо сервера.

Этот пример с преобразователем температуры показывает, что собой представляет XForms, обеспечивая лучшее обслуживание своих клиентов без налогообложения web-сервера.

В начало

Итоги

В этой статье кратко описываются различные XForms действия и рассказывается, как вы можете создать наблюдателя для событий XForms внутри элементов управления XForms. Вы также ознакомились с различными методами представления и опциями, при помощи которых вы можете контролировать процесс пересылки ваших данных серверу.

В этой серии статей содержится основная информация необходимая для создания ваших собственных форм XForms. Уже сейчас вы можете начать экспериментировать с XForms!

В начало

Загрузка

Описание	Имя	Размер	Метод загрузки
Часть 3. Пример кода	xforms3.zip	3KB	HTTP

Информация о методах загрузки

Ресурсы

Научиться

Оригинал статьи Introduction to XForms, Part 3: Using actions and events
Зайдите на главную страницу XForms в W3C.
XForms.org: Связь для интеллектуальных web-приложений содержит полезную информацию и ссылки на XForms.
Прочитайте Часть 2 этой серии статей, "Введение в XForms".
Прочитайте Часть 1 этой серии статей, "Введение в XForms".
Прочитайте про web Формы 2.0, другое видение.
Статья "Узнайте о XForms" (devleoperWorks, Сентябрь 2002) предоставляет необходимую информацию о важных технологиях.
Найти отличное вводное пособие по XPath, вы сможете в статье "Начните с XPath" (developerWorks, Май 2004).
Статью, где описываются преимущества использования XPath, вы можете прочитать на Java XPath API (developerWorks, Июль 2006).
Статья, в которой описываются особые возможности XPath, находится на XML для данных: Что нового в XPath 2.0? (developerWorks, Сентябрь 2002).
Информацию о появлении XML Событий, чем они полезны, и как они работают, вы можете прочитать во Введении в XML События (developerWorks, Ноябрь 2004).
Прочитайте блок Джона Бойера XForms, Web Формы 2.0 и будущее информационных ресурсов XML в Web .
SVG и XForms, Пособие для начинающих (developerWorks, Ноябрь 2003) содержит информацию о двух технологиях и рассматривает возможности их совместной деятельности.
Прочитайте Основные элементы XForms Micah Dubinko с O'Reilly Media.
Начиная исследовать XForms, прочитайте Десять наиболее предпочтительных механизмов XForms с XML.com.
Чтобы получить интерактивное, межплатформное пособие о W3C XForms, зайдите на Общество XForms .
Прочитайте о появлении и целях XForms в кратком обзоре истории SGML .
Чтобы получить основную информацию о XML, читайте пособие Введение в XML (developerWorks, Август 2002).
Узнайте всю информацию о XML в зоне developerWorks XML .