Перейти к основному содержимому

Об интерфейсе приложения

Интерфейс приложения включает множество экранных форм. Минимальное количество экранных форм вы определяете на этапе разработки схемы переходов между экранными формами. Кроме того, вы можете создавать фрагменты экранных форм, которые не фигурируют на схеме переходов между экранными формами. Использование фрагментов экранных форм вносит единообразие в интерфейс и ускоряет его разработку.

Каждая экранная форма описывается в файле с расширением mdcontainer. Шаблон проекта содержит папку containers с одним файлом index.mdcontainer. Для упорядочения и группировки файлов проекта рекомендуется создавать файлы с расширением mdcontainer в папке containers или в папках, вложенных в эту папку.

Действия по разработке экранной формы​

Каждая из экранных форм содержит набор поставляемых в составе Платформы Multi-D компонентов — стандартных элементов управления (например, кнопка, поле ввода) и специфических компонентов Платформы Multi-D. Проектирование интерфейса приложения включает выполнение следующих действий:

  • добавление компонентов на каждую из экранных форм;
  • присвоение значений свойствам компонентов;
  • описание обработчиков событий, относящихся к компоненту;
  • написание скриптов, описывающих логику работы экранной формы.
к сведению

Информация о типах компонентов, которые можно добавить на экранную форму, свойствах и обработчиках событий этих компонентов доступна по адресу https://<Multi-D_server_URL>/demo/p/ui-kit или в Справочнике компонентов экранных форм .

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

С файлом описания экранной формы ассоциирован Редактор Форм, который имеет следующие режимы:

  • Визуальный. Позволяет добавлять компоненты путем перетаскивания в рабочую область, как в большинстве графических редакторов. Предназначен в основном для создания недетализированного описания экранной формы. Не требует глубоких знаний программирования.
  • Режим описания в формате JavaScript XML (JSX). Предназначен для детализированного описания компонентов экранной формы.

Структура файла с расширением mdcontainer​

Файл с расширением mdcontainer имеет следующую структуру:

  • На первом уровне расположен элемент Container.

    В качестве атрибутов элемента Container используются следующие:

    • Name: определяет имя экранной формы.
    • ContainerType: определяет тип экранной формы — Page (страница) или PartView (фрагмент страницы).
    • Commands: описывает действия, которые применимы к экранной форме и присутствуют на схеме перехода между экранными формами. Не является обязательным.
    • Scripts: описывает скрипты, реализующие логику работы экранной формы (см. следующий пример).
    <Container Name="MainPage" ContainerType="Page" Commands={[]} Scripts={[
      async () => {
       setState({editableItem: null, currentTab: 1, editableItemBook: null,});
      }
    ]}>

    В скриптах могут использоваться методы FrontendCore DevTools.

    • Meta (только для экранной формы типа фрагмент): определяет параметры именованного набора метаданных, на основании которого сгенерирована экранная форма.

  • На втором уровне расположен только один элемент.

    Созданный по встроенному в DevTools шаблону файл с расширением mdcontainer включает на втором уровне элемент с тегом Group. Следующий пример демонстрирует структуру файла *.mdcontainer, на втором уровне которого расположен тег Dialog:

    <Container
      Name="BooksDialog"
      ContainerType="PartView"
    >
    <Dialog Text={(typeForm = typeForm) => typeForm === "add" ? getLocalization("library.addBook") : 
    getLocalization("library.editAuthor")} ExtraCloseButton={true} Model-var="editableItemBook" Flayouts="Right">
    ...
    ...
    </Dialog>
    </Container>

  • Все компоненты экранной формы описываются тегами, вложенными в тег второго уровня. Кроме тегов с описанием компонентов, код файла с расширением mdcontainer может содержать теги с именами других файлов с расширением mdcontainer. Следующий блок кода демонстрирует использование в коде описания экранной формы тегов с именами других экранных форм — BooksDialog, AuthorsDialog, DeleteDialog:

    <Container Name="MainPage" ContainerType="Page" Commands={[]} Scripts={[
      async () => {
       setState({editableItem: null, currentTab: 1, editableItemBook: null,});
      }
    ]}>
      <Group CSS={["py-16", "px-24", "mb-16"]} Mode="Column">
       ...
       ...  
        <BooksDialog/>
        <AuthorsDialog/>
        <DeleteDialog/>
      </Group>
    </Container>;

Источники данных для компонентов экранной формы​

Для связи данных бэкенд-сервисов и компонентов экранных форм разрабатываемого приложения DevTools использует сущность под названием источник данных. Параметрами источника данных являются действия, которые применимы к компонентам экранной формы и связаны с запросами данных. Такие запросы данных могут быть сформулированы на GraphQL или выполнены бэкенд-сервисами. Действия могут быть определены на этапе разработки схемы перехода между экранными формами или на этапе разработки экранной формы.

Выполнение запроса данных означает получение данных от источника данных или отправку данных в источник данных. Таким образом, источник данных в DevTools имеет два набора параметров: один — для получения данных, другой — для отправки данных. Например, в приложении Электронная Библиотека вы можете отображать на экранной форме список книг с помощью компонента DataGrid, в свойствах которого настроен источник данных. На эту же экранную форму вы можете добавить компонент Button и описать для него обработчик события OnClick(), который отправляет введенные данные в базу данных и использует этот же или другой источник данных.

Различие в отображении компонентов экранной формы для пользовательских ролей​

Если в разрабатываемом приложении предполагается наличие нескольких ролей пользователей, то в коде *.mdcontainer можно ввести различие в отображении компонентов экранной формы для этих ролей. Например, отображение кнопки Добавить может быть доступно для роли администратор и не доступно для роли гость.

Для управления отображением компонентов экранной формы используется свойство Sid компонента. Следующий пример демонстрирует строку кода с указанием свойства Sid для кнопки:

<Button Sid="add" Text="Добавить"></Button>

После указания свойства Sid компонента экранной формы в Редакторе Сущностей Безопасности доступно управление отображением этого компонента.

Изображения на страницах приложения, тема оформления и CSS-стили компонентов​

Файлы изображений, используемых на экранных формах, хранятся в папке static проекта. Файл Static.asset, расположенный в корневой папке проекта, содержит список используемых в проекте изображений с присвоенными им псевдонимами. Такой подход позволяет в коде файла *.mdcontainer использовать псевдонимы изображений вместо имени файла, как показано в следующем примере:

<Icon Name="filter"></Icon>

Тему оформления приложения, например, палитры, шрифты, расстояния между столбцами, определяют в параметрах файла Style.mdtheme системного проекта.

Стиль каждого компонента экранной формы определяется в свойстве CSS. Компоненты экранной формы используют стили, определенные в файле CSS.css системного проекта или в файле CSS.css разрабатываемого проекта. Следующий пример демонстрирует описание пользовательского стиля в файле CSS.css:

.flexAuto {
   flex: 1 0 auto!important;
}

Следующий фрагмент демонстрирует использование пользовательского стиля в коде файла *.mdcontainer:

CSS={["flexAuto"]}

CSS-стиль каждого из компонентов экранной формы можно настроить в Редакторе Форм на панели Свойства.