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
In der Standard-Auslieferung von map.apps gibt es ein Template-Bundle (template-seasons).
Dieses stellt das Layout-Template seasons zur Verfügung (responsives Layout für Desktop-, Tablet- und mobile Ansichten).
Um ein eigenes Template-Bundle zu erstellen, lesen Sie Provide template as a bundle.
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 Ansichtsbereichs 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 Ansichtsbereichs 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 Ansichtsbereichs 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 (Themes)
Die folgenden Theme-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 |
Standardmäßig wird das Farbschema everlasting verwendet.
Um ein anderes Farbschema in einer App zu verwenden, setzen Sie folgende Konfiguration:
{
"themes": {
"ThemeModel": {
"_selectedTheme": "autumn"
}
}
}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
}
}
}Individuelle Style-Anpassungen in einer App (app.css)
Um in einer App individuelle Anpassungen des Layouts vorzunehmen, kann eine CSS-Datei zur App hinzugefügt werden.
Ergänzen Sie dazu die Konfiguration für styles in der App-Konfiguration im Abschnitt load wie in folgendem Beispiel:
{
"load": {
"allowedBundles": [
"map-init",
"notifier",
"splashscreen",
"system",
"templatelayout",
"template-seasons",
"theme-autumn",
"..."
],
"styles": [
"${app}:app.css"
]
}
}Erstellen Sie eine neue Datei app.css und legen diese neben die Datei app.json.
In dieser Datei können Sie nun CSS-Anweisungen ergänzen, um individuelle Style-Anpassungen vorzunehmen.
Beachten Sie, dass sich diese Anpassungen nur auf die konkrete App beziehen. Bei Anpassungen, die in mehreren Apps einheitlich erscheinen sollen, empfiehlt sich die Erstellung eines eigenen Themes. Lesen Sie hierzu Creation of a custom theme.