Введение в XForms, Часть 1: Новые web стандарты для форм

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

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

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



12.09.2006

Введение

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

Эта статья показывает эволюцию форм от простых текстовых до сегодняшних современных интерактивных, которые являются новым шагом в области Сетевых форм, XForms. Она объясняет отличия XForms и готовит пользователя к Части 2, установив его собственную среду.

Прочитайте далее, чтобы узнать, как заменить форму HTML на простую форму XForms и как использовать потенциальные возможности XForms для сохранения (и перезапуска позже) данных формы в локальный файл.

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

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


Почему XForms?

Перед тем как перейти к XForms, давайте узнаем историю развития форм

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

Сегодня же, вы можете с легкостью найти очень сложные формы, особенно на сайтах электронной торговли и форумах. Такими могут быть интерфейсы к PHP или Java ™ на сервере, или JavaScript в браузере, отправляющих результаты на сервер использующих Ajax-технологии.

К несчастью, формы HTML созданы из элементов, которые противоречат представлению данных и их содержанию. С переходом от нестабильных форм HTML, смешивающих структуру документа с элементами форматирования, чтобы отделить XHTML от CSS, вам нужно действовать путем разделения данных формы, учитывая характер ее представления.

Что еще о формах web?

Формы web 2.0 (см. Ресурсы), построены на существующих характеристиках форм HTML, с добавлением многих характеристик XForms, но использующих более простой, сравнимый с предыдущими формами, подход. Осуществляется некий шаг назад, чтобы объединить XForms и web Forms в отдельную часть планируемых технических требований XHTML 2.0.

Выбор браузера

XForms-стандарт, обсуждаемый уже несколько лет, поддерживается только несколькими приложениями (включая Firefox, Mozilla и Seamonkey, если вы проинсталлируете XForms-расширение), и направлен на замену XML существующих HTML-форм.

Другие известные браузеры поддерживают XForms через программные модули (такие как formsPlayer для Internet Explorer 6, доступный в разделе Ресурсы). Любые стандартные браузеры могут также использовать FormFaces, простые JavaScript XForms реализации, которые преобразуют XForms в стандартные HTML-программы в клиентской системе. К тому же, такие программные продукты как IBM Workplace Forms реализуют XForms.

Модель данных формы (как она поведет себя при представлении данных, начальных значений и так далее) отделена от ее представления. Тоже представление может базироваться на стиле подходящем браузеру пользователя. Например, браузер, работающий в интернете по телефонной сети, использует разные технологии для отображения команд; меню и списки проще для пользователей по телефонной сети, чем всплывающие окна.


Как работают XForms

Давайте взглянем на простую HTML-форму, которая подчиняет поисковую цепочку воображаемому механизму запроса, работающему на вашем ПК (см. листинг 1). Заметьте, что фактически XHTML лучше, чем HTML 4.01; XForms содержат достоверные документы XML (такие как XHTML), и вы вкратце просмотрите версию XForms. Также, заметьте, что возможно вам понадобится приспособить ваши ссылки, чтобы они работали без ошибок в вашей конфигурации.

Листинг 1. Пример HTML формы (simple.xhtml)
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Search Form</title>
</head>
<body>
<h1>Search Form</h1>

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

<form action="http://localhost/imaginary-search-engine" method="get">
    <p>
    Find: <input type="text" name="query"/>
    <input type="submit" value="Search"/>
    </p>
</form>
</body>
</html>

Формируя изображение типичного интернет браузера, XHTML выглядит достаточно обыденно, немного примитивно (Рисунок 1).

Рисунок 1. Простая HTML-форма изображенная в Firefox
Простая HTML-форма изображенная в Firefox

Когда вы вводите какой-то текст в поле, показанное на Рисунке 1, и нажимаете кнопку, данные декодированные в URL отправляются в воображаемый поисковой механизм: http://localhost/imaginary-search-engine?query= whatever-you-entered

Листинг 2 показывает вам версию XForms с подсвеченными отличиями.

Листинг 2. Простая XForms-форма
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:xf="http://www.w3.org/2002/xforms">
<head>
<title>Search Form v2</title>
<xf:model>
    <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:input>
<xf:submit 
submission="submit-search"><xf:label>Search</xf:label></xf:submit>
</p>
</body>
</html>

