Введение в XForms, Часть 2: Формы, модели, элементы управления и действия представления

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

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

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



19.09.2006

Введение

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

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


Создание основной формы

В Части 1 вы создавали основную форму, иногда с одиночным полем ввода текста и простой кнопкой представления, которая отправит запрос к мнимой поисковой службе, находящейся на локальном хосте (см. рисунок 1). Такая форма все еще является достаточно распространенной, хотя, как правило, она не сосредоточена на собственной web-странице.

Рисунок 1. Основная web форма
Основная web форма

Давайте рассмотрим XHTML и XForms коды (листинг 1). Специальные сведения XForms были выведены полужирным текстом, чтобы их было проще различать; остальная часть документа – это строгий XHTML 1.1.

Листинг 1. Отправная точка
 <?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: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>

После прибавления пространства имен XForms (с префиксом xf:), вы получили блок <xf:model>, описывающий действие представления, имеющего имя представление-поиск, который будет представлять указанную поисковую цепочку, используя стандартный метод HTTP GET. Просматривая дальше тег <body>, элементы <xf:input> и <xf:submit> составляют вашу простую форму, область ввода и кнопку представления, которая запустит действие, описанное в блоке <xf:model>.

Если вы хотите поэкспериментировать с этим, начните прямо сейчас; вы не ограничены ни строгим порядком, ни конкретным расположением элементов <xf:input> и <xf:submit>; они могут находиться в любой части тега <body>. Представление входного устройства формы отсоединяется от модели данных.

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


Создание простой модели

Одно из преимуществ XForms – это метод разделения модели данных от представления. Как вы могли видеть в листинге 1, модель (внутри <xf:model> блока) самостоятельно существует в заголовке <head> XHTML документе.

Модель, за исключением одиночного действия представления, полностью пустая. В ней не содержится никаких данных!

Однако не спешите. Система (в случае если браузер поддерживает XForms) создает для вас одну форму (см. листинг 2), которая содержит поле данных, представленное в ней.

Листинг 2. Полный блок <xf:model>, вытекающий из простой формы
  <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>

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


Значения по умолчанию

Если вы подробно описываете данные экземпляра, вы можете их использовать для определения значений по умолчанию, поместив их в поле элементов. Листинг 3 отображает модель листинга 2 с полезным значением по умолчанию для запроса (см. рисунок 2).

Листинг 3. Значения по умолчанию, содержащиеся непосредственно в <xf:instance>
  <xf:model>
    <xf:instance>
        <data xmlns="">
            <query>One or more search keywords.</query>
        </data>
    </xf:instance>
    <xf:submission action="http://localhost/imaginary-search-engine" 
        method="get" id="submit-search"/>
</xf:model>
Рисунок 2. Включение данных в копию модели, чтобы получить полезный совет или разумные значения по умолчанию
Включение данных в вашу копию модели, чтобы получить полезный совет или разумные значения по умолчанию

Скрытые значения, скрытые элементы управления

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

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

Листинг 4. Включение скрытых или неизменных данных в экземпляр, но не в форму
<xf:model>
    <xf:instance>
        <data xmlns="">
            <query>One or more search keywords.</query>
            <engine-version>2</engine-version>
            <results>25</results>
        </data>
    </xf:instance>
    <xf:submission action="http://localhost/imaginary-search-engine" 
        method="get" id="submit-search"/>
</xf:model>

В этом примере <engine-version> и <results> никогда не представляются элементами управления формы и являются недоступными для пользователей (если только они могут отобразить исходную страницу). Их отправляют к виртуальному механизму поиска как часть запроса, и виртуальный механизм поиска может использовать их для выбора механизма поиска и установить количество результатов, которые должны отобразиться.


Загрузка экземпляра

Если у вас есть большая модель данных или данные, которые должны быть скрытыми от пользователей, вы можете загрузить экземпляр из внешнего файла XML (см. листинг 5).

Листинг 5.Пример модели в XML файле
<?xml version="1.0" encoding="UTF-8"?>
<data xmlns="">
    <query>One or more search keywords.</query>
    <engine-version>2</engine-version>
    <results>25</results>
</data>

Измените <xf:instance> для представления вашего экземпляра URL (см. листинг 6) и вы получите результат.

