formLayout

formLayout располагает поля формы в адаптивных столбцах.

XML-элемент

formLayout

Java-класс

JmixFormLayout

Основы

ДЕМО

Адаптивные шаги по умолчанию используют один столбец при ширине менее 40em и два столбца при ширине 40em и более:

<formLayout>
    <textField label="TextField"/>
    <dateTimePicker label="DateTimePicker"/>
    <textArea label="TextArea"/>
    <checkbox label="Checkbox"/>
    <textArea label="TextArea with column span" colspan="2"/>
    <passwordField label="PasswordField"/>
    <emailField label="EmailField"/>
</formLayout>

Привязка к данным

ДЕМО

Задайте dataContainer у formLayout, чтобы привязать вложенные поля к текущему элементу контейнера экземпляра. Каждое поле выбирает отображаемый атрибут сущности с помощью property.

<data>
    <collection id="customersDc"
                class="io.jmix.uisamples.entity.Customer"
                fetchPlan="_local">
        <loader id="customersLoader">
            <query>
                <![CDATA[select e from Customer e]]>
            </query>
        </loader>
    </collection>
    <instance id="customerDc"
              class="io.jmix.uisamples.entity.Customer"/>
</data>
<facets>
    <dataLoadCoordinator auto="true"/>
</facets>
<layout>
    <select id="customerSelect" label="Customer" itemsContainer="customersDc"
            helperText="Select a customer to display"/>
    <formLayout dataContainer="customerDc">
        <textField property="name"/>
        <textField property="lastName"/>
        <integerField property="age"/>
        <checkbox property="active"/>
        <select property="grade"/>
    </formLayout>
</layout>

Автоматический адаптивный режим

ДЕМО

Установите autoResponsive="true", чтобы formLayout определял количество столбцов по доступной ширине, заданной ширине столбца и интервалам. Каждый formRow начинает новую строку. Если поля не помещаются, они переносятся в дополнительные строки, выделенные этому formRow.

При включении автоматического адаптивного режима адаптивные шаги игнорируются. 
<formLayout id="formLayout" width="100%" classNames="form-layout" autoResponsive="true">
    <formRow>
        <formItem label="msg://firstName.label">
            <textField/>
        </formItem>
        <formItem label="msg://lastName.label">
            <textField/>
        </formItem>
        <formItem label="msg://rating.label">
            <comboBox id="ratingField"/>
        </formItem>
    </formRow>
    <formRow>
        <formItem label="msg://countryName.label">
            <textField/>
        </formItem>
        <formItem label="msg://birthDate.label">
            <datePicker/>
        </formItem>
        <formItem label="msg://email.label">
            <emailField/>
        </formItem>
    </formRow>
    <formRow>
        <formItem label="msg://status.label">
            <comboBox/>
        </formItem>
        <formItem label="msg://phoneNumber.label">
            <textField/>
        </formItem>
        <formItem label="msg://address.label">
            <textField/>
        </formItem>
    </formRow>
</formLayout>

Для автоматического распределения без явных элементов formRow установите autoRows="true". Атрибуты minColumns, maxColumns, columnWidth, columnSpacing, rowSpacing, expandColumns и expandFields уточняют, как созданная сетка использует доступное пространство.

Режим адаптивных шагов

ДЕМО

Используйте вложенные элементы responsiveStep, чтобы задать количество столбцов и положение надписей для разных минимальных значений ширины. Применимый шаг управляет компоновкой.

<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"/>
        <responsiveStep minWidth="60em" columns="4" labelsPosition="TOP"/>
    </responsiveSteps>
    <formItem label="TextField">
        <textField/>
    </formItem>
    <formItem label="DateTimePicker">
        <dateTimePicker/>
    </formItem>
    <formItem label="TextArea">
        <textArea/>
    </formItem>
    <formItem label="Checkbox">
        <checkbox/>
    </formItem>
    <formItem label="TextArea with column span" colspan="2">
        <textArea/>
    </formItem>
    <formItem label="PasswordField">
        <passwordField/>
    </formItem>
    <formItem label="EmailField">
        <emailField/>
    </formItem>
</formLayout>

Атрибуты

В Jmix есть множество общих атрибутов, которые выполняют одну и ту же функцию для всех компонентов. Ниже приведены атрибуты, специфичные для formLayout.

Имя Описание По умолчанию

autoResponsive

Включает автоматический расчет и адаптацию количества столбцов на основе доступной ширины контейнера. Смотрите Автоматический адаптивный режим.

false

autoRows

Настраивает автоматическое распределение полей по столбцам, с последовательным заполнением строк перед переносом на следующую. Работает только при включенном autoResponsive. Смотрите Автоматический адаптивный режим.

false

columnWidth

Задаёт фиксированную ширину всех столбцов. Значение должно быть допустимой CSS-величиной длины, например "100px" или "10em". Атрибут работает только при включённом autoResponsive. См. Автоматический адаптивный режим.

12em

columnSpacing

Задаёт интервал между столбцами как CSS-величину длины.

—

expandColumns

Если включён, равномерно расширяет столбцы, чтобы после исходного расчёта заполнить оставшееся пространство по горизонтали. Атрибут работает только при включённом autoResponsive. См. Автоматический адаптивный режим.

false

expandFields

Если включён, растягивает поля на всю доступную ширину столбца. Это также относится к полям, обёрнутым в элементы formItem. Атрибут работает только при включённом autoResponsive. См. Автоматический адаптивный режим.

false

labelsAside

Определяет, должны ли элементы formItem располагать надписи рядом со связанными полями, а не над ними. Атрибут работает только при включённом autoResponsive. См. Автоматический адаптивный режим.

false (надписи располагаются над полями)

labelSpacing

Задаёт интервал между надписью сбоку и её полем как CSS-величину длины, например 1em.

—

labelsPosition

Задаёт положение надписей для адаптивных шагов по умолчанию и вложенных элементов responsiveStep, в которых не указан labelsPosition.

- ASIDE — сбоку от компонентов.

- TOP — над компонентами.

TOP

labelWidth

Задаёт ширину надписей сбоку как CSS-величину длины, например 8em.

—

maxColumns

Задаёт максимальное количество столбцов, которое может создать контейнер. Фактическое количество не превысит это ограничение, даже если пространства достаточно. Атрибут работает только при включённом autoResponsive. См. Автоматический адаптивный режим.

10

minColumns

Задаёт минимальное количество столбцов, которое создаст контейнер независимо от его ширины. Атрибут работает только при включённом autoResponsive. См. Автоматический адаптивный режим.

1

rowSpacing

Задаёт интервал между строками как CSS-величину длины.

—

Обработчики

Имя Описание

AttachEvent

Срабатывает при присоединении контейнера к UI.

clickListener

Срабатывает при каждом нажатии на контейнер.

singleClickListener

Срабатывает после подтверждения, что нажатие не входит в двойное нажатие.

doubleClickListener

Срабатывает при двойном нажатии на контейнер.

DetachEvent

Срабатывает при отсоединении контейнера от UI.

Элементы

formLayout может содержать поля напрямую или оборачивать их в элементы formItem и formRow. Элемент responsiveSteps содержит элементы responsiveStep, используемые в режиме адаптивных шагов.

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