Layout

Das Layout einer App besteht aus zwei Teilen, die als separate Bundles zu einer App hinzugefügt werden:

  • Ein Layout-Template legt die Größe und Positionierung einzelner GUI-Elemente (Widgets) fest.

  • Ein Farbschema (Theme) definiert die Farben und das Aussehen von GUI-Elementen (Widgets).

Layout-Templates

Das folgenden Bundle steht zur Verfügung:

Bundle-Name Name des Layout-Templates Beschreibung

template-seasons

seasons

Responsives Layout für Desktop-, Tablet- und Mobile-Ansicht.

Widgets anpassen

Für jede Funktion, die eine graphische Benutzeroberfläche (GUI) zur Verfügung stellt, ist eine Standard-Konfiguration im Layout-Template hinterlegt, die die Größe, Position und weitere Eigenschaften zur Darstellung definiert.

Um die Darstellung eines Widgets anzupassen, überschreiben Sie diese Standardwerte durch Angabe der jeweiligen widgetRole wie im folgenden Beispiel:

{
    "templates": {
        "TemplateModel": {
            "_templates": [
                {
                    "name": "seasons",
                    "widgets": [
                        {
                            "widgetRole": "tocWidget",
                            "window": {}
                        }
                    ]
                }
            ]
        }
    }
}

Eine Liste der widgetRoles-Werte der gängigsten Widgets finden Sie in der Liste der Widgets. In den folgenden Abschnitten werden mögliche Anpassungen beschrieben.

Größe und Position

Die Parameter w (width) und h (height) definieren die Größe eines Widgets. Die Parameter l (left), r (right), b (bottom) und t (top) definieren die Position eines Widgets.

Um ein Widget mit definierter Größe an einer bestimmten Position anzuzeigen, setzen Sie die Parameter w, h und sowohl l oder r als auch h oder b wie im folgenden Beispiel. Die Zahlen werden als Anzahl von Pixeln ausgewertet.

{
    "widgetRole": "tocWidget",
    "window": {
        "marginBox": {
            "w": 435,
            "h": 200,
            "t": 125,
            "l": 20
        }
    }
}

Um die Größe des Widgets abhängig von der Höhe oder Breite des Ansichtbereichs zu verändern, setzen Sie die Werte für gegenüberliegende Seiten und keinen Wert für die Breite oder Höhe. Die Konfiguration im folgenden Beispiel definiert eine Breite für die Karteninhaltsteuerung sowie einen Abstand nach oben und unten. Die Höhe in der das Widget dem Nutzer angezeigt wird ist dadurch abhängig von der in der Ansicht zur Verfügung stehenden Höhe.

{
    "widgetRole": "tocWidget",
    "window": {
        "marginBox": {
            "w": 435,
            "t": 125,
            "l": 20,
            "b": 50
        }
    }
}

Um die Werte relativ zur Größe des Ansichtbereichs anzugeben, geben Sie die Werte als String mit Prozentzeichen an, wie im folgenden Beispiel:

{
    "widgetRole": "tocWidget",
    "window": {
        "marginBox": {
            "w": "30%",
            "h": "50%",
            "t": 125,
            "l": 20
        }
    }
}

Wenn keine Werte für die Position gesetzt sind, wird das Widget in der Mitte des Ansichtbereichs angezeigt.

Titel-Leiste ausblenden

Um die Titel-Leiste eines Widgets auszublenden, verwenden Sie die folgende Konfiguration:

{
    "widgetRole": "tocWidget",
    "window": {
        "windowClass":"noTitleBarAndWindowTools"
    }
}

Weitere Optionen

Um die Interaktionsmöglichkeiten bei der Nutzung eines Widgets zu beschränken, verwenden Sie die folgenden Konfigurationsoptionen:

{
    "widgetRole": "tocWidget",
    "window": {
        "resizable": true,
        "maximizable": true,
        "draggable": true,
        "closable": true,
        "modal": true
    }
}
Option Beschreibung

resizable

Definiert, ob das Fenster in der Größe verändert werden kann.

maximizable

Definiert, ob das Fenster maximiert werden kann.

draggable

Definiert, ob das Fenster verschoben werden kann.

closable

Definiert, ob das Fenster geschlossen werden kann.

modal

Definiert, ob das Fenster im geöffneten Zustand den Zugriff auf andere Elemente der App blockiert.

Liste von Widgets

Nutzen Sie die widgetRole aus der folgenden Tabelle, um das jeweilige Widget anzupassen:

Bundle widgetRole Funktion

coordinateconversion

coordinateconversion

Koordinaten anzeigen, transformieren, kopieren und suchen

coordinateviewer

coordinateviewer

Koordinaten und Maßstab anzeigen

editing

editing

Kartenobjekte erstellen oder bearbeiten

legend

legend

Legende anzeigen

measurement-2d

distanceMeasurement2D

Die Strecke zwischen zwei Punkten messen

measurement-2d

areaMeasurement2D

Eine Fläche und ihren Umfang messen

measurement-3d

lineMeasurement3D

Die Strecke zwischen zwei Punkten messen

measurement-3d

areaMeasurement3D

Eine Fläche und ihren Umfang messen

printing

printing

Einen Ausdruck der Karte erstellen

resultcenter

resultCenter

Ergebniscenter öffnen

search-ui

search-ui

Die zentrale Suche

selection-ui

selection-ui

Objekte in der Karte auswählen

share-link

sharelink

App mit parametrisiertem Link teilen

portal-webscene-slides

slideSelector

Slides für eine Webszene auswählen

toc

tocWidget

Karteninhaltsteuerung

Farbschemas

Die folgenden Bundles stehen zur Verfügung:

Bundle-Name Name des Farbschemas Beschreibung

theme-autumn

autumn

Heller Hintergrund, dunkle Schrift, blaue Akzent-Farbe

theme-winter

winter

Heller Hintergrund, dunkle Schrift, schwarze Akzent-Farbe

theme-spring

spring

Heller Hintergrund, dunkle Schrift, grüne Akzent-Farbe

theme-summer

summer

Heller Hintergrund, dunkle Schrift, rote Akzent-Farbe

theme-everlasting

everlasting

Dunkler Hintergrund, helle Schrift

Wechsel zwischen verschiedenen Farbschemas

Um dem Nutzer den Wechsel zwischen verschiedenen Farbschemas zu ermöglichen, aktivieren Sie den ThemeSelector mit der folgenden Konfiguration:

{
    "themes": {
        "ThemeModel": {
            "_selectedTheme": "autumn"
        },
        "ThemeSelector": {
            "componentEnabled": true
        }
    }
}