formLayout

ДЕМО

Адаптивный контейнер, который располагает компоненты в колонках. Количество колонок изменяется в зависимости от ширины контейнера.

XML-элемент: formLayout
Java-класс: FormLayout

Основы

По умолчанию компоненты располагаются в две колонки.

<formLayout>
    <textField placeholder="City" label="Where from?"/>
    <textField placeholder="City" label="Where to?"/>
    <datePicker label="Depart"/>
    <datePicker label="Return"/>
    <button text="Search tickets"/>
</formLayout>

При уменьшении ширины контейнера он автоматически перестраивается в одну колонку.

Адаптивные шаги

Элемент responsiveSteps предоставляет способ определения количества колонок на основе доступного пространства.

<formLayout>
    <responsiveSteps>
        <responsiveStep minWidth="0" columns="1"/>
        <responsiveStep minWidth="30em" columns="2"/>
        <responsiveStep minWidth="40em" columns="3"/>
        <responsiveStep minWidth="50em" columns="4"/>
        <responsiveStep minWidth="60em" columns="5"/>
    </responsiveSteps>
    <textField placeholder="City" label="Where from?"/>
    <textField placeholder="City" label="Where to?"/>
    <datePicker label="Depart"/>
    <datePicker label="Return"/>
    <button text="Search tickets"/>
</formLayout>

Когда ширина становится достаточно большой, контейнер автоматически перестраивается на использование всех пяти колонок:

Позиция надписи

Контейнер позволяет использовать боковое расположение надписей для вложенных компонентов. Оберните компонент элементом formItem, указав его надпись, и задайте желаемое положение с помощью атрибута labelsPosition:

formItem может оборачивать только один компонент.

<formLayout labelsPosition="ASIDE">
    <formItem label="Where from?">
        <textField placeholder="City"/>
    </formItem>
    <formItem label="Where to?">
        <textField placeholder="City"/>
    </formItem>
    <formItem label="Depart">
        <datePicker/>
    </formItem>
    <formItem label="Return">
        <datePicker/>
    </formItem>
    <formItem>
        <button text="Search tickets"/>
    </formItem>
</formLayout>

Адаптивное положение надписи

Контейнеры, отображающие надписи сбоку, требуют больше места, чем те, у которых надписи расположены по умолчанию сверху над компонентами. Аналогично количеству колонок, положение надписи можно настроить в соответствии с доступным пространством. Вместо добавления атрибута labelsPosition к контейнеру, добавьте его к отдельным элементам responsiveSteps:

<formLayout>
    <responsiveSteps>
        <responsiveStep minWidth="0" columns="1" labelsPosition="TOP"/>
        <responsiveStep minWidth="30em" columns="1" labelsPosition="ASIDE"/>
        <responsiveStep minWidth="40em" columns="2" labelsPosition="TOP"/>
        <responsiveStep minWidth="50em" columns="2" labelsPosition="ASIDE"/>
    </responsiveSteps>
    <formItem label="Where from?">
        <textField placeholder="City"/>
    </formItem>
    <formItem label="Where to?">
        <textField placeholder="City"/>
    </formItem>
    <formItem label="Depart">
        <datePicker/>
    </formItem>
    <formItem label="Return">
        <datePicker/>
    </formItem>
    <formItem colspan="2">
        <button text="Search tickets"/>
    </formItem>
</formLayout>

Изменение ширины контейнера повлияет как на количество колонок, так и на позиционирование надписей:

Объединение колонок

Используйте атрибут colspan, чтобы контролировать, сколько колонок должен занимать вложенный компонент.

Например, можно сделать так, чтобы кнопка всегда занимала две колонки, даже когда другие компоненты этого не делают:

<formLayout id="abc">
    <textField placeholder="City" label="Where from?"/>
    <textField placeholder="City" label="Where to?"/>
    <datePicker label="Depart"/>
    <datePicker label="Return"/>
    <button text="Search tickets" colspan="2"/>
</formLayout>

Атрибуты

id - alignSelf - classNames - colspan - css - dataContainer - enabled - height - labelsPosition - maxHeight - maxWidth - minHeight - minWidth - visible - width

labelsPosition

Задает положение надписи для компонентов внутри контейнера.

ASIDE — надписи располагаются сбоку от компонентов.
TOP — надписи располагаются над компонентами.

Обработчики

AttachEvent - ClickEvent - DetachEvent

Чтобы сгенерировать заглушку обработчика в Jmix Studio, используйте вкладку Handlers панели инспектора Jmix UI, или команду Generate Handler, доступную на верхней панели контроллера экрана и через меню Code → Generate (Alt+Insert / Cmd+N).

ClickEvent

com.vaadin.flow.component.ClickEvent возникает при клике на компонент. Этот обработчик должен указывать один из следующих трех субъектов для определения количества кликов, связанных с событием.

click – событие возникает при любом клике на компонент.
singleClick – событие возникает после таймаута, чтобы убедиться, что это не двойной клик.
doubleClick – событие возникает при двойном клике на компонент.

Элементы

formItem - responsiveSteps

Смотрите также

Дополнительную информацию смотрите в документации Vaadin.