Учебник по Showcase: Элементы управления для ввода/вывода

Материал из Course Orchestra
Перейти к: навигация, поиск

Внимание! Изложенная здесь информация устарела! В качестве учебника следует использовать https://share.curs.ru/webhelp/ (work in progress).


xml с данными:

<schema xmlns="">
   <info>
       <name/>
       <growth/>
       <eyescolour/>
       <music/>
       <comment/>
   </info>
</schema>

Шаблон:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="xsltforms/xsltforms.xsl" type="text/xsl"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ev="http://www.w3.org/2001/xml-events"
    xmlns:xf="http://www.w3.org/2002/xforms">
    <head>
        <xf:model id="mainModel">
            <xf:instance id="mainInstance">
                <schema xmlns=""/>
            </xf:instance>
        </xf:model>
    </head>
    <body>
        <div style="font-size: 15px;"> Имя: </div>
        <div>
            <xf:input ref="/schema/info/name">
                <xf:help>Справка</xf:help>
                <xf:hint>Дополнительная информация</xf:hint>
            </xf:input>
        </div>
        <div style="font-size: 15px;"> Цвет глаз (1): </div>
        <div>
            <xf:select1 ref="/schema/info/eyescolour" appearance="full">
                <xf:item>
                    <xf:label>Голубой</xf:label>
                    <xf:value>Голубой</xf:value>
                </xf:item>
                <xf:item>
                    <xf:label>Карий</xf:label>
                    <xf:value>Карий</xf:value>
                </xf:item>
                <xf:item>
                    <xf:label>Зеленый</xf:label>
                    <xf:value>Зеленый</xf:value>
                </xf:item>
            </xf:select1>
        </div>
        <div style="font-size: 15px;"> Цвет глаз (2): </div>
        <div>
            <xf:select1 ref="/schema/info/eyescolour">
                <xf:item>
                    <xf:label>Голубой</xf:label>
                    <xf:value>Голубой</xf:value>
                </xf:item>
                <xf:item>
                    <xf:label>Карий</xf:label>
                    <xf:value>Карий</xf:value>
                </xf:item>
                <xf:item>
                    <xf:label>Зеленый</xf:label>
                    <xf:value>Зеленый</xf:value>
                </xf:item>
            </xf:select1>
        </div>       
        <div style="font-size: 15px;"> Любимая музыка: </div>
        <div>
            <xf:select ref="/schema/info/music">
                <xf:item>
                    <xf:label>Классическая</xf:label>
                    <xf:value>Классическая</xf:value>
                </xf:item>
                <xf:item>
                    <xf:label>Инструментальная</xf:label>
                    <xf:value>Инструментальная</xf:value>
                </xf:item>
                <xf:item>
                    <xf:label>Эстрадная</xf:label>
                    <xf:value>Эстрадная</xf:value>
                </xf:item>
            </xf:select>
        </div>
        <div style="font-size: 15px;"> Комментарии: </div>
        <div>
            <xf:textarea ref="/schema/info/comment"/>            
        </div>        
        <div style="clear: both;">
            <xf:output ref="'Уважаемый ' + /schema/info/name 
                            + '! Ваш рост:' + /schema/info/growth 
                            + ', ваш цвет глаз:' + /schema/info/eyescolour
                            + ', ваш музыкальные предпочения:' + /schema/info/music"/>
        </div>
    </body>
</html>

В данном примере мы рассмотрим элементы управления, которые пользователи используют для наполнения формы. Чаще всего используются следующие контролы:

  • xf:input - это самый простой элемент отображения, на экране представляется как поле для ввода
  • xf:select - указывает на выбор нескольких значений из предложенного списка
  • xf:select1 - указывает на выбор ровно одного значения из предложенного списка
  • xf:textarea - большое поле для ввода
  • xf:output - вывод

Общим атрибутом для всех этих тегов является @ref, который показывает адрес, куда сохранится введенное значение. Например, <xf:input ref="/schema/info/name"/> означает, что на экране появится поле, значения которого будут хранится в xml по ссылке /schema/info/name.

Элемент <xf:textarea/> отличается от <xf:input/> чуть большим отображением на экране.

Элементы выбора <xf:select/> и <xf:select1/> дополнительно содержат теги выбираемых элементов <xf:item>, в которых через <xf:label/> и <xf:value/> указаны заголовки и значения выбираемых элементов. При этом элементы выбора могут содержать атрибут @appearance, который отвечает за внешний вид данных элементов.

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

Каждый элемент ввода/вывода может содержать тэги <xf:help/> и <xf:hint/>, которые используются для предоставления справочной информации. Рядом с элементом появляются соответствующие иконки, при наведении на которые возникает всплывающая подсказка.