Создание интерфейса

Для создания удобного и структурированного интерфейса AppMaster Web Designer предоставляет большую бибилиотеку атомарных элементов пользовательского интерфейса. Эти компоненты можно комбинировать и группировать различными способами в соответствии с вашими задачами и целями.

AppMaster предлагает следующие компоненты пользовательского интерфейса:

• Контейнеры: базовые элементы для структурирования и логической группировки других элементов.
• Модальные окна и плавающие панели: интерактивные компоненты для отображения дополнительной информации или действий, не покидая текущего экрана.
• Компоненты динамического вывода значений: компоненты для динамического представления данных (Списки, Сетки и Таблицы).
• Базовые UI-элементы: такие как кнопки, текст и иконки, необходимые для базового взаимодействия с интерфейсом и вывода информации.
• Навигация: вертикальное и горизонтальное меню, табы и аналогичные средства навигации.
• Элементы формы: различные поля ввода и элементы управления для взаимодействия с пользователем и сбора данных.

AppMaster регулярно пополняет библиотеку компонентов, чтобы повысить эффективность и скорость разработки веб-приложений.

Давайте создадим пользовательский интерфейс для нашего простого приложения-калькулятора, чтобы продемонстрировать возможности конструктора сайтов AppMaster, работающего по принципу drag-and-drop. Это приложение будет отображать результат различных математических операций на основе введенных значений. Создайте новое приложение и перейдите на главную страницу.

Flex Container

С помощью Flex Container вы можете легко управлять поведением всех дочерних элементов в контейнере.

Flex Container (гибкий контейнер) - это базовый компонент для построения структуры вашей веб-страницы. Flex Container в конструкторе веб-приложений AppMaster позволяет гибко располагать дочерние элементы (виджеты или контейнеры). Он поддерживает горизонтальное и вертикальное размещение компонентов, позволяя разработчикам создавать сложные макеты, адаптирующиеся к различным размерам экрана.

Добавление Flex Container

Для нашего интерфейса нам необходимо два основных контейнера: один для ввода данных, а другой для отображения результатов вычислений, обернутых в один общий контейнер.

Сначала добавьте на холст родительский Flex Container для размещения всех остальных элементов.

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

• Element Key: уникальный идентификатор элемента, используется в бизнес-процессах для обращения к элементу.
• Common: настройки для определения первоначального состояния компонента, например, видимость и стиль курсора.
• Flex Child: настройки, которые определяют, как элемент ведет себя внутри родительского flex-компонента.
• Layout: настройки для управления дочерними элементами внутри контейнера.
• Sizes: управление размерами элемента.
• Spacing: настройка внутренних и внешних отступов.
• Baсkground: настройка фонового цвета и дополнительных слоев заливки.
• Corner Radius, Borders, Shadow: настройка скруглений, границ и эффектов тени.
• Tooltip: добавляет всплывающую подсказку при наведении на элемент или фокусировке.

Настройте свой основной контейнер. Установим Direction как горизонтальное и настроим Gap (расстояние между дочерними элементами), Padding (внутренние отступы), Corner Radius (скругления) и Boders (рамки).

Затем добавьте еще один Flex container внутри основного, чтобы разместить в нем форму ввода значений. Установим свойство Size в группе Flex Child на Fill Available Space, чтобы он заполял все свободное пространство в родительском контейнере.

Продублируйте этот контейнер (с помощью CTRL/⌘+D), чтобы создать еще один блок для отображения результатов. Установите для свойства Width (ширина) значение 30%.

Добавление UI Elements

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

Добавление элементов формы

Наш бизнес-процесс требует от пользователя ввода двух чисел, оба из которых имеют тип Float. Чтобы сделать это возможным, добавьте два элемента Input Float и кнопку (Button) для запуска процесса вычисления.

Изменить свойство Direction левого Flex Container на Vertical и установите свойство Gap, чтобы между дочерними элементами было небольшое пространство. Перетащите внутрь этого контейнера элемент Input Float для первого значения, которое мы обозначим как 'X':

• Перетащите элемент Input Float в левый контейнер.
• На Панели внешнего вида персонализируйте поле, добавив лейбл и плейсхолдер.
• Настройте внешний вид поля в соответствии с дизайном вашего приложения.

Выберите добавленное поле на холсте и продублируйте его с помощью CTRL/⌘+D. Измените лейбл и плейсхолдер скопированного поля так, чтобы они представляли второе значение, 'Y'.

Теперь перетащите элемент Button ниже добавленных полей. На панели Внешний вид настройте кнопку так, чтобы она занимала всю ширину. Этого можно добиться, установив для свойства Align в группе Flex Child значение Stretch.

Введите текст кнопки и, по желанию, добавьте иконку, чтобы повысить ее визуальную привлекательность.

После добавления этих элементов рекомендуется переименовать их для простоты идентификации. Это облегчит поиск нужного элемента при необходимости обращения к ниму во время создания бизнес-процесса, а также ускорит процесс разработки и навигации между компонентами в дереве.

Добавление блока результатов

В правой части родительского контейнера мы настроим блок для отображения результатов выполнения нашего бизнес-процесса. Сначала установите свойство Direction для этого контейнера на Vertical и добавьте небольшой Gap, чтобы элементы располагались аккуратно. Измените свойство Width на 30 %.

Внутри этого контейнера вставьте новый контейнер Flex с Direction: Horizontal и добавьте в него элемент Icon, со знаком математической операции, результат которой мы видим, Text Block с символом равенства и Text Block, в котором будет отображаться результат операции. Продублируйте этот контейнер четыре раза, обновляя каждый раз Icon для определенных математических операций.

Настройте каждый элемент по своему усмотрению с помощью Панели внешнего вида.

Добавление блока с подсказкой

Чтобы повысить удобство использования интерфейса, мы сделаем заглушку, которая будет отображаться до получения результатов. Для этого добавим дополнительный Flex Container, такой же ширины, как и контейнер с результатами (30%), и поместим внутрь Text Block с подсказкой.

Скрытие элемент

Особенностью контейнера с результатами является его начальный статус видимости. По умолчанию отключите переключатель Visible, что cделает контейнер невидимым при запуске приложения.

 

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

---

🎉 Отличная работа! Мы создали пользовательский интерфейс для нашего приложения и готовы добавить интерактивность к нашим элементам.