Листинг 6. Обращение внешнего экземпляра модели
 <xf:model>
    <xf:instance src="search-instance.xml"/>
    <xf:submission action="http://localhost/imaginary-search-engine" 
        method="get" id="submit-search"/>
</xf:model>

Так как атрибут src в теге <xf:instance> может загрузить любые данные XML с любых URL, вы можете использовать XForms для редактирования или точного представления любых данных. Большинство XForms-реализаций ограничивают источник URL документа одной областью, однако некоторые позволяют вам формировать список допустимых надежных сайтов.


Ссылки в XML данных

Когда вы загружаете XML–файл как свой экземпляр данных, вы не можете управлять XML; данные должны обеспечиваться базой данных или любыми другими приложениями. Как можно обратиться к определенному элементу в XML? До сих пор, вы могли видеть ссылки только на элементы, которые сопоставляются с моделью данных.

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

Листинг 7. Более сложный экземпляр модели данных
 <?xml version="1.0" encoding="UTF-8"?>
<data xmlns="">
    <query>One or more search keywords.</query>
    <engine-version>2</engine-version>
    <results>25</results>
    <some>
        <additional>
            <info status="important">Nested info.</info>
        </additional>
    </some>
</data>

Вы можете получить доступ к элементу <info>, используя выражение XPath: некоторая/дополнительная/информация (или /данные/некоторая/дополнительная/информация, если вы хотите абсолютный путь) и атрибут состояния элемента <info>, содержащий некоторую/дополнительную/информацию/@status. Листинг 8 содержит форму, которую вы можете использовать для редактирования файла этих данных, при условии, что ваш web-сервер поддерживает PUT метод (вы, скорее всего, захотите защитить эти возможности после какой-либо аутентификации).

Листинг 8. Редактирование комплексных XML данных
  <?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</title>
<xf:model>
    <xf:instance src="http://localhost/~chrish/data.xml"/>
    <xf:submission action="http://localhost/~chrish/data.xml" 
        method="put" id="submit-edit"/>
</xf:model>
</head>
<body>
<h1>XPath</h1>

<p>
Change the info and status!
</p>

<p>
<xf:input ref="some/additional/info"><xf:label>New 
info:</xf:label></xf:input><br/>
<xf:input ref="some/additional/info/@status"><xf:label>New 
status:</xf:label></xf:input>
<xf:submit 
submission="submit-edit"><xf:label>Save</xf:label></xf:submit>
</p>
</body>
</html>

XPath – это отличные дополнительные технологии XForms, как для клиентов, так и для сервера; как только вы управляете XPath, вы можете использовать это в ваших формах и форме процессора.


Типы элементов управления

Пока, вы могли видеть только элементы управления <xf:input> и <xf:submit>, но XForms предоставляет широкий спектр форм других элементов управления. Давайте коротко рассмотрим их и HTML эквиваленты.

<xf:group> (HTML <fieldset> ) используются, для того чтобы логически сгруппировать элементы управления в раздел формы. Листинг 9 содержит информацию о том, как использовать <xf:group> для обозначения трех областей ввода.

Листинг 9. Группировка элементов управления
 <xf:group>
   <xf:label>Personal Information</xf:label>
   <p><xf:input ref="lastname"><xf:label>Last 
name:</xf:label></xf:input></p>
   <p><xf:input ref="firstname"><xf:label>First 
name:</xf:label></xf:input></p>
   <p><xf:input 
ref="address"><xf:label>Address:</xf:label></xf:input></p>
</xf:group>

<xf:input> (HTML <input type="text"> ) отображает стандартное поле ввода текста; вы уже несколько раз видели это в действии.

<xf:secret> (HTML <input type="password"> ) отображает поле ввода текста там, где ввод скрыт, это очень удобно для ввода пароля или других секретных данные. <xf:secret> работает точно также, как <xf:input> в исходном документе.

<xf:select appearance="full"> (HTML <input type="checkbox">) предоставляет пользователям один или несколько выборочных элементов и позволяет выбрать множественные элементы. Листинг 10 предоставляет вам образец.

