3.5.2.3.1. Позиционирование компонентов
Виды размеров

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

  • По содержимому - AUTO

  • Фиксированные (в пикселах) - 10px

  • Относительные (в процентах) - 100%

screen layout rules 1 ru
Размер по содержимому

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

Примеры:

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

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

XML 
<label width=”AUTO”/>
Java 
label.setWidth(Component.AUTO_SIZE);

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

screen layout rules 2 ru
Фиксированный размер

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

XML 
<vbox width=”320px” height=”240px”/>
Java 
vbox.setWidth(”320px”);
screen layout rules 3
Относительные размеры

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

XML 
<label width=”100%”/>
Java 
label.setWidth(”50%”);

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

screen layout rules 4 ru
Особенности контейнеров

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

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

<layout>
    <button caption="Button"/>
    <button caption="Button"/>
</layout>
screen layout rules 7

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

Контейнер Ширина Высота

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>
screen layout rules 8

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

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

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

Особенности компонентов

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

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

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

screen layout rules 5 ru
Опция expand

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

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

<vbox expand="bigBox">
    <vbox id="bigBox"/>
    <label value="Label"/>
</vbox>
screen layout rules 6

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

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

В следующем примере используется вспомогательный элемент 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>
screen layout rules 11