3.5.2.2.11. SplitPanel

SplitPanel − контейнер, разбитый на две области, размер которых по горизонтали либо вертикали можно менять путем перемещения разделителя.

gui splitPanel

XML-имя компонента: split.

Пример описания панели с разделителем в XML-дескрипторе экрана:

<split orientation="horizontal" pos="30" width="100%" height="100%">
    <vbox margin="true" spacing="true">
        <dateField dataContainer="orderDc" property="date" caption="Date"/>
        <lookupField dataContainer="orderDc" property="customer" optionsContainer="customersDc" caption="Customer"/>
    </vbox>
    <vbox margin="true" spacing="true">
        <textField dataContainer="orderDc" property="amount" caption="Amount"/>
    </vbox>
</split>

Внутри контейнера split обязательно должны находиться два вложенных контейнера или компонента, которые и будут расположены по обе стороны разделителя.

Атрибуты split:

  • dockable - управляет видимостью кнопки сворачивания SplitPanel, значение по умолчанию false.

    gui SplitPanel dockable

    Сворачивание доступно только для горизонтального контейнера SplitPanel.

  • dockMode - задаёт направление сворачивания. Возможные значения: LEFT и RIGHT.

    <split orientation="horizontal"
           dockable="true"
           dockMode="RIGHT">
        ...
    </split>
  • minSplitPosition, maxSplitPosition - определяют диапазон допустимых значений позиции разделителя. Могут быть установлены в пикселях или в процентах.

    Например, вы можете запретить перетаскивать сплиттер вне диапазона между 100 и 300 пикселями с левой стороны компонента:

    <split id="splitPanel" maxSplitPosition="300px" minSplitPosition="100px" width="100%" height="100%">
        <vbox margin="true" spacing="true">
            <button caption="Button 1"/>
            <button caption="Button 2"/>
        </vbox>
        <vbox margin="true" spacing="true">
            <button caption="Button 4"/>
            <button caption="Button 5"/>
        </vbox>
    </split>

    Если вы хотите установить диапазон программно, вы должны указать единицу измерения с помощью Component.UNITS_PIXELS или Component.UNITS_PERCENTAGE

    splitPanel.setMinSplitPosition(100, Component.UNITS_PIXELS);
    splitPanel.setMaxSplitPosition(300, Component.UNITS_PIXELS);
  • orientation - задает ориентацию расположения компонентов. horizontal - вложенные компоненты располагаются горизонтально, vertical - вертикально.

  • pos - целое число, определяющее процентное соотношение размера первой области по отношению ко второй. Например, pos="30" означает соотношение областей 30/70. По умолчанию соотношение областей составляет 50/50.

  • reversePosition - указывает, что атрибут pos содержит позицию разделителя, отсчитанную с обратной стороны компонента.

  • Если атрибут locked установлен в true, то пользователи не смогут изменить положение разделителя.

  • Атрибут stylename со значением large увеличивает толщину разделителя.

    split.setStyleName(HaloTheme.SPLITPANEL_LARGE);

Методы SplitPanel:

  • Позицию разделителя можно получить с помощью метода getSplitPosition().

  • События изменения положения разделителя можно отлеживать PositionUpdateListener. Источник события SplitPositionChangeEvent можно отследить с помощью метода isUserOriginated().

  • Если нужно получить единицу измерения позиции разделителя, используйте метод getSplitPositionUnit(). Он возвращает Component.UNITS_PIXELS или Component.UNITS_PERCENTAGE.

  • isSplitPositionReversed() возвращает true в случае, если позиция отсчитывается с обратной стороны компонента.

  • С помощью методов getMinSplitPosition() и getMaxSplitPosition() можно получить текущую минимальную или максимальную позицию разделителя соответственно.

  • С помощью методов getMinSplitPositionSizeUnit() и getMaxSplitPositionSizeUnit() можно получить единицу измерения минимальной или максимальной позиции разделителя соответственно. Возможные единицы измерения: Component.UNITS_PIXELS и Component.UNITS_PERCENTAGE.

Внешний вид компонента SplitPanel можно настроить с помощью переменных SCSS с префиксом $cuba-splitpanel-*. Эти переменные можно изменить в визуальном редакторе после расширения темы или создания новой темы.