Client

Der GBD WebSuite Client ist eine Javascript Browser-Anwendung, die dafür konzipiert ist, zusammen mit dem GBD WebSuite Server zu arbeiten.

HTML Vorlage

Um Ihr Projekt in einem Webbrowser anzuzeigen, benötigen Sie eine HTML-Seite, die den Client und einige Projekt Informationen enthalten sollte, damit der Client weiß, welches Projekt geladen werden soll. Auf der Seite muss sich ein div-Element mit dem Klassennamen gws befinden. Hier wird die Client-Benutzeroberfläche geladen. Ansonsten können Sie Ihre Seite frei gestalten.

Der Client selbst besteht aus drei Dateien:

  • gws-light-<VERSION>.css - Style Datei
  • gws-vendor-<VERSION>.js - Javascript Bibliothek
  • gws-client-<VERSION>.js - Javascript Anwendung

Diese Dateien sind im GWS Server unter einer speziellen Adresse /gws-client erreichbar. Sie brauchen diese Adresse in Ihrer Konfiguration nicht explizit einzurichten.

Hier ist ein Vorlage der Client-Seite, die Sie nach Ihren Bedürfnissen anpassen können: ::

<!DOCTYPE html>
    <html>
    <head>
        <!-- Charset muss immer UTF8 sein! -->
        <meta charset="UTF-8"/>

        <!-- Für Mobilgeräte soll die Anwendung nicht skalierbar sein -->
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

        <!-- CSS vom GWS Client -->
        <link rel="stylesheet" href="/gws-client/gws-light-6.1.1.css" type="text/css">

        <!-- "gws" Element kann frei positioniert werden, wir empfehlen "postion:absolute" bzw "fixed" -->
        <style>
            .gws {
                position: fixed;
                left: 10px;
                top: 20px;
                right: 40px;
                bottom: 50px;
            }
        </style>

        <!-- Hier muss die ID von Ihrem Projekt stehen, sowie die Sprache von Client Meldungen -->
        <script>
            GWS_PROJECT_UID = "meinprojekt";
            GWS_LOCALE = "de_DE";
        </script>

    </head>

    <body>
        <!-- In diesem Element wird der Client geladen. -->
        <div class="gws"></div>

        <!-- Javascript vom GWS Client -->
        <script src="/gws-client/gws-vendor-6.1.1.js"></script>
        <script src="/gws-client/gws-client-6.1.1.js"></script>

    </body>
    </html>

Um diese Vorlage für mehrere Projekte zu verwenden, setzen Sie den GWS_PROJECT_UID auf einen dynamischen Wert:

GWS_PROJECT_UID = "{project.uid}";

und speichern Sie die Vorlage als z.B. "project.html" in Ihren assets Ordner. Dann kann diese Seit im Browser wie folgt aufgerufen werden:

http://example.com/_?cmd=assetHttpGetPath&path=project.html&projectUid=meinprojekt

Diese URL kann auch "schöner" gemacht werden, indem Sie diese Rewrite-Regel verwenden: ::

{
    "match": "^/project/([a-z][a-z0-9_]*)",
    "target": "_?cmd=assetHttpGetPath&path=project.html&projectUid=$1"
}

Dann heißt die URL einfach

http://example.com/project/meinprojekt

Für mehr Info siehe Web Server.

UI-Konfiguration

Jedes GBD WebSuite Projekt, wie auch die Hauptanwendung, kann ein client Objekt enthalten, das verschiedene Optionen für den Client und dessen UI-Layout beschreibt, so dass Sie bestimmte UI-Elemente pro Projekt ein- und ausschalten können. Dieses Objekt besteht aus zwei Teilen: options (generelle Optionen) und elements (Auflistung der UI Elemente).

options

Die Optionen sind wie folgt:

OptionTypBedeutungBeispielwert
infobarVisiblebooluntere Leiste ("Infobar") ist sichtbarfalse
sidebarActiveTabstractives Icon in der linken Leiste ("Sidebar")"Sidebar.Layers"
sidebarVisibleboolSidebar ursprünglich sichtbartrue
sidebarSizeintAnzahl von sichtbaren Icons in der Sidebar4
toolbarSizeintAnzahl von sichtbaren Icons in der Toolbar5

elements

Jede Element Konfiguration enthält einen Tag-Namen sowie optional eine Zugriffsberechtigung, sodass die UI Elemente nur für bestimmte Nutzer erscheinen.

Es werden folgende Element-Tags unterstützt:

untere Leiste

TagBedeutung
Infobar.ZoomOutRauszoomen
Infobar.ZoomInReinzoomen
Infobar.ZoomResetZoomstufe zurücksetzen
Infobar.AboutLink "Über uns"
Infobar.HelpLink "Hilfe"
Infobar.HomeLinkLink "Startseite"
Infobar.LoaderLadeanzeige
Infobar.PositionPositionsanzeige
Infobar.RotationRotationsanzeige
Infobar.ScaleMaßstabsanzeige
Infobar.Spacerflexibler Abstandhalter

