Относительное позиционирование объектов
Введение
Под лейаутом (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 могут быть изменены как из окна свойств элемента, так и путем перетаскивания спотов на выделенном элементе. Очистить данные свойства для растягиваемых элементов можно только через окно свойств. Если данные свойства были не заданы, изменение размеров элемента при помощи спотов приведет к установке этих свойств.