Brief: дизайн форм

Контейнеры

Дизайн формы описывает, как форма выглядит в интерактивном представлении. Это иерархия контейнеров и базовых компонентов, которые платформа создает по структуре формы: таблица / дерево (GRID), системный тулбар (TOOLBARSYSTEM), пользовательский фильтр (FILTERS), расчеты по колонкам (CALCULATIONS), группа фильтров (FILTERGROUP), панель свойства (PROPERTY).

Иерархию меняет инструкция DESIGN: NEW создает контейнер, MOVE переносит компонент, REMOVE убирает его, имя компонента с блоком редактирует его, propertyName = value задает свойство. Компонент выбирается по имени или конструкциями PROPERTY(...), GRID(...), BOX(...), PANEL(...), TOOLBARBOX, GROUP(...), PARENT(...); позиция вставки — FIRST, LAST, BEFORE, AFTER.

Раскладку потомков задают опции контейнера horizontal, tabbed, lines (вместе с grid), внешний вид — caption, image (иконки), border, collapsible (из кода такой контейнер сворачивают действия EXPAND и COLLAPSE), popup, showIf и custom — React-компонент или HTML-шаблон, только веб-клиент.

DESIGN order {
    NEW header FIRST {
        horizontal = TRUE;
        MOVE PROPERTY(date(o));
        MOVE PROPERTY(number(o)) { charWidth = 5; }
    }
    MOVE BOX(d) { fill = 1; }
    REMOVE TOOLBARLEFT;
}

Размеры и выравнивание

Компоненту задается базовый размер в пикселях (size, width, height). Дальше вдоль основного направления контейнера свободное место делится между потомками пропорционально коэффициенту расширения flex (опция fill задает его вместе с выравниванием), а поперек работает выравнивание align — START, CENTER, END, STRETCH. Аналогия: CSS Flexible Box Layout, где flex — это flex-grow, а базовый размер — flex-basis; в веб-клиенте раскладка через него и реализована.

У свойства отдельно от всего компонента задается размер ячейки значения: valueWidth и valueHeight в пикселях, charWidth и charHeight в символах. Он же определяет ширину колонки, когда свойство показано в таблице. Опция autoSize подгоняет базовый размер под содержимое и применяется только к текстовым компонентам.

Дизайн по умолчанию

Платформа строит дизайн по умолчанию по структуре формы — BOX формы, а внутри него готовый контейнер для каждой группы объектов и дерева и для их таблиц, тулбаров и панелей, — и DESIGN правит именно его; ключевое слово CUSTOM в заголовке инструкции строит дизайн с нуля.

В какой контейнер попадет компонент свойства, определяют его вид на форме (GRID, PANEL, TOOLBAR, POPUP) и группа отображения — а когда ее нет, это PANEL или TOOLBARBOX верхнего уровня, — поэтому дизайн обычно сводится к переносу готовых контейнеров, а не к созданию компонентов.