Дизайн формы
Дизайн формы определяет то, каким образом форма будет отображаться в интерактивном представлении.
Как и в любом GUI, дизайн формы представляет собой иерархию, узлами которой являются компоненты. Компонентами, в свою очередь, могут быть:
- контейнеры - компоненты, которые содержат в себе другие компоненты.
- базовые компоненты - графические представления элементов, описанных в структуре формы и интерактивном представлении формы.
Каждый компонент должен иметь свое уникальное имя в рамках формы.
Контейнеры
Все потомки любого контейнера образуют упорядоченный список. Для каждого контейнера на форме необходимо определить, каким образом должны располагаться его потомки. Для этого контейнеру можно задать определенный тип:
- Вертикальный контейнер (
CONTAINERV
) - все потомки располагаются сверху вниз. - Горизонтальный контейнер (
CONTAINERH
) - все потомки располагаются слева направо. - Панель закладок (
TABBED
) - в любой момент времени показывается ровно один потомок, который определяет пользователь путем выбора соответствующий закладки. - Колоночный контейнер (
COLUMNS
) - компоненты располагаются в фиксированном количестве колонок. При добавлении потомок помещается в первую колонку с минимальным количеством компонент. По сути заполнение идет сначала слева направо, затем, когда количество колонок достигает заданного, начинается новый ряд, который располагается относительно предыдущих сверху вниз, затем расположение опять идет слева направо и так далее. - Вертикальный сплиттер (
SPLITV
) - может быть использован только в случае, если у контейнера ровно два потомка. В этом случае они располагаются сверху вниз, при этом пользователь может сам менять, какое пространство отдавать каждому из них. - Горизонтальный сплиттер (
SPLITH
) - аналогичен вертикальному сплиттеру, только потомки располагаются слева направо. - Прокручиваемый контейнер (
SCROLL
) - может быть использован только в случае, если у контейнера ровно один потомок. Этот единственный компонент занимает в контейнере все необходимое ему пространство, и если его не хватает появляется полоса прокрутки.
В будущих версиях последние три вида контейнеров (SPLITV
, SPLITH
, SCROLL
) будут признаны устаревшими, и заменены на соответствующие опции split
и scroll
в вертикальных и горизонтальных контейнерах.
По умолчанию, любой создаваемый контейнер имеет тип вертикальный контейнер.
Если в какой-то момент времени выполнения у контейнера потомки отсутствуют или являются невидимыми, то он автоматически скрывается. В свою очередь, если какой-то компонент не является потомком ни одного контейнера, то он также не будет показан на форме.
Базовые компоненты
При задании дизайна формы разработчик может использовать следующие базовые компоненты, которые создаются автоматически на основе структуры формы:
Группы объектов / деревья:
- Таблица / Дерево (
GRID
) - компонент, состоящий из рядов и колонок, в котором рядам соответствуют наборы объектов соответствующей группы объектов, а колонкам - свойства и действия. - Системный тулбар (
TOOLBARSYSTEM
) - панель, состоящая из кнопок, при помощи которых пользователь может проводить различные системные действия над рядами в таблице. Автоматически прячется, если таблица становится невидимой. - Пользовательский фильтр (
USERFILTER
) - компонент, при помощи которого пользователь может создавать и применять собственные фильтры к таблице.
Группы фильтров
- Группа фильтров (
FILTERGROUP
) - компонент, при помощи которого пользователь может активировать необходимые ему фильтры в группах фильтров формы.
Свойства / Действия
- Панель свойства (
PROPERTY
) - компонент, которые отображает заголовок и текущее значение свойства. Заголовок может быть как слева от ячейки значения, так и сверху. Не показывается, если свойство отображается в таблицу.
Размеры и расположение компонент
Разработчик может управлять, каким образом платформа будет распределять доступные размеры контейнеров между своими внутренними компонентами, а также как эти компоненты будут располагаться друг относительно друга.
Прежде всего, для каждого компонента можно задать базовый размер, который этот компонент получит в любом случае не зависимо от алгоритма расположения его контейнера.
Для определения окончательного размера компонент и их расположения внутри контейнера, используется следующий алгоритм:
Для каждого контейнера одно из направлений считается динамическим, другое - статическим. Динамическое направление определяется из названия контейнера, так, к примеру для вертикального контейнера динамическим направлением будет вертикальное, для горизонтального сплиттера - горизонтальное. Для колоночного, прокручиваемого контейнера, а также панели закладок, динамическим направлени ем считается вертикальное. Далее, в зависимости от направления:
-
Динамическое - все компоненты располагаются друг за другом, в порядке их добавления в контейнер. При этом, для каждого компонента можно задать коэффициент расширения (
flex
). В этом случае оставшееся в контейнере пространство (то есть за вычетом базовых размеров всех внутренних компонент) делится между всеми компонентами пропорционально их коэффициентам расширения. -
Статическое - для каждого компонента задается выравнивание (
alignment
) - В начале (START
), По центру (CENTER
), В конце (END
), и Растянуть (STRETCH
). В первых трех случаях компонент в качестве окончательного размера получает свой базовый размер, и располагается в соответствии с указанным типом выравнивания (то есть в начале, по центру или в конце). Если же в качестве типа выравнивания используется Растянуть, окончательным размером компонента будет размер верхнего контейнера (но не меньше базового размера), а располагаться он будет ровно по центру.
К примеру, в случае вертикального верхнего контейнера, если для компонента задано выравнивание В начале, то он будет располагаться в контейнере максимально слева, а если Растянуть - то компонент займет все пространство от левой до правой границы.
Данный алгоритм расположения компонент является частным случаем CSS Flexible Box Layout (а в веб-клиенте при помощи него и реализуется). Так, к примеру, коэффициенту расширения соответствует свойство CSS flex-grow
, а базовому размеру - flex-basis
.
Колоночный контейнер свое статическое (горизонтальное) направление разбивает на N
одинаковых частей (где N
- количество колонок), после чего каждая из частей располагает свои компоненты, как если бы эта часть была отдельным вертикальным контейнером.
Для базовых компонент можно задать специальную опцию автоматического определения размера (autoSize
), в этом случае базовый размер будет автоматически изменяться таким образом, чтобы вместить ровно все содержимое этого базового компонента (к примеру для таблицы - все ее записи плюс заголовок).
Расположение свойств в таблице (а точнее колонок, которые отображают их значения) происходит аналогично, как если бы таблица была горизонтальным контейнером, а колонки таблицы - внутренними компонентами этого контейнера.
Так как в текущей реализации для расположения колонок внутри таблицы в Web клиенте используется механизм CSS Table Layout Fixed (а его возможности существенно ограничены), для свойств, отображающихся в таблице, коэффициент расширения может быть равен либо 0
, либо базовому размеру.
Расположение заголовка и ячейки значения внутри панели свойства происходит аналогично, как если бы панель была контейнером (горизонтальным - если заголовок слева, вертикальным - если сверху), в котором у ячейки значения коэффициент расширения равен 1
, у заголовка равен 0
, а выравнивания обоих равны STRETCH
.
Размеры ячеек значений свойств
При отображении свойств можно явно задавать как размеры всего контейнера (вместе с заголовком, если свойство находится в панели), так и размеры непосредственно ячейки значения. Для этого к названию размера необходимо добавить префикс value
- например valueWidth
). Также, стоит отметить, что именно эти размеры (то есть ячейки значения, а не всего контейнера) используются при определении ширин колонок, если свойство отоб ражается в таблице.
Для ячеек значений свойств также существует возможность задать базовую ширину не в пикселях, а при помощи некоторого значения-образца (widthValue
). В этом случае платформа сама с учетом используемых шрифта / маски / локали пользователя вычисляет и устанавливает ширину в пикселях, таким образом, чтобы пользователю было видно в точности заданное значение-образец (ни больше, ни меньше). Предполагается, что значение-образец должно быть либо строкой, либо его класс должен совпадать с классом значения свойства.
Кроме того, ширину ячейки значения можно задавать в символах (charWidth
), что эквивалентно тому, как если бы значение-образец было строкой и состояло из заданного количества нулей.
В последних двух случаях (то есть при задании ширины в виде значения-образца или в символах), если класс значения свойства при вводе подразумевает наличие справа кнопки (например, таким классом является DATE
), то к ширине ячейки значения свойства дополнительно добавляется ширина этой кнопки (21 пиксель).