Позиционирование компонентов - Платформа CUBA. Руководство по разработке приложений

Виды размеров

Размеры компонента, т.е. его ширина и высота, могут быть заданы следующих видов:

По содержимому - AUTO
Фиксированные (в пикселах) - 10px
Относительные (в процентах) - 100%

Размер по содержимому

Компонент займет столько места, сколько нужно его содержимому.

Примеры:

Компонент Label выбирает такой размер по размеру текста.
Контейнеры выбирают размер по сумме размеров всех расположенных в контейнере компонентов.

XML

<label width=”AUTO”/>

Java

label.setWidth(Component.AUTO_SIZE);

Компоненты с размером по содержимому будут подстраивать размер во время компоновки экрана и при изменении размера содержимого.

Фиксированный размер

Фиксированные размеры не предполагают изменения размера компонента во время исполнения.

XML

<vbox width=”320px” height=”240px”/>

Java

vbox.setWidth(”320px”);

Относительные размеры

Относительные размеры указывают, какой процент доступного компоненту места будет использован.

XML

<label width=”100%”/>

Java

label.setWidth(”50%”);

Компонент с относительными размерами будет реагировать на изменение доступного места и изменять свой реальный размер на экране.

Особенности контейнеров

По умолчанию контейнеры без установленного атрибута expand выделяют для всех вложенных компонентов одинаковое количество места. Исключения: flowBox и htmlBox.

Пример контейнера с одинаковой высотой компонентов по умолчанию:

<layout>
    <button caption="Button"/>
    <button caption="Button"/>
</layout>

Компоненты и контейнеры при создании имеют высоту и ширину по содержимому. Некоторые контейнеры имеют другие значения высоты и ширины по умолчанию:

Контейнер	Ширина	Высота
VBox	100%	AUTO
GroupBox	100%	AUTO
FlowBox	100%	AUTO

Контейнер

Ширина

Высота

VBox

100%

AUTO

GroupBox

100%

AUTO

FlowBox

100%

AUTO

Корневой элемент компоновки layout является вертикальным контейнером (VBox) и имеет 100% ширину и высоту 100%. В режиме диалога высота корневого элемента может быть AUTO.

Вкладка компонента TabSheet (tab) является контейнером VBox.

Компонент GroupBox содержит VBox или HBox в зависимости от значения свойства orientation.

Пример контейнера с высотой по содержимому:

<layout>
    <vbox>
        <button caption="Button"/>
        <button caption="Button"/>
    </vbox>
</layout>

Пример контейнера с относительными размерами компонентов:

<layout spacing="true">
    <groupBox caption="GroupBox" height="100%">
    </groupBox>
    <button caption="Button"/>
</layout>

Здесь layout, так же как vbox или hbox, выделяет равные части всем вложенным компонентам, а для groupBox указана высота 100%. Кроме того, groupBox имеет 100% ширину по умолчанию, поэтому он занимает все доступное ему пространство.

Особенности компонентов: Для Table и Tree рекомендуется задавать абсолютную или относительную высоту, иначе таблица/дерево может неограниченно вырасти при большом количестве строк/узлов.

Контейнер ScrollBox должен обязательно иметь заданные высоту и ширину (не AUTO). Внутри ScrollBox нельзя использовать 100% размеры в направлении, для которого необходима полоса прокрутки.

Ниже приведены примеры правильного использования ScrollBox с вертикальной и горизонтальной прокруткой. Если требуются обе полосы прокрутки, компоненты должны иметь и ширину, и высоту (AUTO или абсолютные значения).

Опция expand

Атрибут expand контейнера позволяет указать, какому из компонентов предоставить максимальное доступное место.

Компоненту, указанному в expand, будет выставлен размер 100% в направлении роста контейнера (VBox — по вертикали, HBox — по горизонтали). При изменении размера контейнера изменять размер будет именно этот компонент.

<vbox expand=”bigBox”>
    <vbox id=”bigBox”>
    </vbox>
    <label value=”Label”/>
</vbox>

expand работает по направлению роста контейнера, например:

<layout spacing="true" expand="groupBox">
    <groupBox id="groupBox"
            caption="GroupBox" width="200px">
    </groupBox>
    <button caption="Button"/>
</layout>

В следующем примере используется вспомогательный элемент Label - spacer. Для него применяется expand, поэтому он занимает всё оставшееся в контейнере место.

<layout expand="spacer">
    <textField caption="Number"/>
    <dateField caption="Date"/>
    <label id="spacer"/>
    <hbox spacing="true">
        <button caption="OK"/>
        <button caption="Cancel"/>
    </hbox>
</layout>

4.3.1.1. Позиционирование компонентов