Существуют три настраиваемых тега:

  • "xf:" именованная область добавляет элементы XForms.
  • <xf:model> был добавлен элемент <head>, который показывает <xf:submission>. Это заставляет операцию (ваш воображаемый механизм поиска) соответствовать методу и называет его подчинение-поиск для дальнейшего пользования.
  • Элементы презентации формы (<xf:input> для введения текста в поле, и <xf:submit> для кнопки) - только лишь элементы представления, показывающие, где и как поля формы должны появиться на изображаемой странице. Они обращаются назад к модели, заключенной в элементе <xf:model>.

А здесь показано, как выглядит версия XForms (Рисунок 2). Инсталляция расширения XForms для Firefox описывается далее.

Рисунок 2. Простая XForms, изображенная в Firefox
Простая XForms, изображенная в Firefox

Формы выглядят абсолютно одинаково! Вы совершенно ничего не теряете, используя XForms вместо HTML-формы, и приобретаете все преимущества модели данных XML.


Настройки для XForms

Если бы вы загрузили архив (находящийся в разделе Загрузка), вы могли бы заметить, что ваш браузер не будет отображать версию XForms в точности (см. Рисунок 3).

Рисунок 3. Страница XForms на браузере, не поддерживающем XForms
Страница XForms на браузере, неподдерживающем XForms

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

Добавление расширения XForms к Firefox

В Firefox выберите станицу проекта XForms в Mozilla (см. Ресурсы) и загрузите последнюю версию.

Загруженная страница проекта XForms предупредит вас о том, что программа не готова для конечного пользователя, и затем укажет вам ссылку к фактически загруженной странице. Нажмите ее, а затем связку Install Now.

Рисунок 4. Стандартное предупреждение Firefox об инсталлируемых приложениях
Стандартное предупреждение Firefox об инсталлируемых приложениях

Firefox показывает диалог предупреждения (см. рисунок 4). Нажмите кнопку Install Now, чтобы загрузить и инсталлировать расширение XForms . Перезапустите Firefox, чтобы активировать его (см. рисунок 5).

Рисунок 5. Перезапустите, чтобы активировать Ваши новые расширения
Перезапустите, чтобы активировать Ваши новые расширения

После перезагрузки браузера, вы можете загрузить простой пример XForms, который был ранее рассмотрен; сразу вы увидите точное и правильное изображение XForms!

Добавление XForms в Internet Explorer 6

На странице formsPlayer (найдите в разделе Ресурсы ссылку), нажмите на Бесплатную загрузку, чтобы перейти на страницу регистрации. Введите ваш e-mail и другие данные, затем нажмите Install formsPlayer, чтобы загрузить и установить программу.

Когда Internet Explorer будет загружать архив программы, под URL высветится предупреждение о контроле ActiveX. Нажмите на предупреждение, затем выберите Install ActiveX Control. ИЕ загрузит и установит formsPlayer. Когда высветится предупреждение безопасности ИЕ, нажмите Install и продолжите установку.

Как только formsPlayer установится, вы будете перенаправлены на страницу с ссылками примеров. Посмотрите любой из них, чтобы продолжить инсталляцию.


Одна форма, несколько презентаций

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

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

Не требуется каких-либо специальных CSS или даже JavaScript для обнаружения браузера пользователя (массовая ошибка многих сайтов), они идентифицируются автоматически путем реализации XForms браузера. Такая адаптивность невозможна при использовании плоских форм HTML, потому что данные и их представление слишком плотно связаны.

Поскольку модель XForms - это XML, вы также может использовать такие технологии как XSLT или JavaScript (через DOM), чтоб презентовать эту модель, используя любой интерфейс. От простых HTML или XHTML для пользователей без поддержки XForms, до имеющих GUI.

Плотная интеграция с XML

Документы XForms должны быть достоверными XML (такие как XHTML), а примеры моделей данных (используемые для присваивания значений, среди многих других возможностей; вы увидите описание этого действия далее) являются документами XML. Вы даже сможете загрузить примеры моделей данных из внешних файлов XML, загруженных на ПК или на сервере.

Подобная узкая интеграция с XML позволяет объединить данные XForms с другими технологиями, которые поддерживают ввод и вывод XML, такие как базы данных, без какой-либо необходимости дополнительной связи между базой данных и формой, представленной пользователю.

Сохраняйте формы в автономном режиме и открывайте их позже

