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 |
|---|---|---|
|
|
Responsives Layout für Desktop-, Tablet- und Mobile-Ansicht. |
Widgets anpassen
Für jede Funktion, die eine graphische Bedienoberflä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": {
"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 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 |
|---|---|
|
Definiert, ob das Fenster in der Größe verändert werden kann. |
|
Definiert, ob das Fenster maximiert werden kann. |
|
Definiert, ob das Fenster verschoben werden kann. |
|
Definiert, ob das Fenster geschlossen werden kann. |
|
Definiert, ob das Fenster im geöffneten Zustand den Zugriff auf andere Elemente der App blockiert. |
Weitere Hinweise zum Fenster-System finden Sie auf der Seite Window system.
Liste von Widgets
Nutzen Sie die widgetRole aus der folgenden Tabelle, um das jeweilige Widget anzupassen:
| Bundle | widgetRole | Funktion |
|---|---|---|
|
|
Koordinaten anzeigen, transformieren, kopieren und suchen |
|
|
Koordinaten und Maßstab anzeigen |
|
|
Kartenobjekte erstellen oder bearbeiten |
|
|
Legende anzeigen |
|
|
Die Strecke zwischen zwei Punkten messen |
|
|
Eine Fläche und ihren Umfang messen |
|
|
Die Strecke zwischen zwei Punkten messen |
|
|
Eine Fläche und ihren Umfang messen |
|
|
Einen Ausdruck der Karte erstellen |
|
|
Result Center öffnen |
|
|
Die zentrale Suche |
|
|
Objekte in der Karte auswählen |
|
|
App mit parametrisiertem Link teilen |
|
|
Slides für eine Webszene auswählen |
|
|
Karteninhaltsteuerung |
Farbschemas
Die folgenden Bundles stehen zur Verfügung:
| Bundle-Name | Name des Farbschemas | Beschreibung |
|---|---|---|
|
|
Heller Hintergrund, dunkle Schrift, blaue Akzent-Farbe |
|
|
Heller Hintergrund, dunkle Schrift, schwarze Akzent-Farbe |
|
|
Heller Hintergrund, dunkle Schrift, grüne Akzent-Farbe |
|
|
Heller Hintergrund, dunkle Schrift, rote Akzent-Farbe |
|
|
Dunkler Hintergrund, helle Schrift |
Wechsel zwischen verschiedenen Farbschemas
Um den Wechsel zwischen verschiedenen Farbschemas während der Nutzung einer App zu ermöglichen, aktivieren Sie den ThemeSelector mit der folgenden Konfiguration:
{
"themes": {
"ThemeModel": {
"_selectedTheme": "autumn"
},
"ThemeSelector": {
"componentEnabled": true
}
}
}