linke Leiste

TagBedeutung
Sidebar.AlkisFlurstücksuche
Sidebar.AnnotateMarkieren und Messen
Sidebar.BplanBauleitplanung, siehe Bauleitplanung
Sidebar.DimensionBemaßung, siehe Bemaßung
Sidebar.EditDigitalisierung, siehe Digitalisierung
Sidebar.LayersLayerbaum
Sidebar.OverviewProjektübersicht
Sidebar.SearchSuche
Sidebar.SelectAuswahl von Objekten
Sidebar.UserLogin und Logout

Werkzeuge

TagBedeutung
Toolbar.AnnotateMarkieren und Messen
Toolbar.DimensionBemaßung
Toolbar.DproconD-ProCon aufurfen, siehe D-ProCon
Toolbar.GekosGekoS aufrufen, siehe GekoS Integration
Toolbar.Identify.ClickObjekt-Identifizierung mit Klicken
Toolbar.Identify.HoverObjekt-Identifizierung mit Ziehen
Toolbar.Lensräumliche Suche
Toolbar.Locationaktueller Standout
Toolbar.PrintDrucken
Toolbar.SelectObjekte auswählen
Toolbar.ScreenshotScreenshot
Toolbar.Tabedittabellarisches Editieren, siehe Tabellarisches Editieren

Popup-Menüs für Feature Objekte

TagBedeutung
Task.AnnotateMarkieren und Messen
Task.Lensräumliche Suche
Task.Searchim Objekt suchen
Task.SelectObjekt auswählen
Task.Zoomzum Objekt hinzoomen

sonstiges

TagBedeutung
Altbar.SearchSuch-Box in rechten Bereich
Decoration.AttributionAttribution auf der Karte
Decoration.ScaleRulerMaßstabsbalken auf der Karte
Storage.ReadDatenablage lesen, siehe Datenablage
Storage.Writein der Datenablage speichern, siehe Datenablage

Layer flags

Neben der UI-Konfiguration kann jede Kartenebene eine Reihe von booleschen Optionen haben, die dem Client mitteilen, wie diese Ebene angezeigt werden soll.

OPTIONBEDEUTUNG
exclusive(bei Gruppenlayern) nur ein Unterlayer zeigen
expanded(bei Gruppenlayern) Gruppe im Layerbaum ausklappen
unlistedLayer im Layerbaum verstecken
selectedLayer im Layerbaum auswählen
unfolded(bei Gruppenlayern) nur die Unterlayer zeigen, nicht die Gruppe selbst
hiddenLayer ist unsichtbar

CSS Anpassungen

Sie können den Stil der integrierten Funktionen anpassen, z. B. Markierungen von Suchergebnisse oder Messungen. Es gibt folgende vordefinierte CSS-Selektoren:

CSS KlasseFunktion
.gws.modMarkerFeatureMarkierung für Suchergebnisse
.gws.modAnnotatePointPunkt-Markierung
.gws.modAnnotateLineLinien-Markierung
.gws.modAnnotatePolygonPolygon-Markierung
.gws.modAnnotateBoxBox-Markierung
.gws.modAnnotateCircleKreis-Markierung

Es besteht zudem die Möglichkeit den Stil einzelner von der WebSuite mitgelieferter HTML-Tags zu bearbeiten. Hierfür können Sie eigene CSS-Klassen definieren, welche dann die mitgelieferten Eigenschaften überschreiben.

Solche CSS-Klassen können wie folgt ergänzt werden:

  • in einer existierenden .css-Datei (in /data/web)
  • in einer neuen .css-Datei, die dann im /data/web Verzeichnis hinterlegt wird und in der /data/assets/project.cx.html eingebunden werden muss
  • direkt an der Stelle in einem <style>-Tag hinterlegt:
<style>
.myclass { color: red; }
</style>
<h1 class="myclass">test</h1>
  • Es ist ebenfalls möglich direkt an dem HTML-Element Inline Styles zu ergänzen:
<h1 style="color: red;">test</h1>

Um zu sehen welche Werte bestimmten CSS Eigenschaften eines Elementes aktuell zugewiesen sind kann man sich im Browser Details zu einem Element anzeigen lassen. Dafür geht man per Rechtsklick auf das Element und wählt Untersuchen.

Unter Styling finden Sie eine Auflistung von CSS Eigenschaften.

Client-Vorlagen mit Features/Modellen konfigurieren

Sie können Vorlagen (siehe Vorlagen) Konfigurieren um Features bzw. Modelle an verschiedenen Stellen im Client darzustellen. Die Vorlagen sind mit einem entsprechenden subject Wert zu versehen

subjectFunktion
feature.titleFeature-Titel
feature.teaserKurzbeschreibung des Features, erscheint in der Autocomplete-Box beim Suchen
feature.descriptiondetaillierte Beschreibung, erscheint in der Info-Box
feature.labelKartenbeschriftung für das Feature

Diese Vorlagen können für Layer (siehe Layer) oder Suchprovider (siehe Suche) konfiguriert werden.