WebClub - Всероссийский Клуб Веб-разработчиков
WebClub.RU » Советы » Пользовательский интерфейс XForms

Пользовательский интерфейс XForms


Дата публикации: 21-03-2008

Пользовательский интерфейс определяет, как экземпляр модели данных встраивается в презентацию страницы. Он выражается с помощью как  элементарных (как, например, <input> и <output>), так и составных (<group>, <repeat> и <switch>) контролов. Элементарные компоненты - это те элементы управления, которые пользователи используют для наполнения формы; составные компоненты пользовательского интерфейса применяются для организации и группировки элементарных объектов. Как было указано выше, в отличие от HTML, и элементарные, и составные контролы не связаны с отдельным представлением, а соотносятся с отдельной абстрактной задачей.

Составные контролы

 

Теги <group>, <repeat> и <switch> позволяют включить элементарные контролы формы в сложный пользовательский интерфейс. Например, в большой форме, предназначенной для электронной коммерции, вы можете распределить элементарные объекты по разделам, например, раздел адреса, раздел платежа и раздел товаров. Вы можете выбрать эти группы и рассматривать их как составные компоненты. Эти объекты-компоненты можно также группировать для создания составных контролов.

group

 

group - это простейший составной контрол: это основной контейнер, который группирует контролы. В Листинге 10 показано, как группировать различные контролы формы, чтобы затем использовать эту группу в качестве объекта на большой форме электронной коммерции.


Листинг 10. Скелет фрагмента формы, содержащей адрес


<body>
    <xforms:group>
        <!--AddressForm form controls goes here-->
    </xforms:group>
</body>

 

Более подробная информация о group приведена в Спецификации (см. Приложение B3).

repeat

 

С помощью тега <repeat> можно уменьшить величину избыточного кода в форме - для этого разработчики могут применить шаблон пользовательского интерфейса к набору данных экземпляра с тем же типом и структурой. В примере формы заказа мы использовали тег <repeat> для отображения приобретенных товаров.


Вместо явного кодирования контрола пользовательского интерфейса для каждого товара, мы используем тег <repeat>, чтобы "пройтись" по разделу ShoppingCart в экземпляре (см. Листинг 4).


Листинг 11. Пример использования инструкции repeat


<xforms:repeat id="shoppingcart"
    nodeset="OrderInfo/ShoppingCart/ProductInfo">
        <xforms:output ref="Quantity"/>
        <xforms:output ref="Description"/>
        <xforms:output ref="UnitPrice"/>
        <xforms:output ref="ItemTotal"/>
</xforms:repeat>

В Листинге 11 атрибут nodeset элемента repeat определяет XPath, который оценивается по экземпляру модели. Элемент repeat затем "итерирует" к каждому контролу, сгруппированному в nodeset.

В Листинге 11, атрибут ref ссылается на значения полей в поддереве ProductInfo. Вы можете также сослаться на значения атрибута, предварительно пометив XPath символом @. Например, вы могли бы обратиться к атрибуту name в каждом ProductInfo посредством следующего вызова:


ref = "@name"

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

Более подробная информация о <repeat> приведена в Спецификации (см. Приложение B8).

switch

 

Инструкция <switch> предназначена для динамической генерации пользовательского интерфейса. В пределах инструкции <switch> находятся инструкции <case>, которые определяют условия, при которых может использоваться другой пользовательский интерфейс. Например, при работе с формой электронной коммерции по получении личной информации поставщики могут захотеть установить метод платежа. Тег <switch> может быть использован для перехода к типу платежа, который выбрал пользователь. Если пользователь избрал платеж с помощью кредитной карты, отображается динамически сгенерированный набор контролов пользовательского интерфейса. Если же пользователь решил платить наличными или выбрал еще какой-нибудь иной способ, форма генерирует другой набор визуальных компонентов. Таким образом, тег <switch> позволяет пользователю управлять интерфейсом.

Более подробная информация о <switch> приведена в Спецификации (см. Приложение B11).

Элементарные контролы формы

 

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

input

 

Наиболее общим контролом формы является тег <input>. Как было указано в разделе Связывания, зависимости и ограничения это один из способов связать с экземпляром данные, предоставляемые пользователем. Пример тега <input> в форме адреса приведен в Листинге 12:


Листинг 12. Инструкция input

<!--In the User Interface-->
<xforms:input class="ZipCode" id="zipcode"
    ref="OrderInfo/PersonalInfo/Address/ZipCode">
</xforms:input>

Атрибут ref задает XPath, с которым должны быть связаны входные данные. Поскольку атрибут ref использует XPath, чтобы установить расположение экземпляра, в случае совпадения множества узлов (например, многочисленных узлов /AddressInfo/Address/Zip), этот атрибут выбирает первое совпадение, если только разработчик не установил явно, какой индекс выбирать. В нашем примере значение, которое пользователь вводит в первое поле ввода, связано с /OrderInfo/PersonalInfo/Address/ZipCode. Чтобы добавить заголовок поля ввода необходимо создать потомок <label> тега <input>. (Обратите внимание на то, что тег <label> является одним из немногих факультативных тегов, которые могут быть созданы в пределах каждого контроля формы. Полный список этих тегов приведен Приложении F.)

