Учебное пособие (1075724), страница 33
Текст из файла (страница 33)
Результат выполнения примера 5.3. Файл «select1.xhtml».5.7.12 Элемент groupИспользуется как простой контейнер для элементов управления. Элементы«group» могут быть вложены друг в друга.На элемент «group» оказывает влияние атрибут «appearance».Элемент «group» может быть привязан к XML-элементам данных с помощьюатрибута «ref».Пример 5.3. Файл «group.xhtml».<?xml version="1.0" encoding="UTF-8"?><html xmlns="http://www.w3.org/1999/xhtml"xmlns:xforms="http://www.w3.org/2002/xforms"xmlns:ev="http://www.w3.org/2001/xml-events" ><head><title>Пример элемента group</title>311<!-- Пустой префикс пространства имен обязателен для корневогоэлемента xforms:instance --><xforms:model><xforms:instance><example xmlns=""><text1/><text2/><text3/></example></xforms:instance></xforms:model></head><body><xforms:group appearance="full"><xforms:label>Заголовок группы(appearance="full")</xforms:label><xforms:input ref="text1"><xforms:label>Введите текст 1:</xforms:label></xforms:input><xforms:input ref="text2"><xforms:label>Введите текст 2:</xforms:label></xforms:input><xforms:input ref="text3"><xforms:label>Введите текст 3:</xforms:label></xforms:input></xforms:group><hr/><xforms:group appearance="compact"><xforms:label>Заголовок группы(appearance="compact")</xforms:label><xforms:input ref="text1">312<xforms:label>Введите текст 1:</xforms:label></xforms:input><xforms:input ref="text2"><xforms:label>Введите текст 2:</xforms:label></xforms:input><xforms:input ref="text3"><xforms:label>Введите текст 3:</xforms:label></xforms:input></xforms:group><hr/><xforms:group appearance="minimal"><xforms:label>Заголовок группы(appearance="minimal")</xforms:label><xforms:input ref="text1"><xforms:label>Введите текст 1:</xforms:label></xforms:input><xforms:input ref="text2"><xforms:label>Введите текст 2:</xforms:label></xforms:input><xforms:input ref="text3"><xforms:label>Введите текст 3:</xforms:label></xforms:input></xforms:group></body></html>Результат выполнения примера:313Рис.
5.19. Результат выполнения примера 5.3. Файл «group.xhtml».5.7.13 Элемент switchЭтот элемент позволяет группировать элементы управления во «вкладки» ипереключаться между вкладками.Вкладка задается с помощью элемента «xforms:case», у которого долженбыть задан обязательный атрибут «id» для ссылки на вкладку.
Элементыуправления, относящиеся к вкладке, вложены в элемент «xforms:case».Активной (отображаемой для пользователя) может быть только одна вкладка,по умолчанию это первая вкладка. Чтобы сделать активной не первую вкладку, усоответствующегоэлемента«xforms:case»необходимоуказатьатрибут«selected="true"».Элемент«switch»позволяетпереключатьвкладкиврезультатевозникновения события (например, при нажатии на кнопку). В обработчиксобытия помещается элемент «xforms:toggle» с атрибутом «case="id элементаcase"», который переключает вкладку, то есть делает активным указанныйэлемент «xforms:case».314В элементе «xforms:toggle» не указывается идентификатор элемента «switch»,потому что это не нужно, идентификаторы элементов «case» уникальны и по нимможно определить соответствующий элемент «switch».В элементе «xforms:toggle» вместо атрибута «case» может быть использованвложенный элемент «xforms:case» с атрибутом «value», который позволяетдинамически формировать идентификатор вкладки для переключения.Элемент «switch» не предназначен для того, чтобы переключаться междувкладками на основе изменения значений данных.
Для этого может бытьиспользован элемент «group» с атрибутом «ref».Пример 5.3. Файл «switch.xhtml».<?xml version="1.0" encoding="UTF-8"?><html xmlns="http://www.w3.org/1999/xhtml"xmlns:xforms="http://www.w3.org/2002/xforms"xmlns:ev="http://www.w3.org/2001/xml-events" ><head><title>Пример элемента switch</title><!-- Пустой префикс пространства имен обязателен для корневогоэлемента xforms:instance --><xforms:model id="result_model"><xforms:instance><example xmlns=""><result>val1</result><num>3</num></example></xforms:instance></xforms:model><xforms:model id="list_data"><xforms:instance><example xmlns=""><item><text>Значение из модели 1</text><data>val1</data>315</item><item><text>Значение из модели 2</text><data>val2</data></item><item><text>Значение из модели 3</text><data>val3</data></item></example></xforms:instance></xforms:model></head><body><xforms:group><!-- Кнопки для переключения --><xforms:trigger><xforms:label>select (appearance="full")</xforms:label><xforms:toggle ev:event="DOMActivate" case="select_1"/></xforms:trigger>Так как у элемента «xforms:toggle» задан атрибут «ev:event="DOMActivate"»,то он является обработчиком «стандартного» события для элемента верхнегоуровня «xforms:trigger».<xforms:trigger><xforms:label>select (appearance="compact")</xforms:label><xforms:toggle ev:event="DOMActivate" case="select_2"/></xforms:trigger><xforms:trigger><xforms:label>select (appearance="minimal")</xforms:label><xforms:toggle ev:event="DOMActivate"><!-- id case может быть определено динамически -->316<xforms:case value="concat('select_', '3')" /></xforms:toggle></xforms:trigger><!-- Переключатель --><xforms:switch><xforms:case id="select_1"><xforms:select model="result_model" ref="result"appearance="full"><xforms:label>appearance="full":</xforms:label><xforms:itemset model="list_data" nodeset="item"><xforms:label model="list_data" ref="text"/><xforms:value model="list_data" ref="data"/></xforms:itemset></xforms:select></xforms:case><xforms:case id="select_2" selected="true"><xforms:select model="result_model" ref="result"appearance="compact"><xforms:label>appearance="compact":</xforms:label><xforms:itemset model="list_data" nodeset="item"><xforms:label model="list_data" ref="text"/><xforms:value model="list_data" ref="data"/></xforms:itemset></xforms:select></xforms:case><xforms:case id="select_3"><xforms:select model="result_model" ref="result"appearance="minimal"><xforms:label>appearance="minimal":</xforms:label><xforms:itemset model="list_data" nodeset="item"><xforms:label model="list_data" ref="text"/><xforms:value model="list_data" ref="data"/>317</xforms:itemset></xforms:select></xforms:case></xforms:switch></xforms:group></body></html>Результат выполнения примера:Рис.
5.20. Результат выполнения примера 5.3. Файл «switch.xhtml».В следующем примере с помощью элемента «switch» реализован прототип«мастера», который позволяет последовательно вводить данные в форму сиспользованием вкладок и кнопок «далее» и «возврат».Пример 5.3. Файл «switch_prev_next.xhtml».<?xml version="1.0" encoding="UTF-8"?>318<html xmlns="http://www.w3.org/1999/xhtml"xmlns:xforms="http://www.w3.org/2002/xforms"xmlns:ev="http://www.w3.org/2001/xml-events" ><head><title>Пример мастера на основе switch</title><!-- Пустой префикс пространства имен обязателен для корневогоэлемента xforms:instance --><xforms:model id="result_model"><xforms:instance><example xmlns=""><result>val1</result><num>3</num></example></xforms:instance></xforms:model><xforms:model id="list_data"><xforms:instance><example xmlns=""><item><text>Значение из модели 1</text><data>val1</data></item><item><text>Значение из модели 2</text><data>val2</data></item><item><text>Значение из модели 3</text><data>val3</data></item></example></xforms:instance></xforms:model></head>319<body><xforms:group><xforms:switch><xforms:case id="select_1" selected="true"><xforms:input model="list_data" ref="//item[1]/text"><xforms:label>Первый параметр:</xforms:label></xforms:input><xforms:trigger><xforms:label>Далее</xforms:label><xforms:toggle ev:event="DOMActivate" case="select_2"/></xforms:trigger></xforms:case><xforms:case id="select_2"><xforms:input model="list_data" ref="//item[2]/text"><xforms:label>Второй параметр:</xforms:label></xforms:input><xforms:trigger><xforms:label>Возврат</xforms:label><xforms:toggle ev:event="DOMActivate" case="select_1"/></xforms:trigger><xforms:trigger><xforms:label>Далее</xforms:label><xforms:toggle ev:event="DOMActivate" case="select_3"/></xforms:trigger></xforms:case><xforms:case id="select_3"><xforms:input model="list_data" ref="//item[3]/text"><xforms:label>Третий параметр:</xforms:label></xforms:input>320<xforms:trigger><xforms:label>Возврат</xforms:label><xforms:toggle ev:event="DOMActivate" case="select_2"/></xforms:trigger><xforms:trigger><xforms:label>Подтверждение</xforms:label></xforms:trigger></xforms:case></xforms:switch></xforms:group></body></html>Результат выполнения примера:321Рис.
![](https://s.studizba.com/z.php?f=/templates/si/i/noavatar.png&w=100&h=100&t=1"){kind=avatar}
