...
Формы Citeck EcoS отображаются на странице на основании выбранного глобального шаблона и соответствующих шаблонов атрибутов и групп. Существуют 3 глобальных шаблона:
- Table - глобальный шаблон, используемый по умолчанию. Используется для расположения элементов в 1, 2 или 3 столбца. В качестве шаблона группировки атрибутов используется rowset, а для атрибута - row.
Wide - используется для расположения элементов по всей ширине экрана. В качестве шаблона группировки атрибутов используется blockset, а для атрибута - block.
- Tabs - глобальный шаблон для группировки элементов по вкладкам, но в отличии от 2 предыдущих, используется исключительно для группировки наборов атрибутов. В качестве группирующих шаблонов использует глобальные шаблоны Table и Wide.
Каким образом настраиваются шаблоны на форме можно подчерпнуть из руководства Forms in Citeck Ecos.
Шаблон Wide.
Что бы сгруппировать атрибуты, их необходимо заключить в группирующий шаблон blockset. Этот шаблон обрамляет группу атрибутов горизонтальными полосами.
Все атрибуты в группе будут пытаться разместиться по всей ширине экрана. Если атрибутов много или их ширина слишком велика, элементы группы займут еще одну строку.
По умолчанию блок атрибута занимает 250 пикселей экранного пространства. Ширина является конфигурируемым параметром и может быть задана иерархическим образом. Так в корне шаблона может быть указана ширина блоков для всех элементов, а ширина в блоке будет распространяться только на элементы внутри блока. Так же каждый атрибут может иметь индивидуальную ширину. Чем глубже передан параметр, тем его приоритет выше. Максимальным приоритетом будет обладать атрибут с непосредственно заданным для него параметром ширины. Такой подход позволяет достаточно гибко конфигурировать ширину элементов на форме.
В качестве примера рассмотрим следующую конфигурацию формы:Citeck EcoS Forms are displayed on the page according to the selected global template and the proper attribute and group templates. There are three global templates:
Table – is a global template used by default. It contains 1, 2 or 3 columns for arrangement of elements. The template for the attribute grouping is rowset, for the attribute itself – row.
Wide is used for arrangement of element on the full-width screen. The template for the attribute grouping is blockset, for the attribute itself – block.
Tabs – is a global template for arrangement of elements using tabs. Unlike the two previous templates, it is used only for arrangement of attribute sets. It uses the global templates Table and Wide as grouping templates.
Forms in Citeck Ecos contains the methods of setting up these templates.
"Wide" Template
The grouping template blockset must include the attributes in order to group it. This template frames the attribute group of the horizontal strings.
All attributes in the group will be placed in the full-width screen. If there are a lot of attributes or its width is large, the group elements will take one more string.
The attribute block takes 250 pixels of screen real estate by default. The width is a configured parameter and it can be specified in a hierarchical way. So the template root can contain the information about the block width for all elements, where the width in the block will be extended only to the elements inside the block.
Also every attribute can have its individual width. The better the parameter is uploaded, the higher its priority. The attribute with the individual width parameter will have the most maximum priority. Such approach allows to configure the element width on the form rather flexibly.
Let’s consider the following configuration form as an example:
| Code Block | ||||
|---|---|---|---|---|
| ||||
<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, у которого тоже задана ширина.
Если рассмотреть ширину всех атрибутов, то получится схема:The width of 300 pixels is given globally for all attribute blocks. The form contains 2 grouping block, one of them also has the width setting of attached blocks. Consequently all element inside the block with the blockset-with-width identity will have the width of 450 pixels except the example:prop2 attribute with the given width.
If we consider the width of all attributes, we get the following scheme:
example:prop1 - 450px
example:prop2 - 600px
example:prop3 - 450px
example:prop4 - 700px
example:prop5 - 300px
...
"Tabs
...
Используя этот шаблон можно использовать группирующие блоки как вкладки. Этот механизм может быть полезен при построении больших форм или сложных группирующих структур на форме.
Что бы поименовать вкладку, группе необходимо передать параметр title.
Шаблон может быть указан как глобально, так и для определенной группы атрибутов.
Обращаю внимание, что механизм построения формы проигнорирует атрибуты, если внутри шаблона они будут размещены произвольным образом без группы.
...
" Template
With this template you can use the grouping block as tabs. This option can be useful for the building of big forms or grouping structures on the form.
In order to rename the tab, the group must have the title parameter.
The template can be specified globally as well as for defined attribute group.
Note that the mechanism of form building ignores the attributes, if these attributes will be arranged at random inside the template.
Let’s consider the following scheme as an example:
| Code Block | ||||
|---|---|---|---|---|
| ||||
<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 не будут отображены на форме (шаблон игнорирует произвольные атрибуты без группирующих блоков The form uses the tab template globally, it means that all next attribute groups will be the tabs, i.e. “tab1” and “tab2” blocks will be the global tabs on the form.
The second tab will use the “Wide” template for all next elements, but the first one – “Table” template used by default.
The first tab doesn’t use the parameter to name the tab, so this name will be generated automatically (the index in the tab array and the localized word “Tab” are used here). The second tabs is specified with the “title” parameter
There are several grouping block inside the 1st tab where one of them uses the “Tabs” template. This is quite normal if the first tab consists of the block with tabs. However the block with tabs will be set incorrectly. Finally it will consists of only one tab; and attributes “example:prop4” and “example:prop5” won’t be displayed on the form (the template ignores undefined attributes without grouping blocks).