Code-Beispiel für die Verwendung einer geografischen Karte (SAP-Bibliothek

Code-Beispiel für die Verwendung einer geografischen Karte

Verwendung

Das folgende Beispiel zeigt Ihnen die Verwendung einer geografischen Karte. Dabei wird der Aufbau der View, die dafür notwendige Context-Struktur sowie die Datenbindung der Oberflächenelement-Eigenschaften an diese zur Design-Zeit definierte Context-Struktur zur Darstellung einer geografischen Karte vorgestellt. Auf dieser Karte wird ein so genanntes Geo-Objekt platziert, mit dem Sie zusätzlich ein Ereignis auslösen können. Geo-Objekte können dazu verwendet werden, um eine bestimmte geografische Position im Kartenausschnitt optisch hervorheben. In diesem Beispiel wird die genaue Lage der SAP AG in Walldorf gekennzeichnet. Wenn Sie dieses Geo-Objekt auswählen, erscheint die Adresse der SAP AG in einem TextView-Oberflächenelement am unteren Rand der Karte.

Voraussetzungen

Sie haben eine Web-Dynpro-Anwendung erstellt und innerhalb der Web-Dynpro-Component (in diesen Beispiel GeoMapComponent genannt) eine View (in diesem Beispiel TestGeopMapView genannt) angelegt, in die Sie das GeoMap-Oberflächenelement einfügen möchten. Eine detaillierte Vorgehensweise zur Erstellung von Web-Dynpro-Projekten, Web-Dynpro-Components, der Context-Struktur sowie des Layouts der View finden Sie im Tutorial „Erstellen der ersten Web-Dynpro-Anwendung“.

Vorgehensweise

Erstellen des Layouts der geografischen Karte wie folgt:

...

Oberflächenelement GeoMap mit der ID TheMap in die View TestGeoMapView einfügen.

Diese Grafik wird im zugehörigen Text erklärt

Erstellen der Context-Struktur

...

Context-Knoten anlegen:

Context-Struktur:

Anlegen des Value-Knotens DataSource

Anlegen des Value-Attriuts geoObject

Anlegen des Value-Attriuts Address

Diese Grafik wird im zugehörigen Text erklärt

Eigenschaften des Value-Knotens DataSource

Diese Grafik wird im zugehörigen Text erklärt

Eigenschaften des Value-Attributs geoObject

Diese Grafik wird im zugehörigen Text erklärt

Hinweis

Wenn Sie nach dem Anlegen der View zuerst die Context-Struktur definieren, dann haben Sie die Möglichkeit, die Oberflächenelement-Eigenschaften direkt nach Einfügen des Oberflächenelements in die View an die entsprechenden Context-Elemente zu binden.

Datenbindung

...

Datenbindung der Oberflächenelement-Eigenschaften für das GeoMap-Oberflächenelement definieren:

Oberflächenelement-Eigenschaft	Wert
Bottom	49.2000
geoObjectSource	DataSource.geoObject (in diesem Beispiel optional)
Height	250
igsURL	Web-Adresse Ihres IGS-Services
Left	8.5082
moveType	none
Right	8.7922
Top	49.4304
Width	250
zoomType	none

Datenbindung der Oberflächenelement-Eigenschaften für das Label-Oberflächenelement definieren:
Die Oberflächenelement-Eigenschaft textwird an das Wurzelknotenattribut Addressgebunden.

Oberflächenelement-Eigenschaft	Wert
LabelFor	TextView1
Text	Address of the company

Datenbindung der Oberflächenelement-Eigenschaften für das TextView-Oberflächenelement definieren:
Die Oberflächenelement-Eigenschaft textwird an das Wurzelknotenattribut Addressgebunden.

Oberflächenelement-Eigenschaft	Wert
text	Address

OnObjectAction-Ereignis LinkToWebAddress definieren

Ein Geo-Objekt kann ein onObjectAction-Ereignis auslösen. Dieses Ereignis ist immer an ein Geo-Objekt auf der Karte gebunden. Dazu legen Sie die Aktion LinkToWebAddress mit Parameter actionID im View Designer an. Damit wird in der Controller-Implementierung automatisch die Methode onActionLinkToWebAddress angelegt.

Innerhalb dieser Methode befüllen Sie durch den Quelltext wdContext.currentContextElement().setAddress("SAP AG, Neurottstraße 16, 69190 Walldorf"); den Context mit der Adresse. Wenn Sie in diesem Beispiel das Geo-Objekt mit der Maustaste auswählen, dann erscheint die Adresse von SAP in einem TextView-Oberflächenelement am unteren Rand der Karte.

Hinweis

Um der Aktion mitzuteilen, welcher Geo-Punkt das Ereignis auslöst, müssen Sie die Parameter id des Geo-Punkts auf den Parameter actionIDder Aktion abbilden.

public static void wdDoModifyView(IPrivateTestGeoMapView wdThis, IPrivateTestGeoMapView.IContextNode wdContext, com.sap.tc.webdynpro.progmodel.api.IWDView view, boolean firstTime)

{

//@@begin wdDoModifyView

IWDGeoMap map = (IWDGeoMap)view.getElement("TheMap");

map.mappingOfOnObjectAction().addSourceMapping("id", "actionID");

//@@end

}

//@@begin javadoc:onActionLinkToWebAdress(ServerEvent)

/** Declared validating event handler. */

//@@end

public void onActionLinkToWebAddress(com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent, java.lang.String actionID )

{

//@@begin onActionLinkToWebAddress(ServerEvent)

wdContext.currentContextElement().setAddress("SAP AG, Neurottstraße 16, 69190 Walldorf");

//@@end

}

Controller-Implementierung der View TestGeoMapView

Zum Platzieren von Geo-Objekten stehen Ihnen mehrere Web-Dynpro-Klassen zur Verfügung. Dies sind u.a. WDGeoObject, WDGeoLine, WDGeoPoint und WDGeoPolygon. Mit dem folgenden Quelltext wird bei der Initialisierung ein Geo-Objekt in der Karte mit der Position 8.6425, 49.2929 (WGS84-Format) in Form einer blauen Ellipse mit dem Titel SAP dargestellt. Siehe Bildschirmkopie zum Ergebnis des Beispiels weiter unten. Ist für die Methode setTriggersEvent der Wert true gesetzt, dann kann das Geo-Objekt vom Typ IWDGeoPoint ein Ereignis auslösen.

public void wdDoInit()

{

//@@begin wdDoInit()

IPrivateTestGeoMapView.IdataSourceNode node = wdContext.nodeDataSource();

IWDGeoPoint point = WDGeoFactory.createGeoPoint("GeoPoint1");

point.setLabel("SAP");

point.setStyle(WDGeoPointStyle.ELLIPSE);

point.setTooltip("SAP");

WDGeoPosition geoPosition = new WDGeoPosition(8.6425, 49.2929);

point.setPosition(geoPosition);

point.setTriggersEvent(true);

point.setSize(20);

point.setColor(java.awt.Color.blue);

IPrivateTestGeoMapView.IDataSourceElement nodeElement = node.createDataSourceElement();

nodeElement.setGeoObject(point);

node.addElement(nodeElement);

//@@end

}

Aufruf der Web-Dynpro-Anwendung und Ergebnis

Bevor Sie die Web-Dynpro-Anwendung aufrufen können, müssen Sie das entsprechende Web-Dynpro-Projekt gebaut und die Web-Dynpro-Anwendung auf der SAP J2EE Engine installiert haben.

Über eine Web-Adresse rufen Sie die Web-Dynpro-Anwendung im Browser auf, als Ergebnis wird ein Kartenausschnitt der Umgebung von Heidelberg/Walldorf darstellt und die Lage der SAP AG mit blauer Ellipse markiert.

Diese Grafik wird im zugehörigen Text erklärt

Wenn Sie dieses Geo-Objekt auswählen, dann wird die Adresse am unteren Rand der Karte angezeigt.

Diese Grafik wird im zugehörigen Text erklärt

Weitere Informationen stehen Ihnen in der Beschreibung der Web Dynpro GeoMap API zur Verfügung.