Листинг 10. Управление множественным выбором
  <xf:select ref="potato-chips" appearance="full">
   <xf:label>Favourite flavours:</xf:label>
   <xf:item><xf:label>Dill 
Pickle</xf:label><xf:value>dill</xf:value></xf:item>
   
<xf:item><xf:label>Ketchup</xf:label><xf:value>ketchup<
/xf:value></xf:item>
   
<xf:item><xf:label>Plain</xf:label><xf:value>plain<
/xf:value></xf:item>
   <xf:item><xf:label>Salt & 
Vinegar</xf:label><xf:value>snv</xf:value></xf:item>
</xf:select>

<xf:select appearance="minimal"> (HTML <select multiple>) используется для того, чтобы выбрать одно или несколько наименований в меню или в списке; используя минимум попыток для атрибута appearance, чтобы перенести список с элементами в меньшую область.

<xf:select1> (HTML <input type="radio"> ) аналогичный <xf:select>, но пользователь может выбрать только один элемент из списка. Он может передаваться как список кнопок с зависимой фиксацией, область выбора прокрутки или как меню, и вы можете использовать появившийся атрибут для предоставления подсказки для отображения.

<xf:select1> с вложенным <xf:choices> (HTML <select> с вложенным <optgroup> ) позволяет пользователю выбрать один элемент из списка, организованного в группы. В списке видно название подсписка <xf:choices>, но его выбрать нельзя. Листинг 11 предлагает вам список напитков, которые позволяют пользователю отказаться от выбора, или выбрать из списка возможных безалкогольных или алкогольных напитков.

Листинг 11. Выбор одного элемента из нескольких групп
  <xf:select1 ref="drink">
   <xf:label>Drink:</xf:label>
   <xf:item><xf:label>None</xf:label><xf:value>none
</xf:value></xf:item>
   <xf:choices>
      <xf:label>Soft drinks</xf:label>
      
<xf:item><xf:label>Juice</xf:label><xf:value>juice
</xf:value></xf:item>
      
<xf:item><xf:label>Milk</xf:label><xf:value>milk
</xf:value></xf:item>
      
<xf:item><xf:label>Soda</xf:label><xf:value>soda
</xf:value></xf:item>
      
<xf:item><xf:label>Water</xf:label><xf:value>water<
/xf:value></xf:item>
   </xf:choices>
   <xf:choices>
      <xf:label>Wine and beer</xf:label>
      
<xf:item><xf:label>Beer</xf:label><xf:value>beer<
/xf:value></xf:item>
      <xf:item><xf:label>Red 
wine</xf:label><xf:value>redwine</xf:value></xf:item>
      <xf:item><xf:label>White 
wine</xf:label><xf:value>whitewine</xf:value></xf:item>
   </xf:choices>
</xf:select1>

<xf:textarea> (HTML <textarea>) предоставляет пользователю многострочное поле ввода текста; используйте моделирование CSS для управления размером области в случае, если значение по умолчанию не подходит.

<xf:trigger> (HTML <input type="button"> ) визуализирует кнопку действия. Кнопка не содержит предопределенного действия, следовательно, вы должны прикрепить к ней действие, которое будет запускаться после активации кнопки. Листинг 12 демонстрирует тег <xf:trigger>, который активизирует функцию JavaScript™ - calculate() .

Листинг 12. Кнопка, которая вызывает функцию JavaScript calculate()
 <xf:trigger>
    <xf:label>Calculate</xf:label>
    <script ev:event="DOMActivate" type="text/javascript">
    calculate();
    </script>
</xf:trigger>

Помните, что это первый раз, когда использовалось простанство имен ev:, которое было показано в примере основной формы. Это позволяет вам представить стандартный XML атрибут событий, ev:event, который указывает триггеру когда активизировать его текст.

<xf:trigger> (HTML <input type="image"> ) также может использоваться для прибавления к вашей форме кнопок изображения; просто вставьте элемент <img> в середину элемента <xf:label>, или используйте CSS, чтобы приложить изображение к заднему плану элемента.

<xf:trigger> (HTML <input type="reset"> ) может использоваться для добавления кнопки сброса, в случае, если вы заменяете некоторые устаревшие формы HTML на XForms (возможно, спецификация для обновления, требующего "все существующие функциональные возможности", включая бесполезные кнопки сброса). Листинг 13 показывает, как создать кнопку сброса формы, но не стоит использовать ее в новой форме: никто из конечных пользователей специально не нажимает кнопку сброса.

