Организация компоновки веб-приложения с несколькими виджетами
Откройте интерфейс
Вы начнете с открытия интерфейса, созданного в предыдущем учебном пособии.
- Если вы завершили работу с предыдущим учебным пособием, Создание веб-интерфейса с двумя картами, снова откройте интерфейс American River Marine Estuary и перейдите к следующему разделу.
Примечание:
Если вы не знаете, как найти этот интерфейс, откройте ArcGIS Experience Builder и войдите в свою учетную запись ArcGIS. Ваш интерфейс будет на странице Недавние интерфейсы.
- Если вы не завершили предыдущее учебное пособие, откройте ArcGIS Experience Builder и войдите в свою учетную запись ArcGIS.
Примечание:
Если у вас нет учетной записи ArcGIS, см. опции доступа к программному обеспечению.
Появится страница Недавние интерфейсы.
- Щелкните кнопку Создать новый.
- Выберите вкладку ArcGIS Online.
- В поисковой строке введите estuary template 1.
- На карточке American River Marine Estuary Template 1 щелкните кнопку Создать.
Появится канва, показывающая созданный на данный момент интерфейс. Он включает в себя виджет Карта с двумя картами, между которыми можно переключаться, а также верхний колонтитул с заголовком.
- На панели инструментов конструктора щелкните заголовок и переименуйте его в American River Marine Estuary.
Добавление виджетов Легенда и Столбец
Не всем картам нужны легенды. Например, если все, что видно на карте, подписано или иным образом очевидно, легенда является избыточной. Однако для двух карт в этом веб-приложении требуются легенды. Вы добавите их в компоновку с помощью виджета Легенда, чтобы пользователи могли правильно интерпретировать карту. Вы также добавите еще один виджет компоновки, в данном случае Столбец.
- Если панель Вставить виджет не видна, на панели инструментов щелкните кнопку Вставить.
- На панели Вставить виджет из раздела Ориентированный на карту перетащите виджет Легенда на пустую часть виджета Строка.
Новый виджет заполняет все пространство, не оставляя места для дополнительных виджетов. Вам нужно разместить в этом пространстве несколько виджетов вертикально. Для этого сначала необходимо добавить виджет Столбец.
- На панели инструментов щелкните кнопку Отмена.
- На панели Вставить виджет щелкните кнопку Поиск. Введите столбец.
- С панели перетащите виджет Столбец на пустую часть виджета Строка.
Столбцы позволяют организовать контент вертикально.
- На панели Вставить виджет очистите поисковую строку. Перетащите виджет Легенда в столбец.
Виджет Легенда больше не занимает все пространство.
- На панели Легенда для опции Выбрать виджет карты выберите Карта.
Виджет заполняется легендой, соответствующей текущей карте.
- На панели инструментов конструктора щелкните Просмотр в реальном времени, чтобы можно было взаимодействовать с картой и другими виджетами.
- В левом нижнем углу карты щелкните кнопку переключения карты.
Легенда обновится и отобразит легенду для другой карты.
Добавление виджета Закладка
Далее вы добавите интерактивности веб-приложению с помощью виджета Закладка. Этот виджет позволит пользователям приближаться к каждому типу растительного покрова на картах.
- На панели инструментов конструктора отключите Просмотр в реальном времени.
Вы не можете добавлять виджеты, когда находитесь в режиме реального времени.
- На боковой панели инструментов щелкните кнопку Вставка, чтобы снова открыть панель Вставить виджет.
- Выполните поиск по слову закладка. Перетащите виджет Закладка на канву и поместите его в столбец под легендой.
- На панели Закладка для Выбора шаблона в разделе Простой выберите четвертый вариант Slide 1 (наведите курсор на шаблоны, чтобы просмотреть их имена).
- Щелкните Начать.
- Для Выбрать Виджет карты выберите Карта.
Далее у вас есть возможность добавить закладки. Вы можете вручную определить закладки для любой части карты. Однако на обеих ваших картах уже определен набор закладок, поэтому вы будете использовать их.
- Поставьте отметку Отображать закладки с веб-карты.
Виджет Закладка заполняется первой закладкой Seagrass.
Вы измените настройки Расположения, чтобы пользователи могли прокручивать закладки.
- На панели Закладка разверните раздел Расположение.
- Для Стиля страницы выберите Прокрутка. Для Направления выберите Вниз.
На виджете появляются стрелки.
- Для Высоты элемента (px) введите 200.
Далее вы измените цвет фона виджета, чтобы он был белым, как легенда. Согласованность - важный аспект хорошего дизайна компоновки.
- Вверху панели щелкните вкладку Стиль.
- Рядом с Фоном щелкните кнопку Быстрый стиль.
Белый не входит в число опций в меню Быстрого стиля.
- Щелкните Пользовательский.
Дополнительные опции стиля появляются в разделе Фон.
- Щелкните кнопку Цвета заливки. В разделе Стандартные цвета щелкните белый.
Фон виджета Закладка теперь соответствует виджету Легенда.
Далее вы протестируете виджет Закладка.
- Включите Просмотр в реальном времени.
- Прокрутите виджет Закладка и щелкните одну из закладок.
Карта приблизится к местоположению закладки.
- Щелкните кнопку переключения карты, чтобы просмотреть другую карту и перейти к другой закладке.
Обе веб-карты были настроены с одинаковым набором закладок, что позволило виджету работать одинаково для обеих карт. Если бы только одна из карт имела закладки, виджет выглядел бы пустым при выборе другой карты.
Примечание:
О том, как настроить закладки на веб-карте, можно узнать в документации.
Добавление виджета Шторка
В настоящее время пользователи могут переключаться между двумя картами. Однако вам нужно, чтобы они могли просматривать обе карты одновременно, чтобы лучше понять, как каждый тип растительного покрова выглядит на местности. Чтобы сделать это возможным, вы добавите виджет Шторка.
- Отключите Просмотр в реальном времени.
- На боковой панели инструментов нажмите кнопку Вставить. На панели Вставить виджет выполните поиск по слову шторка.
Примечание:
Если вы используете ArcGIS Enterprise, виджет Шторка может быть недоступен. Вы можете перейти к следующему разделу.
- Перетащите виджет Шторка на канву и поместите его в столбец над легендой.
- На панели Шторка щелкните вкладку Содержание. Для опции Выбрать шаблон убедитесь, что выбран Горизонтальный простой.
- Щелкните Начать.
- Для Выбрать Виджет карты выберите Карта.
На канве виджет Шторка содержит кнопку переключения и два разворачиваемых раздела.
Вам нужно, чтобы пользователи могли перемещаться между двумя картами, а не между слоями карты.
- На панели Шторка для Режима шторки выберите Шторка между веб-картами или веб-сценами.
- В разделе Общие настройки для Исходного положения бегунка введите 50.
Бегунок разместится в центре виджета. Теперь вы готовы протестировать виджет Шторка.
- Включите Просмотр в реальном времени. В виджете Шторка щелкните кнопку переключения Спрятать.
- Масштабируйте и перемещайте карту, а также перемещайте бегунок, чтобы протестировать эту функцию.
Две карты движутся синхронно, что позволяет вам исследовать их одновременно. Легенда обновляется, показывая информацию для карты, на которой последний раз щелкали.
- В столбце прокрутите вниз и щелкните одну из закладок.
Обе карты приближаются к месту, отмеченному закладкой. Функция Спрятать позволяет пользователям видеть, как типы растительного покрова постепенно изменяются по ландшафту, а не с помощью жестких границ, предлагаемых только картой Типов растительного покрова.
Отрегулируйте настройки высоты виджета
Далее вы отрегулируете высоту каждого виджета в столбце. Существует три метода определения размера виджета: автоматический, растяжка и пользовательский. Вы будете использовать разные методы для каждого виджета.
- Отключите Просмотр в реальном времени. Щелкните виджет Шторка, чтобы выбрать его.
Примечание:
Если у вас нет виджета Шторка, перейдите к шагу 4.
Виджет Шторка занимает больше места, чем необходимо. Он также показывает больше информации, чем необходимо. Важной частью дизайна компоновки является принятие решения о том, что необходимо включить, а что нет. Удаление всего, что не требует включения, делает компоновку более ясной и понятной для вашей аудитории. Вы уменьшите высоту виджета Шторки, чтобы была видна только кнопка переключения, а названия карт были скрыты.
- На панели Шторка щелкните вкладку Стиль. Рядом с Высотой щелкните кнопку со стрелкой.
Есть три варианта настройки высоты:
- Авто - гарантирует, что виджет будет достаточно высоким, чтобы вместить его содержимое, но не выше необходимого.
- Растяжка - регулирует высоту виджета, чтобы он заполнил доступное пространство внутри контейнера.
- Пользовательский - позволяет определить высоту в пикселах или в процентах от высоты контейнера.
Вам нужно скрыть часть виджета Шторка, сократив его. Единственный вариант регулировки высоты, который позволяет виджету быть короче его содержимого, - это Пользовательский. Этот вариант уже выбран.
Вы можете настроить произвольную высоту, набрав число или перетащив виджет.
- На канве щелкните переключатель внизу виджета и перетащите его вверх, чтобы уменьшить высоту виджета. Перетаскивайте, пока названия карт не будут скрыты и будут видны только слово Шторка и кнопка переключения.
На панели Шторка параметр Высота обновляется примерно до 50 пикселов. Далее вы установите высоту виджета Легенда.
- Щелкните виджет Легенда.
Высота этого виджета должна меняться при переключении пользователя между двумя картами, поскольку одна из легенд выше другой.
- На панели Легенда на вкладке Стиль для Высоты выберите Авто.
Примечание:
Если для Высоты уже установлено значение Авто, убедитесь, что кнопка Cохранение пропорций разблокирована.
Панель Легенда укорачивается и становится достаточно высокой, чтобы отображать всю легенду.
- Щелкните виджет Закладка. На панели Закладка для высоты выберите Растяжка.
Виджет Закладка растягивается, заполняя оставшуюся высоту столбца.
- Включите Просмотр в реальном времени.
- Щелкните или переключитесь между двумя картами и наблюдайте, как изменяются виджеты в столбце.
Виджет Шторка использует Пользовательский метод настройки высоты, поэтому он не меняется: он всегда сохраняет одинаковую высоту. Виджет Легенда использует метод Авто, поэтому его высота меняется в зависимости от высоты активной легенды. Виджет Закладка использует метод Растяжка, поэтому он меняет высоту в зависимости от того, сколько места доступно в столбце.
Просмотр структуры
При разработке компоновки в ArcGIS Experience Builder, часто проверяйте раздел Структура, чтобы понять, как вложены и расположены виджеты. Поскольку вы только что добавили пять виджетов, сейчас самое время просмотреть структуру и убедиться, что ваш интерфейс структурирован так, как вы планировали.
- На панели Страница в разделе Структура убедитесь, что Основа, Строка и Столбец развернуты.
Подсказка:
Если панель Страница не открыта, на боковой панели инструментов щелкните кнопку Страница.
В разделе Структура перечислены все виджеты, присутствующие на странице, и объясняется, как они вложены друг в друга. Эта страница состоит из виджета Строка. Внутри Строки находится виджет Столбец и виджет Карта. Внутри Столбца находятся три виджета: Шторка, Легенда и Закладка.
Вы также можете использовать раздел Структура для выбора виджетов и изменения их свойств.
- В разделе Структура щелкните Строка.
Появится панель Строка.
- На панели Строка щелкните вкладку Содержание.
- Для Пробел и Внутреннего отступа введите 0.
На канве исчезает серый зазор между столбцом и картой. То же самое происходит и с серым полем вокруг всего, кроме верхнего колонтитула.
Дополнительные отступы и пробелы не были необходимы для вашей компоновки. Их удаление упростило дизайн за счет устранения лишнего визуального беспорядка. Если в виджете Строка не осталось видимых пустых частей, вы больше не сможете выбирать строку на канве, но вы все равно можете выбрать ее в разделе Структура.
- На панели инструментов конструктора отключите Просмотр в реальном времени и щелкните кнопку Сохранить.
В этом учебном пособии вы добавили пять виджетов в веб-приложение в ArcGIS Experience Builder. Вы узнали о виджетах компоновки, методах изменения размера и разделе Контур. Попробуйте следующее учебное пособие из этой серии Добавление окна в веб-приложение, чтобы узнать, как добавить окно и кнопку и как связать их вместе.
