Создание приложений

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

Шаблоны страниц

Ранее мы познакомились с концепцией шаблонов страниц. Чтобы приступить к созданию шаблона, вы должны сначала продумать структуру приложения и определить типы страниц, которые будут использоваться.

Если вы что-то упустили, не волнуйтесь, вы можете дополнять список шаблонов по мере необходимости.

Список шаблонов страниц

В списоке шаблонов отображаются все шаблоны вашего веб-приложения, котроыми вы можете управлять. Чтобы открыть Список шаблонов, выберите 4-ю вкладку на левой панели инструментов во вкладке UI Designer или воспользуйтесь горячей клавишей 4. 

Каждое приложение должно иметь хотя бы один шаблон. При создании нового приложения автоматически создается один или несколько шаблонов в зависимости от его типа. Один из них применяется по умолчанию.

Вы можете выполнять следующие действия с шаблонами:

• перейти к редактированию,
• создать новый,
• переименовать,
• дублировать,
• удалить.

Шаблон по умолчанию

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

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

Шаблон по умолчанию отмечен синей звездочкой в списке.

Создание шаблона страницы

Вы можете создавать различные шаблоны для разных типов страниц. Чтобы создать новый шаблон, выполните следующие действия:

• Нажмите CTRL/⌘+L или откройте Список шаблонов (сочетание клавиш 4) на левой панели инструментов UI Designer и нажмите кнопку Плюс.
• Укажите Название шаблона в появившемся модальном окне. Мы рекомендуем использовать читаемое название, отражающее структуру шаблона, для быстрой идентификации при назначении шаблонов страницам.
• Выберите тип шаблона:
  • Базовый: пустой шаблон без дополнительных элементов, хорошо подходит для страниц без навигации, таких как страницы авторизации или ошибок.
  • Сайдбар слева: шаблон с боковым меню, хорошо подходит для админ-панелей, CMS, ERP, SaaS и других веб-приложений и платформ.
  • Верхнее меню: шаблон с верхним меню, хорошо подходит для полноценных сайтов или лэндингов.
• Включите параметр Default Layout (Шаблон по умолчанию), если этот шаблон должен быть использован по умолчанию при создании страниц.
• Нажмите кнопку Создать.

Количество шаблонов, которые вы можете создать, неограничено.

Переименование шаблона

Для переименовая дважды щелкните на названии шаблона, внесите необходимые изменения и нажмите Enter для сохранения или Esc для отмены изменений.

Дублирование шаблона

Для дублирования шаблона вместе с его содержимым и настройками:

1. Наведите курсор на шаблон, который вы хотите продублировать.
2. Нажмите на кнопку дублирования.

Копии шаблонов автоматически появляются в списке с индексом, добавленным к их названиям.

Если вы дублируете шаблон, установленный по умолчанию, исходный шаблон не будет переопреден вновь созданным.

Удаление шаблона

Чтобы удалить шаблон:

1. Наведите курсор на шаблон, который нужно удалить.
2. Нажмите на значок корзины.
3. Подтвердите удаление.

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

Чтобы удалить шаблон по умолчанию, перед удаление необходимо его переопределить.

❗️ Важно: отменить операцию удаления шаблона нельзя.

Настройки

Выберите шаблон в списке, чтобы перейти к его настройкам на правой боковой панели настроек.

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

Здесь же можно установить текущий шаблон как дефолтный и просмотреть все связанные с ним страницы. Чтобы перейти к связанной странице, выберите ее в списке.

Кроме того, вы можете построить бизнес-логику для шаблона.

Бизнес-логика

На вкладке бизнес-логики выберите триггер для установки действия. Откроется редактор бизнес-процессов, сфокусированный на выбранном триггере.

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

🔔 Для оптимальной производительности приложения создавайте сложные бизнес-процессы на стороне бэкенда.

Редактирование

Изменения, внесенные в шаблон страницы, автоматически применяют ко всем связанным страницам.

Чтобы отредактировать шаблон, выберите его в списке и с помощью перетаскивания добавьте все необходимые UI-элементы на область холста.