Листинг 13. Реализация бесполезных исторических артефактов, кнопка сброса
<xf:trigger>
    <xf:label>Reset</xf:label>
    <xf:reset ev:event="DOMActivate"/>
</xf:trigger>

<xf:upload> (HTML <xf:upload> ) используется для загрузки файла. Он немного сложнее, чем другие элементы управления, так как нужно применять особый метод <intput type="file">, форма-данные-сообщение (см. листинг 14).

Листинг 14. Метод <xf:submission>, используемый для загрузки файлов
  <xf:model>
   ...
    <xf:submission action="http://localhost/upload-engine"
        method="form-data-post" id="upload"/>
</xf:model>

Перемещаясь по форме, элемент <xf:upload> выглядит как <xf:submit> или <xf:input> (см. листинг 15).

Листинг 15. Использование <xf:upload> для загрузки файла
 <xf:upload ref="upload"><xf:label>Upload a
 file:</xf:label></xf:upload>

Есть также элементы управления, которые не существуют в HTML.

<xf:output> дает вам возможность включать значения в качестве текста в документе. Например, в листинге 7 вы прибавляете элемент <results> для модели данных. Хотя пользователи не могут его модифицировать, вы можете изменить его, отредактировав модель (особенно, если вы используете модель, описанную во внешнем файле XML). Вы можете использовать элемент <xf:output>, для того чтобы передать эту информацию пользователю (см. листинг 16).

Листинг 16. Использование <xf:output> для отображения данных с модели
 <p>
Your search will return a maximum of
<xf:output ref="results"> matches.
</p>

<xf:range> позволяет вам предоставить пользователю ряд движков или других подходящих средств для получения ограниченных значений. Например, вы можете использовать три элемента, чтобы пользователь ввел красное/зеленое/голубое значения для цветов, чтобы использовать их для выделения результатов поиска (см. листинг 17).

Листинг 17. Использование диапазона элементов управления
 Keyword highlight:<br/>
<xf:range ref="r" start="0" end="100" step="1"><xf:label>Red</xf:label></xf:range><br/>
<xf:range ref="g" start="0" end="100" step="1"><xf:label>Green</xf:label></xf:range><br/>
<xf:range ref="b" start="0" end="100" step="1"><xf:label>Blue</xf:label></xf:range>
</p>

Теперь, когда вы разобрали ввод элементов управления XForms (и один выходной элемент управления), вы можете рассмотреть действия представления.


Основные действия представления

Стандартный XForms поддерживает обычную HTML форму методов представления, однако, для того чтобы установить метод представления, HTML нужен method и enctype, а в случае с XForms нужен только method.

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

<xf:submission method="urlencoded-post" action="url"> то же самое, что <form method="post" enctype="application/x-www-form-urlencoded"> в HTML.

Кроме этих совместимых с HTML методов представления, XForms определяет два новых действия представления, method="post" и method="put".

method="post" действия размещает экземпляр модели данных формы на принимающем URL, в качестве документа XML, который подходит для обработки XSLT или любых других технических приемов обработки XML. Дополнительная кодировка или переход на клиента не нужны. Дополнительная обработка на сервере (кроме стандартного XML разбора) также не нужна.

method="put" действия размещает экземпляр модели данных формы в назначенном URL, в качестве XML документа. Если сервер поддерживает PUT и у вас есть разрешение использовать его в назначенном URL, документ XML подставит файл на назначенный URL. Это может применяться для редактирования "любых" XML документов на месте, загрузив экземпляр модели данных через URL, который вы позже будете использовать с put размещения.

Методы чистого XML post и put являются преимуществами XForms, они обеспечивают гибкость обработки ваших данных.


Заключение

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


Загрузка

ОписаниеИмяРазмер
Пример кода к Части 2xforms2.zip3KB

Ресурсы

Научиться

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

Обсудить

Комментарии

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=174280
ArticleTitle=Введение в XForms, Часть 2: Формы, модели, элементы управления и действия представления
publish-date=09192006