Добавление окна в веб-приложение
Открытие интерфейса
Вы начнете с открытия интерфейса, созданного в предыдущем учебном пособии.
- Если вы завершили работу с предыдущим учебным пособием, Организация компоновки веб-приложения с несколькими виджетами, снова откройте интерфейс American River Marine Estuary и перейдите к следующему разделу.
Примечание:
Если вы не знаете, как найти этот интерфейс, откройте ArcGIS Experience Builder и войдите в свою учетную запись ArcGIS. Ваш интерфейс будет на странице Недавние интерфейсы.
- Если вы не завершили предыдущее учебное пособие, откройте ArcGIS Experience Builder и войдите в свою учетную запись ArcGIS.
Примечание:
Если у вас нет учетной записи ArcGIS, см. опции доступа к программному обеспечению.
Появится страница Недавние интерфейсы.
- Щелкните кнопку Создать новый.
- Выберите вкладку ArcGIS Online.
- В поисковой строке введите estuary template 2.
- На карточке American River Marine Estuary Template 2 щелкните кнопку Создать.
Появится канва, показывающая созданный на данный момент интерфейс. Он включает в себя виджет Карта с двумя картами, заголовок с названием и столбец с тремя виджетами: Шторка, Легенда и Закладка.
- На панели инструментов конструктора щелкните заголовок и переименуйте его в American River Marine Estuary.
Добавление окна
У вас есть дополнительная информация, которую можно добавить к вашему интерфейсу: карта-локатор и текст об авторстве данных. Однако вы боитесь перегрузить компоновку слишком большим количеством информации и потенциально отвлечься от карты. В статической компоновке вы можете использовать принципы визуальной иерархии, чтобы гарантировать, что важная информация, такая как карта, будет замечена в первую очередь, а второстепенная информация, такая как текст об авторстве данных, будет замечена последней. В компоновке веб-приложения вы можете дополнительно использовать интерактивность, чтобы контролировать, что будет замечено в первую очередь.
Далее вы добавите в компоновку окно для размещения карты-локатора и текста об авторстве данных. Окно гарантирует, что эта вторичная информация будет доступна и легко читаема, не перегружая карту. Она не будет видна, пока пользователь не решит ее раскрыть.
- На боковой панели инструментов нажмите кнопку Страница.
- Вверху панели Страница щелкните вкладку Окно.
Вы можете добавить в интерфейс несколько страниц и несколько окон. Этот интерфейс будет содержать одну страницу и одно окно.
- Щелкните кнопку Добавить окно. Прокрутите вниз и щелкните Боковую панель.
В правой части канвы появится окно. Остальная часть канвы затемнена, чтобы казалось, будто окно парит сверху.
Добавленное вами окно является шаблоном, то есть оно уже заполнено несколькими виджетами. При работе с шаблоном рекомендуется просмотреть его структуру перед внесением каких-либо изменений, чтобы понять, как структурирована страница или окно.
На панели Страница в разделе Контур показано, что окно содержит изображение, кнопку и столбец.
- В разделе Контур разверните Столбец 2.
Виджет Столбец содержит два текстовых виджета.
- В разделе Контур щелкните Текст 2, чтобы выбрать его.
На канве выбран текст Заголовка.
Вам не нужен заголовок для вашего окна, поэтому вы удалите этот виджет.
- В разделе Контур укажите Текст 2. Щелкните кнопку Дополнительно и щелкните Удалить.
Добавление текста
Вы добавите текст в окно, чтобы указать источники данных карты и фотографий, используемых в виджете Закладка.
- Скопируйте следующий текст:
Американ-Ривер - морская дельта на острове Кенгуру в Южной Австралии. Она является частью морского парка Энкаунтер и включает в себя заповедную зону Пеликановой лагуны, очага биоразнообразия, который охраняется с 1914 года.
Данные, использованные на этой карте, были получены из Estuarine Habitats of South Australia, набора данных, предоставленного Правительством Южной Австралии, Департаментом окружающей среды и водных ресурсов.
Этот сайт был создан "Ваше имя" "Текущая дата" в соответствии с руководством по созданию макета в ArcGIS Experience Builder.
Фото предоставлено:
Seagrass: flickr user Paul Asman and Jill Lenoble - https://www.flickr.com/photos/pauljill/5777808662/
Seagrass/Algal: flickr user Gerry Thomasen - https://www.flickr.com/photos/gerrythomasen/174310588/
Samphire: Wikimedia Commons user Melburnian - https://commons.wikimedia.org/wiki/file:sarcocornia_quinqueflora.jpg
Samphire/Atriplex/Grassland: iNaturalist user Samuel Brown - https://www.inaturalist.org/photos/31331920
Sand: flickr user Phil Whitehouse - https://www.flickr.com/photos/philliecasablanca/2051633887/
Melaleuca/Sedges: Wikimedia Commons user Melburnian - https://commons.wikimedia.org/wiki/file:melaleuca_squarrosa.jpg
Grassland: Wikimedia Commons user Kolforn - https://commons.wikimedia.org/wiki/File:Grassland_countryside,_Vale_da_Azinheira,_25_June_2016.JPG
Bare: Wikimedia Commons user Manage891a3 - https://commons.wikimedia.org/wiki/file:water_surface_lake.jpg
- На канве дважды щелкните оставшийся текстовый виджет, чтобы отредактировать его. Щёлкните правой кнопкой мыши и выберите Вставить как обычный текст.
Подсказка:
Если опция Вставить как обычный текст недоступна, нажмите Ctrl+Shift+V или Cmd+Option+Shift+V.
Текст включает некоторую информацию об лимане и указывает авторство данных и фотографий. Далее вы добавите гиперссылки к частям текста.
- В виджете Текст выделите Encounter Marine Park. На панели Текст 3 щелкните кнопку Ссылка.
- В окне Задать ссылку для опции Ссылка на, выберите URL. Для URL вставьте https://www.parks.sa.gov.au/parks/encounter-marine-park.
- Нажмите OK.
- Во втором абзаце выделите Estuarine Habitats of South Australia. Следуйте тому же методу, что и выше, чтобы связать этот текст с https://data.sa.gov.au/data/dataset/estuarine-habitats-of-south-australia.
- Отредактируйте текст, включив в него свое имя и текущую дату.
- На панели инструментов конструктора щелкните Сохранить.
Добавление изображения
Далее вы добавите в окно изображение карты локатора.
- Щелкните виджет Изображение. В панели Изображение щелкните Выбрать изображение.
- На панели Выбрать изображение щелкните вкладку URL и вставьте https://www.arcgis.com/sharing/rest/content/items/11b62ea3ef81427dbf6315563f17c810/data.
- Щелкните за пределами текстового поля, чтобы зафиксировать изменение. Закройте панель Выбрать изображение.
Изображение представляет собой карту локатора реки Американ в контексте остальной части Австралии. Она была создана с помощью ArcGIS Pro и сохранена как изображение PNG.
Надписи на ней неразборчивы, поскольку карта слишком мала. Вы сделаете окно шире, чтобы карта могла разворачиваться.
- На панели Страница щелкните Окно, чтобы выбрать его.
Подсказка:
В качестве альтернативы на канве щелкните зазор между изображением и текстом.
Появляется панель Окно.
- В разделе Размер и положение для W введите 340 и нажмите Enter.
Окно становится шире. Вы также сделаете виджет Изображение выше.
- Щелкните виджет Изображение. Перетаскивайте его нижний край, пока не станет видна вся карта.
Теперь изображение и текст накладываются друг на друга, что затрудняет их чтение. Вы переместите текст вниз, чтобы он не мешал изображению.
- Щелкните виджет Текст, чтобы выбрать его.
На виджете Текст нет переключателей: у вас нет возможности переместить его вниз и в сторону от изображения.
Иногда вы не можете вручную изменить размер или положение виджета, поскольку для его размера установлено значение Авто или Растяжка. Однако в данном случае виджет Текст имеет нестандартный размер высоты, поэтому причина не в этом.
Подсказка:
Чтобы убедиться, что виджет имеет произвольный размер высоты, на панели его свойств щелкните вкладку Стиль. Убедитесь, что для параметра Высота установлено число, а не Авто или Растяжка.
Если вы не можете изменить размер или положение виджета, даже если он использует метод размера Пользовательский, проверьте раздел Контур, чтобы узнать, содержится ли виджет внутри другого виджета.
- В панели Страница просмотрите раздел Контур.
В этом случае текст содержится в столбце. Столбец определяет некоторые аспекты размера и положения текста. В этом случае вы можете переместить виджет Текст, переместив виджет Столбец, который его содержит.
- В разделе Контур щелкните Столбец 2.
- На канве виджета появляются элементы управления для перетаскивания. Перетащите верхний элемент управления вниз, пока он не окажется под картой локатора.
Настройка темы
Гиперссылки в виджете Текст имеют синий цвет. Этот цвет взят из темы интерфейса. Далее вы отредактируете тему, чтобы цвет ссылки соответствовал цветам на карте локатора.
- На боковой панели инструментов нажмите кнопку Тема.
- В нижней части панели Тема щелкните Настроить.
- Над Основным щелкните синюю кнопку редактирования.
- Для HEX введите #27a3ad и нажмите Enter.
Основной цвет обновится до того же бирюзового цвета, который используется на карте локатора. Это также один из основных цветов в карте Cover type. Текст гиперссылок и кнопки виджета Закладка меняют цвет с синего на бирюзовый.
Добавление кнопки и привязка ее к окну
Далее вам нужно добавить пользователям возможность открывать окно. Вы добавите кнопку в заголовок и свяжете ее с окном.
- На боковой панели инструментов нажмите кнопку Страница. Вверху панели Страница щелкните вкладку Страница.
Окно исчезает. Теперь вы можете продолжить редактирование страницы, а не окна.
- В канве наведите курсор на заголовок и щелкните Редактировать заголовок.
- На боковой панели инструментов нажмите кнопку Вставить. На панели Вставить виджет щелкните кнопку Поиск и введите кнопка.
- Перетащите виджет Кнопка на канву. Поместите его в правую часть заголовка.
Не волнуйтесь, если кнопка расположена не так, как вы хотите. Позже вы наведете порядок в ее размере и положении.
- На панели Кнопка 2для Текста сотрите существующий текст и введите Подробнее об этой карте. Нажмите Enter.
Текст на кнопке обновляется. Далее вы подключите кнопку к окну.
- На панели Кнопка 2 щелкните Задать ссылку.
- На панели Задать ссылку для Ссылка на выберите Окно.
В этом интерфейсе есть только одно окно, поэтому вам не нужно использовать Выбрать окно.
- Нажмите OK.
Наконец, вы протестируете кнопку и окно.
- На панели инструментов конструктора щелкните Просмотр в реальном времени.
- Щелкните кнопку Подробнее об этой карте.
Откроется окно.
- В верхней части окна щелкните кнопку Закрыть.
Окно закроется.
- На панели инструментов конструктора отключите Просмотр в реальном времени и щелкните кнопку Сохранить.
В этом учебном пособии вы добавили окно и кнопку в веб-приложение в ArcGIS Experience Builder. Вы узнали, как редактировать текст, добавлять изображения, привязывать кнопку к окну и менять цвет темы. Попробуйте следующий урок из этой серии Изменение размера виджетов для небольших экранов, чтобы узнать, как настраивать компоновки для экранов разных размеров.