При редактировании шаблона помните, что он включает в себя неизменяемый компонент Page Container. Он определяет область размещения содержимого страницы в шаблоне. Контейнер страницы выделен зеленым цветом и не может содержать внутренние компоненты в режиме редактирования шаблона. Содержимое определяется непосредственно на странице, а размер контейнера страницы определяется его родительским компонентом.

Страницы

После создания необходимых шаблонов самое время приступить к созданию страниц веб-приложения. Каждая страница веб-приложения предоставляет содержимое, отображаемое в веб-браузере пользователя по целевому URL.

Дерево страниц

Дерево страниц показывает структуру вашего веб-приложения - страницы и папки, в которых находятся эти страницы.

Чтобы открыть дерево страниц, выберите 3-ю вкладку на левой панели инструментов UI Designer или нажмите клавишу 3. Здесь будут отображены все страницы вашего приложения.

Каждое приложение должно иметь хотя бы одну страницу. При создании нового приложения одна или несколько страниц уже созданы в зависимости от выбранного шаблона приложения.

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

• выбрать и перейти к редактированию,
• добавить новую страницу или папку,
• переименовать,
• переместить страницы и папки в/из папки,
• дублировать,
• удалить.

Главная страница

Index Pаge (главная страница) - это стартовая страница вашего приложения. При запуске приложения эта страница будет отображаться первой, если вы не выполняете каких-либо редиректов на уровне бизнес-логики.

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

Создать новую страницу

Чтобы добавить страницу в веб-приложение:

1. Нажмите CTRL/⌘+P или откройте Дерево страниц (горячая клавиша 3) на левой панели инструментов UI Designer и нажмите кнопку Плюс в верхней части панели.
2. Укажите URL страницы в появившемся модальном окне (путь по которому ваша страница будет доступна).
3. Выберите Родительскую папку для страницы или оставьте поле пустым, чтобы поместить страницу в корень.
4. Выберите Шаблон страницы.
5. Нажмите кнопку Создать.

💡 Чтобы построить вложенный маршрут без создания папок, укажите полный путь к целевой странице в поле Page URL, например, settings/profile. В этом случае страница Profile будет создана вложенной в папку Setting.

Вы можете создавать неограниченное количество страниц и папок для своего веб-приложения.

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

Создать новую папку

Вы можете создавать папки, чтобы упорядочить навигацию и создать нужный маршрут до страниц. Чтобы создать новую папку:

• Нажмите CTRL/⌘+SHIFT+P или откройте Дерево страниц (горячая клавиша 3) на левой панели инструментов UI Designer и нажмите на иконку Папки в верхней части панели.
• Укажите Имя папки в появившемся модальном окне.
• Выберите Родительскую папку, если это необходимо для создания вложенного маршрутизатора.
• Нажмите кнопку Создать.

UI-элементы

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

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

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

Чтобы добавить элемент на холст:

1. Откройте панель UI Elements Panel со списком элементов пользовательского интерфейса (горячая клавиша 1).
2. Выберите нужный элемент или воспользуйтесь строкой поиска.
3. Перетащите выбранный элемент на рабочую область.

Чтобы поместить перетаскиваемый элемент внутрь какого-либо объекта, наведите его над целевыми элементом.

Чтобы добавить элемент перед или после элемента, перетащите элемент на границу цели, пока не появится разделитель.

Разделитель зависит от направления родительского контейнера:

• Если для родительского контейнера задано вертикальное направление (Direction), элементы будут добавляться сверху или снизу.
• Если для родительского контейнера задано горизонтальное направление (Direction), элементы будут добавляться слева или справа.

Настройка UI-элементов

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

Чтобы настроить элемент:

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

Все изменения отображаются в режиме реального времени.

Чтобы прочитать короткое описание того или иного свойства, наведите на него курсор мыши и немного подержите до момента открытитя всплывающией подсказки.

Помимо прямого редактирования свойств AppMaster расширяет возможности настройки внешнего вида за счет специальных блоков бизнес-процессов, Set Properties и Set Data. Эти блоки обеспечивают расширенный уровень доступа, позволяя программно изменять настройки и внешний вид каждого UI-элемента в вашем веб-приложении.