ArcGIS Experience Builder позволяет настраивать и создавать различные компоновки страниц для веб-среды, чтобы приложения хорошо выглядели на всех размерах экранов. Конфигурация каждой компоновки основана на адаптивном дизайне, что позволяет создавать отдельный дизайн для экранов больших, средних и малых размеров. Каждая компоновка является адаптацией интерфейса, что предполагает большую гибкость при настройке приложений и наилучший способ использования экранов различных размеров для отображения различных ресурсов.
Шаблоны созданы для работы с экранами различных размеров. Когда вы выбираете шаблон пустого полноэкранного приложения или пустой прокручиваемой страницы, в них применяется компоновка Авто, доступная для средних и малых экранов. Это позволяет синхронизировать все виджеты с виджетами в компоновке для больших экранов, а также позволяет автоматически упорядочить их.
Чтобы создать отдельную компоновку для средних или малых экранов, щелкните кнопку Пользовательская рядом с компоновкой страницы или окна. Затем можно вручную упорядочить виджеты и окна, и изменить их размер для устройств с выбранными размерами экранов.
При редактировании компоновок для устройств с маленьким экраном следующие большие панели конфигурации, которые в противном случае отображались бы на канве, вместо этого отображаются на полях компоновщика:
- Панель Быстрый стиль из виджетов Кнопка, Разделитель и Навигация по видам
- Панель Динамическое содержание
- Панель Добавить виджет из виджетов Заполнитель и Сетка
- Панели Выбрать шаблон для страниц, верхних и нижних колонтитулов, окон, блоков и сеток
Подсказка:
Чтобы проверить компоновки на экранах различных размеров, щелкните Просмотр в реальном времени на панели конструктора. Просмотр в реальном времени позволяет убедиться, что ресурсы правильно адаптированы перед их сохранением и публикацией. Вы также можете поэкспериментировать с различными настройками и поработать с интерактивными и динамическими виджетами, чтобы проверить их работу.
Лист ожидания
Чтобы удалить виджет или группу экранов из компоновки для устройства, нажмите на кнопку Переместить в лист ожидания 
на его панели инструментов. Виджет или группа экранов будут удалены из канвы текущего устройства с сохранением конфигурации, на случай если вы вернете его в компоновку. После включения опции пользовательской компоновки, при добавлении виджетов в режимы для других размеров экранов, они не будут добавляться к текущему устройству. Вы можете добавить их вручную из листа ожидания.
Примечание:
Виджеты в листе ожидания сохраняют большую часть своих настроек, в том числе все настройки ресурсов, собственные настройки стиля, например, фон и граница, а также все настройки действий. Виджеты не сохраняют общие настройки компоновки из вкладки Стиль, в частности, настройки размера и положения.
Лист ожидания появляется на вкладке Ожидающие панели Вставить виджет. Виджеты, которые присутствуют в приложении хотя бы в одном режиме устройства, отображаются в списке в разделе Другие используемые устройства. Следующие значки указывают, в каких режимах устройства используется каждый виджет:
— может использоваться на устройствах с большим и средним экраном.
— может использоваться на устройствах с большим и маленьким экраном.
— может использоваться на устройствах со средним и маленьким экраном.
— может использоваться на устройствах с большим экраном.
— может использоваться на устройствах со средним экраном.
— может использоваться на устройствах с маленьким экраном.
Виджеты, которые в данный момент не отображаются в канве ни в одном из режимов устройства, отображаются в разделе Все неиспользуемые устройства. Щелкните Удалить, чтобы удалить эти виджеты из листа ожидания.
Действия с сообщениями и список ожидания
Виджеты, которые вы перемещаете в список ожидающих, не могут быть целями действий с сообщениями.
Когда вы добавляете действия с сообщениями на вкладке Действие в настройках виджета, все виджеты из списка ожидания не отображаются в качестве доступных целей.
Если вы переместите виджет, который уже является целью действия с сообщением, в список ожидания, это действие с сообщением будет отключено только для тех режимов устройств, где он перемещен в список. На вкладке Действие в настройках исходного виджета отображаются значки, показывающие режим устройства, в котором настроено и активно действие.
В быстром режиме вы можете просматривать действия с сообщениями только для текущего режима работы устройства, с которым вы работаете.
Подсказка:
Чтобы узнать больше о настройках мобильной оптимизации Experience Builder, ознакомьтесь с руководством Оптимизация компоновки приложения для мобильных устройств.
Основные рекомендации, касающиеся разработки адаптивных компоновок
При разработке компоновок примите во внимание следующие рекомендации:
- Выберите подходящий тип компоновки.
- Фиксированные компоновки являются подходящими, если вы хотите, чтобы элементы оставались на своих местах, а не перемещались в зависимости от размера ресурсов. Они подходят для дизайна операционных панелей и модальных диалоговых окон.
- Плавающие компоновки позволяют автоматически размещать и смещать ресурсы в зависимости от размера экрана. Они лучше всего подходят для адаптивного содержания с возможностью прокрутки, например длинных страниц с большим количеством текста, изображений и карт.
- Виджеты компоновки, в том числе виджеты Строка, Столбец и Сетка, подходят для сложных структурированных компоновок. Каждый из этих виджетов обеспечивает гибкое размещение и выравнивание виджетов в контейнере.
- Изучите опции настройки размера и положения и применяйте их стратегически.
- Пикселы (px) лучше всего подходят, когда вам нужен точный размер, например, для заголовков, нижних колонтитулов и других элементов, которые должны быть одинакового размера на экранах разных размеров. Это подходящая единица измерения для элементов компоновок для настольных компьютеров и элементов фиксированного размера.
- Проценты (%) лучше всего подходят, когда вы хотите, чтобы высота и ширина адаптировались к родительским контейнерам. Использование процентов обеспечивает гибкость элементов на экранах разных размеров. Это подходящая единица измерения для адаптивных размеров экрана, которые масштабируются на планшетах и телефонах.
- Автоматически позволяет Experience Builder определять размер и положение виджетов в зависимости от их содержимого. Подходит для динамического текста или изображений, когда объем пространства, необходимый для размещения содержимого, может меняться. Используйте значение Автоматически, если вы ожидаете, что размер элемента будет меняться.
- Растяжка заставляет элемент заполнять все пространство контейнера. Подходит для фоновых изображений, карт и любых других ресурсов, которые должны полностью занимать доступное пространство. Будьте осторожны при использовании этой опции с компоновками для маленьких экранов. Большое количество виджетов может привести к плохой их читаемости на маленьких экранах.
- Начните с компоновки для большого экрана, а затем переходите к компоновкам меньшего размера.
- После создания компоновки для большого экрана воспользуйтесь инструментом режима устройства, чтобы просмотреть его на устройствах со средним и маленьким экраном.
- При необходимости используйте опцию Пользовательская компоновка, чтобы изменить компоновку для устройств со средним и маленьким экраном.
- Автоматические компоновки синхронизируют элементы на разных размерах экрана, но могут не справляться со сложными расположениями виджетов.
- Пользовательские компоновки позволяют перемещать, скрывать или изменять размер виджетов, чтобы сделать их более удобными для использования на экранах меньшего размера.
- Сохраните адаптивность компоновки.
- Используйте одинаковые интервалы и выравнивание, чтобы создать визуально целостный образ.
- Применяйте единые стили шрифтов, цвета, а также отступы и пробелы для виджетов во всех компоновках.
- Настройте заголовки и нижние колонтитулы с помощью инструментов Заголовок и Нижний колонтитул в параметрах страницы, чтобы они работали одинаково на всех страницах.
- Просмотрите и протестируйте.
- Используйте инструмент Просмотр в реальном времени для тестирования компоновки в конструкторе.
- Используйте инструмент Предварительный просмотр для предварительного просмотра вашего приложения в окне браузера. Вы можете изменить размер окна браузера, чтобы просмотреть приложение на экранах разных размеров.
- На небольших экранах убедитесь, что элементы не перекрываются и не выходят за пределы экрана, виджеты удобны и читаемы, а прокручиваемые области не блокируют важные элементы навигации или кнопки.