Одной из особых характеристик, которые XForms приносит в ваш браузер, является способность сохранять содержимое формы (любые данные в полях, плюс любые скрытые данные в модели данных) в файл. Имея в распоряжении <xf:submission> дополнительные элементы put метода, вы можете хранить информацию в форме XML -файла в вашей локальной файловой системе или на сервере. Позже вы можете ее загрузить, чтобы продолжить с того места, где вы закончили работу. И все это без необходимости использования дополнительной связи или доступа к базе данных.

Это также вам показывает другое преимущество XForms; вы можете делать любое количество процедур, связанных с одной формой (см. листинг 3). В HTML вы можете делать с формой только одно действие.

Листинг 3. Добавление данных, сохранение и загрузка формы
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:xf="http://www.w3.org/2002/xforms">
<head>
<title>Search Form v3</title>
<xf:model>
    <xf:instance>
        <data xmlns="">
            <query>Enter your search string here.</query>
        </data>
    </xf:instance>
    <xf:bind nodeset="query" required="true()"/>
    <xf:submission action="http://localhost/imaginary-search-engine" 
        method="get" id="submit-search"/>
    <xf:submission action="file:///tmp/XFormsQuery.xml"
        method="put" id="save-search" replace="none"/>
    <xf:submission action="file:///tmp/XFormsQuery.xml"
        method="get" id="load-search" replace="instance"/>
</xf:model>
</head>
<body>
<h1>Search Form</h1>

<p>
Enter a search string, then click the Search button.  
You can also save your search string for later.
</p>

<p>
<xf:input ref="query"><xf:label>Find:</xf:label></xf:input>
<xf:submit 
submission="submit-search"><xf:label>Search</xf:label></xf:submit>
</p>
<p>
<xf:submit 
submission="save-search"><xf:label>Save</xf:label></xf:submit>
<xf:submit 
submission="load-search"><xf:label>Load</xf:label></xf:submit>
</p>
</body>
</html>

Изменения из вашей предыдущей работы с XForms выделены жирным шрифтом. Давайте взглянем на изменения внимательней.

Во-первых, вы добавили пример модели данных (внутри <xf:instance> элемента). Он содержит корневой каталог данных (в точности названный <data> элемент; заметьте, что пустой xmlns атрибут - это требование здесь), который в порядке очереди содержит данные, необходимые вам для формы, <query> вы ссылаетесь на элемент формы <xf:input>. Данные в этом элементе <query> - это устанавливаемая по умолчанию строка запросов, и она будет изображена в <xf:input> элементе, когда он отобразится.

Далее, существует <xf:bind> элемент, который в <query> упорядочивает данные; если оно пусто <query>, и ни одна из кнопок <xf:submit> не среагирует.

Последнее, вы добавили два новых <xf:submission> действия в <xf:model>, что позволило вам сохранить данные в файл (по put методу) и загрузить его из файла без перезагрузки всей страницы (используя get метод, replace="instance" атрибут перезагружает только модель данных).

Внизу страницы добавлены <xf:submit> два дополнительных элемента, так что вы можете сохранять и загружать данные.

Рисунок 6 показывает, как это выглядит в Firefox. Заметьте, что поле поиска заполняется так же, как и в примере модели данных и есть две новые кнопки Записи и Загрузки.

Рисунок 6. Новая улучшенная форма
Новая улучшенная форма

Если вы нажмете на этом этапе кнопку Сохранить, вы получите файл XFormsQuery.xml в вашей директории /tmp, содержащий пример модели данных (см. листинг 4). Чтобы проверить функцию загрузки, измените данные в поле Поиска, и нажмите Load; ваше поле поиска будет заменено полем, загруженным из файла XFormsQuery.xml в /tmp.

Листинг 4. Пример сохраненной модели данных
chrish@dhcp1 [531]$ cat XFormsQuery.xml 
<?xml version="1.0" encoding="UTF-8"?>
<data xmlns:xf="http://www.w3.org/2002/xforms">
            <query>Enter your search string here.</query>
        </data>

Существуют некоторые опции для контроля вывода данных, но вы не использовали ни одну из них здесь. В любом случае, Save и Load функции работают без каких-либо видов связи.


Заключение

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

Изучите Часть 2, чтобы научиться создавать базовую модель и форму XForms.


Загрузка

ОписаниеИмяРазмер
Часть 1 пример кодаxforms1.zip2KB

Ресурсы

Научиться

Получить продукты и технологии

Обсудить

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

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

Выберите имя, которое будет отображаться на экране



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

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

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


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


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=XML
ArticleID=173923
ArticleTitle=Введение в XForms, Часть 1: Новые web стандарты для форм
publish-date=09122006