Ein Web-App-Layout mit mehreren Widgets gestalten
Die Experience öffnen
Öffnen Sie zunächst die Experience, die im vorherigen Lernprogramm erstellt wurde.
- Wenn Sie das vorherige Lernprogramm Eine Web Experience mit zwei Karten erstellen 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 1 ein.
- Klicken Sie auf der Kachel American River Marine Estuary Template 1 auf die Schaltfläche Erstellen.
Die Zeichenfläche wird mit der bisher erstellten Experience angezeigt. Sie enthält ein Karten-Widget mit zwei Karten, zwischen denen Sie wechseln können, und eine Kopfzeile mit einem Titel.
- Klicken Sie auf der Werkzeugleiste des Builders auf den Titel, und geben Sie als neuen Titel den Text American River Marine Estuary ein.
Eine Legende und ein Spalten-Widget hinzufügen
Nicht alle Karten benötigen Legenden. Wenn zum Beispiel alles, was auf der Karte sichtbar ist, beschriftet oder von Natur aus offensichtlich ist, dann ist eine Legende überflüssig. Die zwei Karten in dieser Web-App benötigen jedoch Legenden. Sie können sie mit einem Legenden-Widget zum Layout hinzufügen, damit die Benutzer die Karte richtig interpretieren können. Sie werden auch ein weiteres Layout-Widget hinzufügen, in diesem Fall eine Spalte.
- Wenn der Bereich Widget einfügen nicht sichtbar ist, dann klicken Sie auf der Werkzeugleiste auf die Schaltfläche Einfügen.
- Ziehen Sie ein Widget des Typs Legende aus dem Abschnitt Kartenbasiert des Bereichs Widget einfügen auf den leeren Teil des Zeilen-Widgets.
Da das neue Widget die gesamte Fläche ausfüllt, ist kein Platz mehr für weitere Widgets vorhanden. Sie hatten gehofft, in diesem Bereich mehrere Widgets übereinander stapeln zu können. Dazu müssen Sie zuerst ein Spalten-Widget hinzufügen.
- Klicken Sie auf der Werkzeugleiste auf die Schaltfläche Rückgängig.
- Klicken Sie im Bereich Widget einfügen auf die Schaltfläche Suchen. Geben Sie column ein.
- Ziehen Sie das Widget Spalte aus dem Bereich auf den leeren Teil des Zeilen-Widgets.
Mit Spalten können Sie Inhalte vertikal organisieren.
- Löschen Sie im Bereich Widget einfügen den Inhalt der Suchleiste. Ziehen Sie das Widget Legende auf die Spalte.
Das Widget "Legende" nimmt nicht mehr die gesamte Fläche ein.
- Wählen Sie im Bereich Legende für Karten-Widget auswählen die Option Karte aus.
Das Widget wird mit der Legende gefüllt, die der aktuellen Karte entspricht.
- Klicken Sie auf der Werkzeugleiste des Builders auf Live-Ansicht, damit Sie mit der Karte und anderen Widgets interagieren können.
- Klicken Sie in der unteren linken Ecke der Karte auf die Schaltfläche zum Wechseln der Karte.
Die Legende wird aktualisiert und zeigt danach die Legende für die andere Karte.
Ein Lesezeichen-Widget hinzufügen
Als Nächstes erhöhen Sie die Interaktivität der Web-App, indem Sie ein Lesezeichen-Widget hinzufügen. Dieses Widget ermöglicht den Benutzern das Zoomen auf jeden Landbedeckungstyp auf den Karten.
- Deaktivieren Sie auf der Werkzeugleiste des Builders die Option Live-Ansicht.
In der Live-Ansicht können Sie keine Widgets hinzufügen.
- Klicken Sie auf der Werkzeugleiste im Seitenbereich auf die Schaltfläche Einfügen, um den Bereich Widget einfügen erneut zu öffnen.
- Suchen Sie nach bookmark. Ziehen Sie das Widget Lesezeichen auf die Zeichenfläche, und legen Sie es in der Spalte unterhalb der Legende ab.
- Wählen Sie im Bereich Lesezeichen für Vorlage auswählen unter Einfach die vierte Option Folie 1 aus (zeigen Sie auf die Vorlagen, um deren Namen anzuzeigen).
- Klicken Sie auf Start.
- Wählen Sie unter Karten-Widget auswählen die Option Karte aus.
Als Nächstes können Sie Lesezeichen hinzufügen. Sie können manuell Lesezeichen für jeden Teil der Karte definieren. Da aber bereits Lesezeichen für Ihre beiden Karten definiert sind, können Sie diese verwenden.
- Aktivieren Sie das Kontrollkästchen Lesezeichen der Webkarte anzeigen.
Das Widget "Lesezeichen" wird mit dem ersten Lesezeichen Seagrass gefüllt.
Sie sollten die Einstellungen für die Anordnung ändern, damit die Benutzer durch die Lesezeichen blättern können.
- Blenden Sie im Bereich Lesezeichen den Abschnitt Anordnung ein.
- Wählen Sie für Seiten-Style die Option Bildlauf aus. Wählen Sie für Richtung die Option Nach unten aus.
Auf dem Widget werden Pfeile angezeigt.
- Geben Sie für Elementhöhe (px) den Wert 200 ein.
Als Nächstes sollten Sie die Hintergrundfarbe des Widgets so ändern, dass es genauso weiß ist wie die Legende. Die Konsistenz ist ein wichtiger Aspekt eines guten Layout-Designs.
- Klicken Sie oben im Bereich auf die Registerkarte Style.
- Klicken Sie neben Hintergrund auf die Schaltfläche Schnellformat.
Weiß ist als Option im Menü Schnellformat nicht vorhanden.
- Klicken Sie auf Benutzerdefiniert.
Im Abschnitt Hintergrund werden weitere Style-Optionen angezeigt.
- Klicken Sie auf die Schaltfläche Füllfarbe. Klicken Sie unter Standardfarben auf das weiße Kästchen.
Der Hintergrund des Widgets "Lesezeichen" stimmt jetzt mit dem Widget "Legende" überein.
Als Nächstes sollten Sie das Widget "Lesezeichen" testen.
- Aktivieren Sie die Live-Ansicht.
- Führen Sie einen Bildlauf durch das Widget "Lesezeichen" durch, und klicken Sie auf eines der Lesezeichen.
Die Karte wird auf die Position des Lesezeichens gezoomt.
- Klicken Sie auf die Schaltfläche zum Wechseln der Karte, um die andere Karte anzuzeigen und auf ein anderes Lesezeichen zu zoomen.
Da beide Webkarten mit denselben Lesezeichen konfiguriert wurden, ist die Funktionsweise des Widgets bei den beiden Karten identisch. Wenn bei nur einer der Karten Lesezeichen vorhanden wären, dann wäre dieses Widget leer, wenn die andere Karte ausgewählt werden würde.
Hinweis:
Weitere Informationen zum Konfigurieren von Lesezeichen in einer Webkarte finden Sie in der Dokumentation.
Ein Vergleichs-Widget hinzufügen
Aktuell können die Benutzer zwischen den zwei Karten hin und her wechseln. Sie möchten aber, dass die Benutzer in der Lage sein sollen, beide Karten gleichzeitig anzuzeigen, damit sie eine bessere Vorstellung davon bekommen, wie die einzelnen Landbedeckungstypen auf dem Boden aussehen. Um dies zu ermöglichen, können Sie ein Widget des Typs "Vergleichen" hinzufügen.
- Deaktivieren Sie die Live-Ansicht.
- Klicken Sie auf der Werkzeugleiste im Seitenbereich auf die Schaltfläche Einfügen. Suchen Sie im Bereich Widget einfügen nach swipe.
Hinweis:
Wenn Sie ArcGIS Enterprise verwenden, ist das Widget "Vergleichen" möglicherweise nicht verfügbar. Sie können mit dem nächsten Abschnitt fortfahren.
- Ziehen Sie das Widget Vergleichen auf die Zeichenfläche, und legen Sie es in der Spalte oberhalb der Legende ab.
- Klicken Sie im Bereich Vergleichen auf die Registerkarte Inhalt. Stellen Sie unter Vorlage auswählen sicher, dass die Vorlage Horizontal (einfach) ausgewählt ist.
- Klicken Sie auf Start.
- Wählen Sie unter Karten-Widget auswählen die Option Karte aus.
Auf der Zeichenfläche wird das Widget "Vergleichen" mit einer Umschaltfläche und zwei erweiterbaren Abschnitten gefüllt.
Sie möchten aber, dass die Benutzer in der Lage sein sollen, anstatt zwischen Karten-Layern zwischen den zwei Karten zu vergleichen.
- Wählen Sie im Bereich Vergleichen als Vergleichsmodus den Modus Webkarten oder Webszenen vergleichen aus.
- Geben Sie unter Allgemeine Einstellungen als Ausgangsposition des Schiebereglers den Wert 50 ein.
Damit wird der Schieberegler in der Mitte des Widgets positioniert. Jetzt können Sie das Widget "Vergleichen" testen.
- Aktivieren Sie die Live-Ansicht. Klicken Sie auf dem Widget "Vergleichen" auf die Umschaltfläche Vergleichen.
- Zoomen und schwenken Sie die Karte, und verschieben Sie den Vergleichsbalken, um die Funktion zu testen.
Da sich die zwei Karten synchron bewegen, können Sie beide Karten gleichzeitig erkunden. Die Legende wird immer so aktualisiert, dass angezeigt wird, auf welche Karte zuletzt geklickt wurde.
- Führen Sie in der Spalte einen Bildlauf nach unten durch, und klicken Sie auf eines der Lesezeichen.
Beide Karten zoomen auf die als Lesezeichen gespeicherte Position. Dank der Vergleichsfunktion können die Benutzer besser erkennen, wie sich die Typen der Landbedeckung mit der Landschaft allmählich verändern. Allein mit den harten Grenzen, die auf der Karte Cover type vorgeschlagen werden, wäre dies nicht so einfach.
Widget-Höheneinstellungen anpassen
Als Nächstes sollten Sie die Höhe der einzelnen Widgets in der Spalte anpassen. Zum Bestimmen der Größe eines Widgets gibt es drei Methoden: "Auto", "Streckung" und "Benutzerdefiniert". Sie sollten für jedes Widget eine andere Methode verwenden.
- Deaktivieren Sie die Live-Ansicht. Klicken Sie auf das Widget "Vergleichen", um es auszuwählen.
Hinweis:
Wenn kein Widget "Vergleichen" vorhanden ist, dann fahren Sie mit Schritt 4 fort.
Das Widget "Vergleichen" nimmt mehr Fläche ein, als notwendig ist. Es zeigt auch mehr Informationen, als notwendig sind. Ein wichtiger Teil beim Layout-Design ist die Entscheidung, was enthalten sein muss und was nicht. Wenn auf alles Unnötige verzichtet wird, ist Ihr Layout klarer und für Ihre Zielgruppe besser verständlich. Sie sollten die Höhe des Widgets "Vergleichen" so verringern, dass nur die Umschaltfläche sichtbar ist und die Kartennamen nicht mehr sichtbar sind.
- Klicken Sie im Bereich Vergleichen auf die Registerkarte Style. Klicken Sie auf die Pfeilschaltfläche neben Höhe.
Es sind drei Höhenoptionen verfügbar:
- Mit Auto wird sichergestellt, dass das Widget für die Anzeige des Inhalts hoch genug, aber nicht zu hoch ist.
- Mit Streckung wird die Höhe des Widgets so angepasst, dass es die gesamte verfügbare Fläche in seinem Container ausfüllt.
- Mit Benutzerdefiniert können Sie eine Höhe in Pixel oder als Prozentsatz der Höhe des Containers definieren.
Sie möchten einen Teil des Widgets "Vergleichen" ausblenden, indem Sie es verkürzen. Die einzige Höhenoption, bei der ein Widget kürzer sein kann als sein Inhalt, ist Benutzerdefiniert. Diese Option ist bereits ausgewählt.
Benutzerdefinierte Höhen können Sie entweder durch Eingeben einer Zahl oder durch Ziehen des Widgets anpassen.
- Klicken Sie auf der Zeichenfläche auf den Ziehpunkt am unteren Rand des Widgets, und ziehen Sie ihn nach oben, um die Höhe des Widgets zu verkürzen. Ziehen Sie so weit, bis die Kartennamen nicht mehr sichtbar sind, sondern nur noch das Wort Vergleichen und die Umschaltfläche sichtbar sind.
Im Bereich Vergleichen wird der Parameter Höhe auf etwa 50 Pixel aktualisiert. Als Nächstes sollten Sie die Höhe des Widgets "Legende" festlegen.
- Klicken Sie auf das Widget "Legende".
Die Höhe dieses Widgets muss geändert werden, da die Legenden der zwei Karten, zwischen denen der Benutzer hin und her wechselt, unterschiedlich hoch sind.
- Wählen Sie im Bereich Legende auf der Registerkarte Style für Höhe die Option Auto aus.
Hinweis:
Wenn Höhe bereits auf Auto festgelegt ist, dann stellen Sie sicher, dass die Schaltfläche Seitenverhältnis beibehalten deaktiviert ist.
Der Bereich Legende wird so weit verkürzt, dass er für die Anzeige der gesamten Legende gerade hoch genug ist.
- Klicken Sie auf das Widget "Lesezeichen". Wählen Sie im Bereich Lesezeichen für Höhe die Option Streckung aus.
Das Widget "Lesezeichen" wird auf die verbleibende Höhe der Spalte gestreckt.
- Aktivieren Sie die Live-Ansicht.
- Schauen Sie sich an, wie sich beim Klicken auf die jeweils andere Karte bzw. beim Wechseln zwischen diesen zwei Karten die Widgets in der Spalte verändern.
Da für das Widget "Vergleichen" die Höhenmethode Benutzerdefiniert festgelegt ist, verändert es sich nicht, sondern hat immer dieselbe Höhe. Da für das Widget "Legende" die Methode Auto festgelegt ist, verändert sich seine Höhe entsprechend der Höhe der aktiven Legende. Da für das Widget "Lesezeichen" die Methode Streckung festgelegt ist, verändert sich seine Höhe entsprechend der verfügbaren Fläche in der Spalte.
Den Umriss überprüfen
Beim Entwerfen eines Layouts in ArcGIS Experience Builder sollten Sie immer wieder den Abschnitt Umriss überprüfen, um zu verstehen, wie die Widgets angeordnet und geschachtelt werden. Nachdem Sie bisher fünf Widgets hinzugefügt haben, ist jetzt ein guter Zeitpunkt, um den Umriss zu überprüfen und sicherzustellen, dass Ihre Experience die gewünschte Struktur hat.
- Stellen Sie im Bereich Seite im Abschnitt Umriss sicher, dass Text, Zeile und Spalte eingeblendet sind.
Tipp:
Wenn der Bereich Seite nicht geöffnet ist, dann klicken Sie auf der Werkzeugleiste im Seitenbereich auf die Schaltfläche Seite.
Der Abschnitt Umriss enthält eine Liste aller Widgets, die in dieser Seite vorhanden sind, und zeigt, wie sie ineinander geschachtelt sind. Diese Seite besteht aus einem Widget des Typs Zeile. In dieser Zeile befinden sich ein Widget des Typs Spalte und ein Widget des Typs Karte. In der Spalte befinden sich drei Widgets: Vergleichen, Legende und Lesezeichen.
Den Abschnitt Umriss können Sie auch zum Auswählen von Widgets und Ändern ihrer Eigenschaften verwenden.
- Klicken Sie im Abschnitt Umriss auf Zeile.
Der Bereich Zeile wird geöffnet.
- Klicken Sie im Bereich Zeile auf die Registerkarte Inhalt.
- Geben Sie für Abstand und Innenabstand den Wert 0 ein.
Die graue Lücke zwischen der Spalte und der Karte auf der Zeichenfläche verschwindet. Dasselbe geschieht mit dem grauen Rand um alles außer der Kopfzeile herum.
Der Abstand und der Innenabstand, die zusätzlich festgelegt waren, waren für Ihr Layout nicht notwendig. Nachdem diese überflüssigen Elemente entfernt wurden, hat sich das Design vereinfacht. Wenn keine Teile des Widgets "Zeile" mehr sichtbar sind, dann können Sie die Zeile auf der Zeichenfläche auch nicht mehr auswählen. Im Abschnitt Umriss ist dies jedoch noch möglich.
- 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 fünf Widgets zu einer Web-App hinzugefügt. Sie haben etwas über Layout-Widgets, über Methoden der Größenanpassung und über den Abschnitt Umriss erfahren. Testen Sie auch das nächste Lernprogramm in dieser Reihe. In diesem Lernprogramm mit dem Titel Ein Fenster zu einer Web-App hinzufügen erfahren Sie, wie Sie ein Fenster und eine Schaltfläche hinzufügen und über einen Link miteinander verbinden können.
