Пользовательский интерфейс определяет, как экземпляр модели данных встраивается в презентацию страницы. Он выражается с помощью как элементарных (как, например, <input> и <output>), так и составных (<group>, <repeat> и <switch>) контролов. Элементарные компоненты - это те элементы управления, которые пользователи используют для наполнения формы; составные компоненты пользовательского интерфейса применяются для организации и группировки элементарных объектов. Как было указано выше, в отличие от HTML, и элементарные, и составные контролы не связаны с отдельным представлением, а соотносятся с отдельной абстрактной задачей. Составные контролы Теги <group>, <repeat> и <switch> позволяют включить элементарные контролы формы в сложный пользовательский интерфейс. Например, в большой форме, предназначенной для электронной коммерции, вы можете распределить элементарные объекты по разделам, например, раздел адреса, раздел платежа и раздел товаров. Вы можете выбрать эти группы и рассматривать их как составные компоненты. Эти объекты-компоненты можно также группировать для создания составных контролов. group group - это простейший составной контрол: это основной контейнер, который группирует контролы. В Листинге 10 показано, как группировать различные контролы формы, чтобы затем использовать эту группу в качестве объекта на большой форме электронной коммерции. Листинг 10. Скелет фрагмента формы, содержащей адрес <body> Более подробная информация о group приведена в Спецификации (см. Приложение B3).
<xforms:group>
<!--AddressForm form controls goes here-->
</xforms:group>
</body>
repeat
С помощью тега <repeat> можно уменьшить величину избыточного кода в форме - для этого разработчики могут применить шаблон пользовательского интерфейса к набору данных экземпляра с тем же типом и структурой. В примере формы заказа мы использовали тег <repeat> для отображения приобретенных товаров.
Вместо явного кодирования контрола пользовательского интерфейса для каждого товара, мы используем тег <repeat>, чтобы "пройтись" по разделу ShoppingCart в экземпляре (см. Листинг 4). Листинг 11. Пример использования инструкции repeat <xforms:repeat id="shoppingcart" В Листинге 11 атрибут nodeset элемента repeat определяет XPath, который оценивается по экземпляру модели. Элемент repeat затем "итерирует" к каждому контролу, сгруппированному в nodeset.
nodeset="OrderInfo/ShoppingCart/ProductInfo">
<xforms:output ref="Quantity"/>
<xforms:output ref="Description"/>
<xforms:output ref="UnitPrice"/>
<xforms:output ref="ItemTotal"/>
</xforms:repeat>
В Листинге 11, атрибут ref ссылается на значения полей в поддереве ProductInfo. Вы можете также сослаться на значения атрибута, предварительно пометив XPath символом @. Например, вы могли бы обратиться к атрибуту name в каждом ProductInfo посредством следующего вызова:
ref = "@name"
Разработчики могут воспользоваться тегом <repeat>, чтобы сделать свои XForms-документы более короткими и более "заточенными" под реальный экземпляр данных. Таким образом, этот тег также повышает выразительную мощь языка XForms: вам не нужно точно знать, сколько товаров приобретено; тег автоматически обойдет дерево экземпляра и выдаст данные для каждого возможного соответствия.
Более подробная информация о <repeat> приведена в Спецификации (см. ).
switch
Инструкция <switch> предназначена для динамической генерации пользовательского интерфейса. В пределах инструкции <switch> находятся инструкции <case>, которые определяют условия, при которых может использоваться другой пользовательский интерфейс. Например, при работе с формой электронной коммерции по получении личной информации поставщики могут захотеть установить метод платежа. Тег <switch> может быть использован для перехода к типу платежа, который выбрал пользователь. Если пользователь избрал платеж с помощью кредитной карты, отображается динамически сгенерированный набор контролов пользовательского интерфейса. Если же пользователь решил платить наличными или выбрал еще какой-нибудь иной способ, форма генерирует другой набор визуальных компонентов. Таким образом, тег <switch> позволяет пользователю управлять интерфейсом.
Более подробная информация о <switch> приведена в Спецификации (см. ).
Элементарные контролы формы
Элементарные контролы - это базовые компоненты, которые используются для разработки пользовательского интерфейса. Вы можете комбинировать эти контролы с тремя высокоуровневыми контролами, описанными выше. Давайте рассмотрим некоторые элементарные контролы.
input
Наиболее общим контролом формы является тег <input>. Как было указано в разделе Связывания, зависимости и ограничения это один из способов связать с экземпляром данные, предоставляемые пользователем. Пример тега <input> в форме адреса приведен в Листинге 12:
Более подробная информация о <input> приведена в Спецификации (см. ).
output
<output> просто изображает значения данных экземпляра. В примере, приведенном в Листинге 13, вы можете использовать контрол <output>, чтобы распечатать вычисленный налог: Листинг 13. Инструкция output <!--In the User Interface--> Этот тег во многом схож с <input>; единственное различие состоит в том, что <output> только для чтения. Более подробная информация о <output> приведена в Спецификации (см. Приложение B7). action Тег <action> является XML-обработчиком событий. Поскольку он наполняется набором декларативных XML-обработчиков, которые управляют стандартными случаями использования, отпадает необходимость в сложных скриптах. Эти скрипты зачастую длинные и запутанные и необязательно поддерживаются на различных платформах. Благодаря упаковке XML-событий в набор легко вызываемых тегов, становится несложно включать динамическое содержание; кроме того, оно гарантировано работает на всех платформах, поддерживающих XForms. Атрибут event устанавливает, к какому событию должен "прислушиваться" тег <action>. В Листинге 14 показано, как в форме заказа определяется действие refreshForm. Листинг 14. Инструкция action <!--In the User Interface or embedded in a UI form control--> При событии event обработчик событий перехватывает это событие и генерирует действие <refresh>. В пределах одного и того же тега <action> можно иметь множество действий. Когда обработчик событий активирован, он вызывает все действия, определенные в пределах своего тела. (Полный список декларативных действий XForms приведен в Приложении G.) При размещении внутри тега <action> эти общие действия позволяют клиентским браузерам генерировать контекст в ответ на событие, вызванное пользователем. Теги <action> могут быть также определены в пределах модели. В следующем разделе объясняется, как встроить тег <action> в контрол формы.
<xforms:label class="label">Tax Amount $</xforms:label>
<xforms:output class="Amount" id="taxtotal"
ref="OrderInfo/PriceInfo/TaxTotal" />
<xforms:action event="click" >
<xforms:refresh ev:event="xforms:activate"/>
</xforms:action>
Более подробная информация о <action> приведена в Спецификации (см. ).
trigger
trigger - это контрол пользовательского интерфейса, который выполняет действие при активации. Например, это могут быть кнопки, которые реагируют на щелчок мышки. При активации trigger вызывает XML-событие, которое перехватывается обработчиком событий и которое описано с помощью тега <action>. Вы можете определить trigger, задав инструкцию, как показано в Листинге 15:
Листинг 15. Инструкция trigger без указания события <!--In the User Interface--> Этот trigger, однако, ничего не делает. Для того, чтобы он что-нибудь выполнил, необходимо встроить его вместе действием, подобным тому, что было определено в action (см. Листинг 16). Листинг 16. Работающая инструкция trigger <!--In the User Interface--> При щелчке мышки trigger запускает событие event, которое перехватывается обработчиком событий тега <action>. В результате вызывается действие <refresh>. Более подробная информация о <trigger> приведена в Спецификации (см. Приложение B12). submit Тег <submit> создает trigger, который, при щелчке мышки, вызывает действие, описанное в теге <submission>. (В действительности это псевдоним для trigger, который содержит действие отсылки, связанное с отдельным тегом <submission>.) Листинг 17. Инструкция submit <!--In the User Interface--> Более подробная информация <submit> приведена в Спецификации (см. Приложение B10).
<xforms:trigger>
<label>My Refresh Trigger</label>
</xforms:trigger>
<xforms:trigger>
<xforms:label>Reset</xforms:label>
<xforms:action event="click" >
<xforms:refresh ev:event="xforms:activate"/>
</xforms:action>
</xforms:trigger>
<xforms:submit submission="sub">
<xforms:label>Submit</xforms:label>
</xforms:submit>
Заключение
С помощью XForms вы можете определять Web-формы, отделив предназначение от представления. Вы сможете уделять больше внимания содержанию и собираемым данным, а не стилю представления. Этот язык описывает мощную модель событий и устраняет необходимость в специальных скриптах, используемых для выполнения простых, связанных с формой задач.
Благодаря XForms разработчики могут сосредоточить свои усилия в первую очередь на данных, которые необходимо собирать. Использование стандартных XML-схем позволяет явно определить структуру и тип данных. XForms расширяют эту модель, включив в спецификацию дополнительные ограничения и зависимости. XForms-процессор оценивает и реализует эти ограничения, не испытывая необходимость в дополнительном коде. Процессор проверяет типы данных и ограничения до того, как эти данные представлены для обработки.
Спецификация XForms также предусматривает создание динамических форм посредством задания условий, зависящих от данных. Вам больше не нужно писать специальный код, который будет генерировать пользовательские формы, основываясь на отклике пользователей. XForms могут настраивать формы "на лету" при сборе данных и изменении условий.
Навигация по XForms обрабатывается моделью событий XForms, которая не зависит от того, как она изображается на клиентской машине. Так, вы можете представить на одной клиентской машине XForms как отдельную страницу, и на другой - как множество станиц, не заботясь при этом о сохранении состояния и представлении соответствующих контролов для навигации.
Благодаря краткой спецификации и мощным функциональным возможностям, формы, созданные с XForms, легче поддерживать по сравнению с обычными Web-формами. Также отсутствует необходимость в дополнительном коде, предназначенном для проверки типа данных. Структура данных оказывается выведенной из разметки представления формы.
Независимо от того, являются ли XForms в действительности окончательным решением для разделения предназначения и представления, XForms на самом деле являются следующим поколением Web-форм.
Навигация