Введение

Под лейаутом (layout) в faceplate подразумевается способ расстановки элементов в контейнере элементов. Контейнер (групповой элемент) - это элемент который может содержать другие элементы, в том числе и другие контейнеры (вложенные контейнеры). К контейнерам первого уровня относятся: мнемосхема, отчетная форма, панель. Вложенным контейнером является группа элементов. В настоящее время поддерживается два лейаута:

лейаут с абсолютным позиционированием элементов (absolute layout)
лейаут с гибким относительным позиционированием элементов (flexible layout). Лейаут контейнера можно поменять в разделе layout в окне свойств группового элемента (см. рис 1). В зависимости от выбранного лейаута, перечень свойств в разделе "layout" группового элемента будет разным. Так же от лейаута группового элемента могут зависеть свойства вложенных в него дочерних элементов. рис. 1. Свойства лейаута с гибким позиционированием элементов.

Лейаут с абсолютным позиционированием элементов

Местоположение дочерних элементов внутри группового элемента в этом случае определяется координатами дочерних элементов относительно верхнего левого угла группового элемента. Координаты элемента задаются свойствами top и left в разделе geometry. Координаты элемента можно менять как из окна свойств, так и путем перетаскивания элемента внутри контейнера.

Лейаут с гибким относительным позиционированием элементов

В данном случае, дочерние элементы в контейнере размещаются последовательно, один за другим, место элемента в этом списке задается свойством order раздела position дочернего элемента. Свойство order может быть изменено как из окна свойств, так и путем перетаскивания элемента внутри контейнера. Групповой элемент обладает довольно большим набором свойств, которые определяют то, каким именно образом отображается последовательность дочерних элементов. Эти свойства расположены в разделе layout группового элемента. Кроме того, множество дочерних элементов, в условиях flexible layout, можно условно разделить на две группы - растягиваемые элементы и не растягиваемые элементы. К не растягиваемым элементам относятся все графические примитивы (прямоугольник, эллипс, полилиния и т.д.) и большинство элементов управления и отчетов. К растягиваемым элементам на данный момент относятся бар чарт, слайдер, таблица, тренд. В зависимости от того, является ли элемент растягиваемым или нет, набор его свойств в разделе geometry будет разный. Эти свойства влияют на отображение данного элемента, а так же на местоположение соседних элементов.

Свойства раздела layout группового элемента

layout - свойство определяет лейаут группового элемента, имеет значение flexible для лейаута с гибким относительным позиционированием элементов.

flex-direction - данное свойство задает направление последовательности дочерних элементов в контейнере. Свойство может иметь следующие значения:

row - элменты размещаются в ряд слева направо;
column - элементы размещаются сверху вниз;
row-reverse - размещение элементов справо налево;
column-reverse - размещение элементов снизу вверх.

flex-wrap - свойство определяет, может ли последовательность дочерних элементов быть размещена на нескольких рядах (для flex-direction=row, flex-direction=row-reverse) или колонках (для flex-direction=column, flex-direction=column-reverse), если элементы не вмещаются в один ряд или колонку. Аналогом этого свойства является свойство "перенос строк" в текстовых редакторах. Свойство может принимать значения:

wrap - переносить элементы;
no-wrap - не переносить элементы;
wrap-reverse - переносить элементы в реверсивном порядке.

justify-content - определяет, каким образом распределяются элементы вдоль ряда (колонки), если в ряду (колонке) остается свободное место. Cвойство может принимать значения:

flex-start - элементы выравниваются относительно начала ряда (колонки);
flex-end - элементы выравниваются относительно конца ряда (колонки). Начало ряда (колонки) определяется свойством flex-direction;
center - элементы выравниваются по центру ряда (колонки);
space-between - элементы распределяются в ряду (колонке) равномерно, первый и последний элемент выравниваются по границам контейнера;
space-around - элементы распределяются в ряду (колонке) равномерно, между элементом и границей контейнера отступ одинарный, между двумя элементами отступ двойной;
space-evenly - элементы распределяются в ряду (колонке) равномерно, одинаковый отступ как между двумя элементами, так между границей контейнера и элементом. рис. 2. Свойство justify-content.

align-items - определяет выравнивание элементов поперек ряда (колонки), если в ряду (колонке) остается свободное место по высоте ряда (ширине колонки). Свойство может иметь следующие значения:

flex-start - элементы выравниваются относительно верхней границы ряда (правой границы колонки);
flex-end - выравнивание относительно нижней границы ряда (левой границы колонки);
center - выравнивание относительно центра ряда (колонки);
baseline - выравнивание относительно базовой линии ряда (колонки). рис. 3. Свойство align-items.

algin-content - если элементы располагаются в несколько рядов (колонок), свойство определяет относительное расположение рядов (колонок). Свойство может принимать значения:

flex-start - ряды выравниваются по верхней границе контейнера (колонки выравниваются по правой границе контейнера);
flex-end - ряды выравниваются по нижней границе контейнера (колонки выравниваются по левой границе контейнера);
center - выравнивание колонок (рядов) по центру контейнера;
baseline - выравнивание колонок (рядов) относительно базовой линии контейнера. рис. 4. Свойство align-content.

Свойства раздела geometry дочернего элемента

Не растягиваемые элементы в разделе geometry имеют два свойства width и height, которые задают размеры элемента.

Растягиваемые элементы имеют следующие свойства:

width - ширина элемента. Если у элемента не задана ширина, считается, что такой элемент должен занимать доступное ему место по ширине;
height - высота элемента. Если у элемента не задана ширина, считается, что такой элемент должен занимать доступное ему место по высоте;
min-width - минимальная ширина элемента, ширина элемента не может быть меньше указанного значения;
min-height - минимальная высота элемента, высота элемент не может быть меньше указанного значения;
max-width - максимальная ширина элемента, ширина элемента не может быть больше указанного значения;
max-height - максимальная высота элемента, высота элемент не может быть больше указанного значения;
flex-grow - значение этого свойства учитывается только для элементов, у которых не задана ширина (для flex-direction=row, flex-direction=row-reverse) либо высота (для flex-direction=column, flex-direction=column-reverse). Значение является численным и показывает, сколько места будет занимать данный элемент относительно других элементов в ряду (колонке).

Свойства width и height могут быть изменены как из окна свойств элемента, так и путем перетаскивания спотов на выделенном элементе. Очистить данные свойства для растягиваемых элементов можно только через окно свойств. Если данные свойства были не заданы, изменение размеров элемента при помощи спотов приведет к установке этих свойств.