Panel
Главным классом базовой библиотеки sFF, дающий всем остальным компонентам свойства и методы позиционирования, является класс компонента Panel. Все остальные классы визуальных компонентов наследуются либо напрямую от этого класса, либо от его потомков.
Panel - визуальный класс компонента, несущий в себе включенные классы (агрегаты), и их свойства, которые создаются в унаследованных классах. При наследовании (корректном, при соблюдении методики) всегда создаётся минимум один новый класс с названием, совпадающим с именем нового класса. Таким образом гарантируется правильная трёхуровневая адресация любого свойства в sFF вида имяКласса.имяВКласса.имяСвойства (Panel.Panel.name или Label.Panel.name).
Список свойств класса компонента Panel
вКласс, свойство
Комментарий
Panel
Включенный класс компонента Panel
name
Имя компонента. Применяется для адресации операции над компонентом.
parentPane
Компонент или его pane, являющиеся его родительским элементом. При изменении, компонент становится дочерним компонентом относительно назначенного ему родителя.
bound
См. ниже.
clip
Дочерние компоненты, находящиеся внутри и выходящие за его границы, будут обрезаны по ним.
color
Цвет компонента
container
Компонент ведёт себя как flexbox и выравнивает все дочерние компоненты (несмотря на их привязки) в качестве блоков.
containerSpace
Методика внутреннего выравнивания блоков внутри container. Работает только при container установленном в true.
cursor
Тип HTML-курсора над компонентом.
disabled
Компонент недоступен.
draggable
Компонент можно перетаскивать.
fact
См. ниже.
height
Высота компонента.
heightMeasure
Единицы высоты (px или %).
opacity
Прозрачность. Применяется ко всем дочерним компонентам.
radius
Радиус скругления углов компонента.
rotate
Поворот компонента. Дочерние компоненты поворачиваются вместе с родительским.
useCSS
Использование глобального стиля для компонента, либо использование стилей, установленных в компоненте.
visible
Видимость компонента. Дочерние компоненты повторяют поведение родителя.
width
Ширина компонента.
widthMeasure
Единицы ширины (px или %).
x
Горизонтальная координата верхнего левого угла компонента.
xMeasure
Единицы координаты X (px или %).
y
Вертикальная координата верхнего левого угла компонента.
yMeasure
Единицы координаты Y (px или %).
z
Положение относительно других компонентов. Чем больше z, тем компонент "ближе", перекрывая другие компоненты. Дочерние компоненты повторяют поведение родителя.
Border
Включенный класс границы компонента
color
Цвет границы
lineType
Тип границы (dashed, dotted, double ...)
width
Толщина границы в пикселях
Shadow
Включенный класс тени
blur
Величина размытия (чем больше - тем тень светлее)
color
Цвет тени
inset
Внутреннее расположение тени
offsetX
Горизонтальное смещение
offsetY
Вертикальное смещение
spread
Сжатие тени (при 0 размер тени равен размеру компонента)
Отображаемое в sE свойство Panel.bound является составным и используется только для справки. При расчётах размеров pane компонента используются действительно существующие свойства, показывающие его размеры в пикселях и его положение (описываемый вокруг компонента прямоугольник) относительно видимой области просмотра (точки с координатами {x:0,y:0}). Эти свойства нельзя изменить, они только-для-чтения.
Свойство
Значение
Panel.boundL
Расстояние до левой границы прямоугольника
Panel.boundT
Расстояние до верхней границы прямоугольника
Panel.boundR
Расстояние до правой границы прямоугольника
Panel.boundB
Расстояние до нижней границы прямоугольника
Panel.boundW
Ширина прямоугольника
Panel.boundH
Высота прямоугольника
Отображаемое в sE свойство Panel.fact является составным и используется только для справки. При расчётах размеров компонентов используются действительно существующие свойства, показывающие его расчётные значения всех CSS-свойств pane компонента, полученных после применения всех активных таблиц стилей, и завершения базовых вычислений значений, которые они могут содержать. Эти свойства нельзя изменить, они только-для-чтения.
Свойство
Значение
Panel.factL
Расстояние до левой границы компонента
Panel.factT
Расстояние до верхней границы компонента
Panel.factR
Расстояние до правой границы компонента
Panel.factB
Расстояние до нижней границы компонента
Panel.factW
Ширина компонента
Panel.factH
Высота компонента
Panel.fact и Panel.bound могут показаться схожими свойствами, что вызовет непонимание причин их совместного существования во включенном классе Panel. Но поверните компонент, и вы увидите разницу.
В этот список не вошли включенные классы Signal, Anch, Menu, Hint.
Поскольку компоненты базовой библиотеки являются визуальными, все они отображаются на странице приложения. Это возможно в том случае, если в класс компонента включен хотя бы один HTML-элемент. В класс компонента Panel с этой целью включен div, имеющий специальное название pane, обеспечивающий видимость и отвечающий за позиционирование компонента. Поскольку все визуальные классы компонентов sFF унаследованы от класса Panel, самым нижним элементом компонента всегда является pane (Panel.pane, Shell.pane).
Элементов в компоненте может быть сколько угодно, есть компоненты, набранные из компонентов, но все они имеют двухуровневую адресацию вида имяКласса.имяЭлемента, но все они несут служебную роль, и при правильной реализации класса не должны интересовать программиста, использующего класс в работе, так как все возможные операции с ними, если требуется, должны производиться методами самого класса. Чтобы не путать между собой включенные классы и элементы, всем классам даются имена с большой буквы, всем элементам - с маленькой.
Элемент pane является элементом DOM, как компонент Panel - компонентом ACM, выполняя роль связки между DOM и ACM.
Last updated