Documentation on Faceplate
  • English
  • Russian

›Faceplate EN

Faceplate EN

  • Introduction to FACEPLATE
  • System installation
  • Tag editor
  • Graphic editor
  • Connection
  • Message system
  • Archive system
  • User rights management
  • Server configuration
  • Работа с отчетами
  • Script editor
  • Work with video
  • Development of multilingual projects
  • Относительное позиционирование объектов

Относительное позиционирование объектов

Введение

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

  1. лейаут с абсолютным позиционированием элементов (absolute layout)
  2. лейаут с гибким относительным позиционированием элементов (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 - элементы распределяются в ряду (колонке) равномерно, одинаковый отступ как между двумя элементами, так между границей контейнера и элементом. свойство justify-content рис. 2. Свойство justify-content.

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

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

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

  • flex-start - ряды выравниваются по верхней границе контейнера (колонки выравниваются по правой границе контейнера);
  • flex-end - ряды выравниваются по нижней границе контейнера (колонки выравниваются по левой границе контейнера);
  • center - выравнивание колонок (рядов) по центру контейнера;
  • baseline - выравнивание колонок (рядов) относительно базовой линии контейнера. свойство align-content рис. 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 могут быть изменены как из окна свойств элемента, так и путем перетаскивания спотов на выделенном элементе. Очистить данные свойства для растягиваемых элементов можно только через окно свойств. Если данные свойства были не заданы, изменение размеров элемента при помощи спотов приведет к установке этих свойств.

← Development of multilingual projects
  • Свойства раздела layout группового элемента
  • Свойства раздела geometry дочернего элемента