Citeck EcoS form templates

Author: Alexander S. Kazachkin

Формы Citeck EcoS отображаются на странице на основании выбранного глобального шаблона и соответствующих шаблонов атрибутов и групп. Существуют 3 глобальных шаблона:

Table - глобальный шаблон, используемый по умолчанию. Используется для расположения элементов в 1, 2 или 3 столбца. В качестве шаблона группировки атрибутов используется rowset, а для атрибута - row.
Wide - используется для расположения элементов по всей ширине экрана. В качестве шаблона группировки атрибутов используется blockset, а для атрибута - block.
Tabs - глобальный шаблон для группировки элементов по вкладкам, но в отличии от 2 предыдущих, используется исключительно для группировки наборов атрибутов. В качестве группирующих шаблонов использует глобальные шаблоны Table и Wide.

Каким образом настраиваются шаблоны на форме можно подчерпнуть из руководства Forms in Citeck Ecos.

Шаблон Wide.

Что бы сгруппировать атрибуты, их необходимо заключить в группирующий шаблон blockset. Этот шаблон обрамляет группу атрибутов горизонтальными полосами.

Все атрибуты в группе будут пытаться разместиться по всей ширине экрана. Если атрибутов много или их ширина слишком велика, элементы группы займут еще одну строку.

По умолчанию блок атрибута занимает 250 пикселей экранного пространства. Ширина является конфигурируемым параметром и может быть задана иерархическим образом. Так в корне шаблона может быть указана ширина блоков для всех элементов, а ширина в блоке будет распространяться только на элементы внутри блока. Так же каждый атрибут может иметь индивидуальную ширину. Чем глубже передан параметр, тем его приоритет выше. Максимальным приоритетом будет обладать атрибут с непосредственно заданным для него параметром ширины. Такой подход позволяет достаточно гибко конфигурировать ширину элементов на форме.

В качестве примера рассмотрим следующую конфигурацию формы:

    <view class="example:form1" template="wide">
        <param name="width">300px</param>

        <view id="blockset-with-width">
            <param name="width">450px</param>

            <field prop="example:prop1" />
            <field prop="example:prop2">
                <param name="width">600px</param>
            </field>
            <field prop="example:prop3" />
        </view>

        <view id="blockset-without-width">
            <field prop="example:prop4">
                <param name="width">700px</param>
            </field>
            <field prop="example:prop5" />
        </view>
    </view>

Ширина в 300 пикселей задана глобальным образом для всех блоков атрибутов. На форме есть 2 группирующих блока, один из которых так же имеет настройку ширины вложенных в него блоков. Таким образом все элементы внутри блока с идентификатором blockset-with-width будут иметь ширину 450 пикселей, кроме атрибута example:prop2, у которого тоже задана ширина.

Если рассмотреть ширину всех атрибутов, то получится схема:

```
example:prop1 - 450px
```
```
example:prop2 - 600px
```
```
example:prop3 - 450px
```
```
example:prop4 - 700px
```
```
example:prop5 - 300px
```

Шаблон Tabs.

Используя этот шаблон можно использовать группирующие блоки как вкладки. Этот механизм может быть полезен при построении больших форм или сложных группирующих структур на форме.

Что бы поименовать вкладку, группе необходимо передать параметр title.

Шаблон может быть указан как глобально, так и для определенной группы атрибутов.

Обращаю внимание, что механизм построения формы проигнорирует атрибуты, если внутри шаблона они будут размещены произвольным образом без группы.

Рассмотрим в качестве примера следующую схему:

<view class="example:form2" template="tabs">
    <view id="tab 1">
        <view>
            <field prop="example:prop1" />
        </view>

        <field prop="example:prop2" />
        <field prop="example:prop3" />

        <view tempate="tabs">
            <field prop="example:prop4" />
            <field prop="example:prop5" />

            <view>
                <field prop="example:prop6" />
                <field prop="example:prop7" />
            </view>
        </view>
    </view>

    <view id="tab 2" template="wide">
        <param name="title">Group 2</param>

        <field prop="example:prop8" />
        <field prop="example:prop9" />
    </view>
</view>

Форма использует шаблон вкладок на глобальном уровне, а значит все группы атрибутов последующие будут являться вкладками, т.е. блоки "tab 1" и "tab 2" будут глобальными вкладками на форме.

Вторая вкладка будет использовать для всех последующих элементов шаблон Wide, а первая вкладка использует шаблон по умолчанию Table.

Первая вкладка не использует параметра для именования вкладки, а значит ее имя будет сгенерировано автоматически (используется индекс в массиве вкладок и локализованое слово "Вкладка"). У второй вкладки программно задано название через параметр title.

Внутри первой вкладки несколько группирующих блоков и один из них использует шаблон Tabs. Это вполне нормальная ситуация, блок с вкладками будет размещаться внутри первой вкладки. Но вот вложенный блок вкладок задан не верным образом и в конечном счете будет состоять только из 1 вкладки, а атрибуты example:prop4 и example:prop5 не будут отображены на форме (шаблон игнорирует произвольные атрибуты без группирующих блоков ).