Статьи

Flex 4 Spark Resizable Controls

Октябрь 28, 2017

Пожалуйста, перейдите сюда для
Flex 3 Resizable Containers .

Я создал кучу скинов для многих общих компонентов Spark, что позволяет изменять их размеры. Каждый из этих скинов содержит
resizeHandle, который при перетаскивании позволяет изменять размер элемента управления. Есть два класса дескрипторов изменения размера, которые вы можете использовать, по умолчанию это
flex.utils.spark.resize.ResizeHandleLines . Вы можете заменить каждое вхождение этого класса на
flex.utils.spark.resize.ResizeHandleDots, если хотите.

Вот список скинов изменения размера:

За исключением
класса ResizableLabel , все остальные являются скинами, поэтому их можно использовать очень просто, задав для
свойства skinClass = «flex.utils.spark.resize .___ Skin» соответствующий скин.

Другой вариант — создать стиль CSS для
ВСЕХ
классов spark.components.Scroller, чтобы использовать
класс flex.utils.spark.resize.ResizableScrollerSkin, например:

<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
@namespace spark "flex.utils.spark.*";
@namespace resize "flex.utils.spark.resize.*";

/* Make all Scroller's use the resizable scroller skin. */
s|Scroller {
  skin-class: ClassReference("flex.utils.spark.resize.ResizableScrollerSkin");
} 
</fx:Style>

** Обратите внимание, что я переименовал пакет
Flex3 flex.utils.ui.resize. * В новое имя пакета Flex4 / Spark
flex.utils.spark.resize. * .

Наиболее используемый скин — это
ResizableScrollerSkin , он используется в TextAreas, Lists, DataGrids, Trees, ComboBox, DropDownLists и всем, что использует
компонент Scroller . Как это работает, это использование обложки для Scroller, которая добавляет дескриптор изменения размера и использует пользовательские
классы HScrollBar и
VScrollBar, которые оставляют место для дескриптора изменения размера (самый простой способ, который я мог бы сделать). Каждый из изменяемых размеров скинов использует
ResizeManagerКласс для обработки событий мыши и изменения размера соответствующего элемента управления.

Изменяемые размеры скинов ComboBox и DropDownList немного отличаются тем, что они оба сохраняют размер выпадающего списка, поскольку он каждый раз уничтожается и создается заново. Он также устанавливает
popUpWidthMatchesAnchorWidth = «false» после изменения размера, поскольку ширина больше не соответствует привязке.

Я также добавил поддержку ограничения размера только в вертикальном или горизонтальном направлении. Есть много способов сделать это, вы можете установить стиль для компонента resize:

.resizePanel {
  resize-direction: vertical; /* or horizontal */
}

Или вы можете вызвать статический метод
класса ResizeManager :

ResizeManager.setResizeDirection(resizePanel, "vertical"); // or "horizontal"

Или, если вы можете получить доступ к классу ResizeManager (обычно хранящемуся в классе скина), вы можете установить
свойство resizeDirection в менеджере следующим образом:

resizeManager.resizeDirection = "vertical"; // or "horizontal";

В классе ResizeManager определены
константы для «вертикального», «горизонтального» и «обоих» (по умолчанию).

Обновление :

я добавил новый скин под названием
ResizableDraggableTitleWindowSkin, который использует
класс MoveManager, чтобы позволить перетаскивать TitleWindow по экрану. Он также добавляет небольшую ручку перетаскивания в заголовке.

То же самое можно сделать для других классов (например, Panel), следуя той же процедуре. Все, что требуется, — это
dragComponent (компонент, который прослушивает события перетаскивания мышью) и
moveComponent (компонент, который перемещается — в данном случае это TitleWindow).

Вот пример большинства скинов, с включенным видом-источником.

29
Share: