Ein Fenster zu einer Web-App hinzufügen
Die Experience öffnen
Öffnen Sie zunächst die Experience, die im vorherigen Lernprogramm erstellt wurde.
- Wenn Sie das vorherige Lernprogramm Ein Web-App-Layout mit mehreren Widgets gestalten bereits abgeschlossen haben, dann öffnen Sie Ihre Experience American River Marine Estuary erneut, und fahren Sie direkt mit dem nächsten Abschnitt fort.
Hinweis:
Wenn Sie nicht wissen, wie Sie die Experience finden können, dann öffnen Sie ArcGIS Experience Builder, und melden Sie sich mit Ihrem ArcGIS-Konto an. Ihre Experience wird auf der Seite Zuletzt verwendete Experiences aufgelistet.
- Wenn Sie das vorherige Lernprogramm nicht abgeschlossen haben, dann öffnen Sie ArcGIS Experience Builder, und melden Sie sich mit Ihrem ArcGIS-Konto an.
Hinweis:
Wenn Sie nicht über ein ArcGIS-Konto verfügen, informieren Sie sich über die Optionen für den Zugriff auf die Software.
Die Seite Zuletzt verwendete Experiences wird angezeigt.
- Klicken Sie auf die Schaltfläche Neue erstellen.
- Klicken Sie auf die Registerkarte ArcGIS Online.
- Geben Sie in der Suchleiste den Text estuary template 2 ein.
- Klicken Sie auf der Kachel American River Marine Estuary Template 2 auf die Schaltfläche Erstellen.
Die Zeichenfläche wird mit der bisher erstellten Experience angezeigt. Sie enthält ein Karten-Widget mit zwei Karten, eine Kopfzeile mit einem Titel und eine Spalte mit den drei Widgets "Vergleichen", "Legende" und "Lesezeichen".
- Klicken Sie auf der Werkzeugleiste des Builders auf den Titel, und geben Sie als neuen Titel den Text American River Marine Estuary ein.
Ein Fenster hinzufügen
Sie haben weitere Informationen, die Sie Ihrer Experience hinzufügen können: Eine Locator-Karte und Quellennachweistext. Allerdings befürchten Sie, dass zu viele Informationen das Layout überfrachten und von der Karte ablenken könnten. In einem statischen Layout können Sie die visuelle Hierarchie verwenden, um sicherzustellen, dass wichtige Informationen (wie die Karte selbst) zuerst, sekundäre Informationen (wie Quellennachweistext) dagegen zuletzt auffallen. In einem Web-App-Layout können Sie zusätzlich Interaktivität einsetzen, um zu steuern, was zuerst beachtet wird.
Als Nächstes fügen Sie dem Layout ein Fenster hinzu, in dem die Locator-Karte und Quellennachweistext enthalten sind. Mit diesem Fenster wird sichergestellt, dass diese sekundären Informationen verfügbar und einfach zu lesen sind, ohne die Karte zu überfrachten. Ob es angezeigt wird, kann der Benutzer selbst entscheiden.
- Klicken Sie auf der Werkzeugleiste im Seitenbereich auf die Schaltfläche Seite.
- Klicken Sie oben im Bereich Seite auf die Registerkarte Fenster.
Sie können einer Experience auch mehrere Seiten und mehrere Fenster hinzufügen. Diese Experience wird jeweils eines dieser Objekte enthalten.
- Klicken Sie auf die Schaltfläche Fenster hinzufügen. Führen Sie einen Bildlauf nach unten durch, und klicken Sie auf Seitenleiste.
Auf der rechten Seite der Zeichenfläche wird ein Fenster angezeigt. Der Rest der Zeichenfläche wird abgedunkelt, damit es so aussieht, als wäre das Fenster oben unverankert.
Da das Fenster, das Sie hinzugefügt haben, eine Vorlage ist, sind in ihm bereits einige Widgets enthalten. Wenn Sie mit einer Vorlage arbeiten, sollten Sie immer zuerst ihren Umriss überprüfen, bevor Sie Änderungen vornehmen, um die genaue Struktur der Seite bzw. des Fensters zu verstehen.
Wie im Bereich Seite im Abschnitt Umriss zu sehen ist, sind in diesem Fenster ein Bild, eine Schaltfläche und eine Spalte enthalten.
- Erweitern Sie im Abschnitt Umriss die Option Spalte 2.
Das Widget "Spalte" enthält zwei Text-Widgets.
- Klicken Sie im Abschnitt Umriss auf Text 2, um diesen Text auszuwählen.
Auf der Zeichenfläche ist der Text Titel ausgewählt.
Da Sie keinen Titel für Ihr Fenster benötigen, sollten Sie dieses Widget löschen.
- Zeigen Sie mit der Maus im Abschnitt Umriss auf Text 2. Klicken Sie auf die Schaltfläche Mehr und dann auf Löschen.
Hinzufügen von Text
Fügen Sie dem Fenster den Text hinzu, der zur Angabe der Quellen für die Kartendaten und die Fotos, die im Widget "Lesezeichen" verwendet werden, dienen soll.
- Kopieren Sie den folgenden Text:
American River is a marine estuary on Kangaroo Island in South Australia. It is part of Encounter Marine Park and includes Pelican Lagoon Sanctuary Zone, a biodiversity hotspot which has been protected since 1914.
The data used in this map was derived from Estuarine Habitats of South Australia, a dataset provided by the Government of South Australia, Department for Environment and Water.
This site was created by Your Name on Current Date, following the tutorial Design a layout in ArcGIS Experience Builder.
Photo credits:
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
- Doppelklicken Sie auf der Zeichenfläche auf das verbliebene Text-Widget, um es zu bearbeiten. Klicken Sie mit der rechten Maustaste, und wählen Sie Als einfachen Text einfügen aus.
Tipp:
Wenn die Option Als einfachen Text einfügen nicht verfügbar ist, dann drücken Sie die Tastenkombination Strg+Umschalt+V bzw. Cmd+Option+Umschalt+V.
Der Text enthält einige Informationen über das Mündungsgebiet und die Quellennachweise für die Daten und die Fotos. Als Nächstes fügen Sie Teilen des Textes Hyperlinks hinzu.
- Markieren Sie im Widget "Text" den Text Encounter Marine Park. Klicken Sie im Bereich Text 3 auf die Schaltfläche Link.
- Wählen Sie im Fenster Link festlegen unter Link zu die Option URL aus. Fügen Sie als URL den Text https://www.parks.sa.gov.au/parks/encounter-marine-park ein.
- Klicken Sie auf OK.
- Markieren Sie im zweiten Absatz den Text Estuarine Habitats of South Australia. Verwenden Sie die oben beschriebene Methode, um einen Link von diesem Text zu https://data.sa.gov.au/data/dataset/estuarine-habitats-of-south-australia zu erstellen.
- Bearbeiten Sie den Text, um Ihren Namen und das aktuelle Datum hinzuzufügen.
- Klicken Sie auf der Werkzeugleiste des Builders auf Speichern.
Hinzufügen eines Bildes
Als Nächstes fügen Sie dem Fenster ein Bild einer Locator-Karte hinzu.
- Klicken Sie auf das Widget "Bild". Klicken Sie im Bereich Bild auf Bild auswählen.
- Klicken Sie im Bereich Bild auswählen auf die Registerkarte URL, und fügen Sie den Text https://www.arcgis.com/sharing/rest/content/items/11b62ea3ef81427dbf6315563f17c810/data ein.
- Klicken Sie auf eine Stelle außerhalb des Textfeldes, um die Änderung zu übernehmen. Schließen Sie den Bereich Bild auswählen.
Das Bild ist eine Locator-Karte von American River im Kontext zum Rest von Australien. Es wurde mit ArcGIS Pro erstellt und als PNG-Bild gespeichert.
Die Beschriftungen sind nicht lesbar, da die Karte zu klein ist. Sie sollten das Fenster verbreitern, damit die Karte größer dargestellt werden kann.
- Klicken Sie im Bereich Seite auf Fenster, um es auszuwählen.
Tipp:
Sie können aber auch auf der Zeichenfläche auf die Lücke zwischen dem Bild und dem Text klicken.
Der Bereich Fenster wird angezeigt.
- Geben Sie im Abschnitt Position und Größe für W den Wert 340 ein, und drücken Sie die Eingabetaste.
Das Fenster wird breiter. Sie sollten das Widget "Bild" auch höher machen.
- Klicken Sie auf das Widget "Bild". Ziehen Sie die untere Kante, bis die gesamte Karte sichtbar ist.
Jetzt überlappen sich das Bild und der Text gegenseitig und sind deshalb schlecht lesbar. Sie sollten den Text nach unten verschieben, damit er das Bild nicht mehr überlappt.
- Klicken Sie auf das Widget "Text", um es auszuwählen.
Am Widget "Text" gibt es keine Ziehpunkte: Sie haben also nicht die Möglichkeit, es weg vom Bild nach unten zu verschieben.
Manchmal können Sie die Größe oder Position eines Widgets nicht manuell ändern, da die Größe auf Auto oder Streckung festgelegt ist. Da jedoch in diesem Fall für die Größe des Widgets "Text" eine benutzerdefinierte Höhe festgelegt ist, ist dies nicht die Ursache.
Tipp:
Um zu überprüfen, ob für die Größe eines Widgets eine benutzerdefinierte Höhe festgelegt ist, klicken Sie in dessen Eigenschaftenbereich auf die Registerkarte Style. Vergewissern Sie sich, dass Höhe nicht auf Auto oder Streckung, sondern auf eine Zahl festgelegt ist.
Wenn Sie die Größe oder Position eines Widgets selbst dann nicht ändern können, wenn die Größe Benutzerdefiniert angepasst werden könnte, dann überprüfen Sie im Abschnitt Umriss, ob dieses Widget in einem anderen Widget enthalten ist.
- Überprüfen Sie im Bereich Seite den Abschnitt Umriss.
In diesem Fall ist der Text in einer Spalte enthalten. Diese Spalte bestimmt gewisse Aspekte der Größe und Position des Textes. In diesem Fall können Sie das Widget "Text" verschieben, indem Sie das Widget "Spalte", in dem es enthalten ist, verschieben.
- Klicken Sie im Abschnitt Umriss auf Spalte 2.
- Auf der Zeichenfläche werden Ziehpunkte am Widget angezeigt. Ziehen Sie den oberen Ziehpunkt so weit nach unten, dass er sich unterhalb der Locator-Karte befindet.
Das Design anpassen
Die Hyperlinks im Widget "Text" sind blau. Diese Farbe wurde im Design der Experience festgelegt. Als Nächstes sollten das Design so bearbeiten, dass die Link-Farbe mit den Farben in der Locator-Karte übereinstimmt.
- Klicken Sie auf der Werkzeugleiste im Seitenbereich auf die Schaltfläche Design.
- Klicken Sie unten im Bereich Design auf Anpassen.
- Klicken Sie oberhalb von Primär auf die blaue Schaltfläche "Bearbeiten".
- Geben Sie für HEX den Wert #27a3ad ein, und drücken Sie die Eingabetaste.
Die Primärfarbe wird auf denselben Türkis-Ton aktualisiert, der in der Locator-Karte verwendet wird. Dies ist auch eine der Hauptfarben in der Karte Cover type. Der Hyperlink-Text und die Schaltflächen im Widget "Lesezeichen" werden jetzt nicht mehr in Blau, sondern in Türkis dargestellt.
Eine Schaltfläche hinzufügen und über einen Link mit dem Fenster verbinden
Als Nächstes müssen Sie für die Benutzer eine Möglichkeit schaffen, das Fenster zu öffnen. Sie sollten der Kopfzeile eine Schaltfläche hinzufügen und diese Schaltfläche über einen Link mit dem Fenster verbinden.
- Klicken Sie auf der Werkzeugleiste im Seitenbereich auf die Schaltfläche Seite. Klicken Sie oben im Bereich Seite auf die Registerkarte Seite.
Das Fenster wird ausgeblendet. Jetzt können Sie statt des Fensters die Seite bearbeiten.
- Zeigen Sie auf der Zeichenfläche auf die Kopfzeile und klicken Sie auf Kopfzeile bearbeiten.
- Klicken Sie auf der Werkzeugleiste im Seitenbereich auf die Schaltfläche Einfügen. Klicken Sie im Bereich Widget einfügen auf die Schaltfläche Suchen, und geben Sie button ein.
- Ziehen Sie das Widget Schaltfläche auf die Zeichenfläche. Legen Sie es auf der rechten Seite der Kopfzeile ab.
Es ist kein Problem, wenn sich die Schaltfläche nicht genau an der gewünschten Stelle befindet. Die Größe und die Position korrigieren Sie später.
- Löschen Sie im Bereich Schaltfläche 2 für Text den vorhandenen Text, und geben Sie About this map ein. Drücken Sie die Eingabetaste.
Der Text auf der Schaltfläche wird aktualisiert. Als Nächstes verbinden Sie die Schaltfläche mit dem Fenster.
- Klicken Sie im Bereich Schaltfläche 2 auf Link festlegen.
- Wählen Sie im Bereich Link festlegen unter Link zu die Option Fenster aus.
Da es in dieser Experience nur ein Fenster gibt, müssen Sie keine Auswahl für Fenster auswählen treffen.
- Klicken Sie auf OK.
Abschließend sollten Sie die Schaltfläche und das Fenster testen.
- Klicken Sie auf der Werkzeugleiste des Builders auf Live-Ansicht.
- Klicken Sie auf die Schaltfläche About this map.
Das Fenster wird angezeigt.
- Klicken Sie oben im Fenster auf die Schaltfläche "Schließen".
Das Fenster wird geschlossen.
- Deaktivieren Sie auf der Werkzeugleiste des Builders die Live-Ansicht, und klicken Sie auf die Schaltfläche Speichern.
In diesem Lernprogramm haben Sie in ArcGIS Experience Builder ein Fenster und eine Schaltfläche zu einer Web-App hinzugefügt. Sie haben gelernt, wie Sie Text bearbeiten, ein Bild hinzufügen, eine Schaltfläche über einen Link mit dem Fenster verbinden und eine Designfarbe ändern können. Testen Sie auch das nächste Lernprogramm in dieser Reihe. In diesem Lernprogramm mit dem Titel Die Größe von Widgets an kleinere Bildschirme anpassen erfahren Sie, wie Sie die Layouts für verschiedene Bildschirmgrößen anpassen können.