Более подробная информация о <input> приведена в Спецификации (см. Приложение B4).

output

 

<output> просто изображает значения данных экземпляра. В примере, приведенном в Листинге 13, вы можете использовать контрол <output>, чтобы распечатать вычисленный налог:

Листинг 13. Инструкция output

<!--In the User Interface-->
<xforms:label class="label">Tax Amount $</xforms:label>
<xforms:output class="Amount" id="taxtotal"
    ref="OrderInfo/PriceInfo/TaxTotal" />

Этот тег во многом схож с <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-->
<xforms:action event="click" >
    <xforms:refresh ev:event="xforms:activate"/>
</xforms:action>

При событии event обработчик событий перехватывает это событие и генерирует действие <refresh>.

В пределах одного и того же тега <action> можно иметь множество действий. Когда обработчик событий активирован, он вызывает все действия, определенные в пределах своего тела. (Полный список декларативных действий XForms приведен в Приложении G.) При размещении внутри тега <action> эти общие действия позволяют клиентским браузерам генерировать контекст в ответ на событие, вызванное пользователем. Теги <action> могут быть также определены в пределах модели. В следующем разделе объясняется, как встроить тег <action> в контрол формы.

Более подробная информация о <action> приведена в Спецификации (см. Приложение B1).

trigger

 

trigger - это контрол пользовательского интерфейса, который выполняет действие при активации. Например, это могут быть кнопки, которые реагируют на щелчок мышки. При активации trigger вызывает XML-событие, которое перехватывается обработчиком событий и которое описано с помощью тега <action>. Вы можете определить trigger, задав инструкцию, как показано в Листинге 15:


Листинг 15. Инструкция trigger без указания события



<!--In the User Interface-->
<xforms:trigger>
    <label>My Refresh Trigger</label>
</xforms:trigger>

 

Этот trigger, однако, ничего не делает. Для того, чтобы он что-нибудь выполнил, необходимо встроить его вместе действием, подобным тому, что было определено в action (см. Листинг 16).


Листинг 16. Работающая инструкция trigger

<!--In the User Interface-->
<xforms:trigger>
    <xforms:label>Reset</xforms:label>
    <xforms:action event="click" >
        <xforms:refresh ev:event="xforms:activate"/>
    </xforms:action>
</xforms:trigger>

При щелчке мышки trigger запускает событие event, которое перехватывается обработчиком событий тега <action>. В результате вызывается действие <refresh>.

Более подробная информация о <trigger> приведена в Спецификации (см. Приложение B12).

submit

 

Тег <submit> создает trigger, который, при щелчке мышки, вызывает действие, описанное в теге <submission>. (В действительности это псевдоним для trigger, который содержит действие отсылки, связанное с отдельным тегом <submission>.)


Листинг 17. Инструкция submit

<!--In the User Interface-->
<xforms:submit submission="sub">
    <xforms:label>Submit</xforms:label>
</xforms:submit>

Более подробная информация <submit> приведена в Спецификации (см. Приложение B10).

Заключение

 

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

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

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

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

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

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

Ресурсы

  • Прочитайте материалы о XForms, опубликованные на сайте W3C.

  • Познакомьтесь с XForms-процессами, бета-версии которых приведены в предлагаемом списке.

  • Прочитайте Рабочий проект спецификации XForms, обнародованный на сайте W3C.

  • Статья "Будущее Web-а: XHTML 2.0" ("The Web's future: XHTML 2.0", developerWorks, октябрь, 2002) посвящена новым возможностям XHTML 2.0.

  • В работе "Краткая история SGML" ("Brief history of SGML") рассказывается о происхождении и задачах XForms.

  • Посетив ресурс События XML (XML events), вы сможете понять, как работают XForms.

  • Более подробную информацию о XForms можно найти в статье "Ваша первая XForms" ("Your First XForms", XML Developer, февраль, 2002), написанной Питером Воуджелом (Peter Vogel). Однако, чтобы ее прочитать, необходимо подписаться на XML Developer.

  • Ресурсы developerWorks XML technology zone и Web Architecture topic предлагают подборку материалов о XML и HTML, соответственно.

  • Станица IBM WebSphere Studio Application Developer посвящена этой интегрированной среде обработке, предназначенной для построения, тестирования и развертывания J2EE-приложений, в том числе генерации XML-документов из DTD и схем.

  • На странице IBM Certified Developer in XML and related technologies приведена информация о том, как стать сертифицированным разработчиком XML- и других релевантных технологий.

Популярное

Не так давно в сети появился новый сервис, под названием Dead Man Zero. Этот сервис сделал...
Рынок социальных площадок уже давно стал стабильным. Несмотря на то, что время от времени...
Artisteer 4 – единственный в своем роде продукт, позволяющий автоматизировать работу над созданием...
Октябрь 2018 (14)
Февраль 2017 (3)
Январь 2017 (1)
Август 2016 (1)
Май 2016 (2)
Ноябрь 2015 (1)

Карта сайта: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41

Друзья сайта



Случайная цитата

Alan Kay:

"Lisp — это не язык, а строительный материал."

Опрос

Какой текстовый редактор Вы используете?

OpenOffice
AbiWord
Notepad++
UltraEdit
PSPad
Microsoft Office
Microsoft Блокнот
Другой...