Für die Entwicklung von Anwendungen werden seitens der SAP Tools zur Verfügung gestellt, die in der Entwicklungsumgebung Eclipse integriert sind.
Es stehen Tools für die Entwicklung von ABAP-Anwendungen und für SAPUI5-Frontend-Anwendungen zur Verfügung.
Die Tools können über den SAP-Marketplace bzw. über https://tools.hana.ondemand.com/<Eclipse-Version> in eine bestehende Eclipse IDE for Java EE Developers-Umgebung installiert werden.
Dabei ist das Zusammenspiel der Eclipse-Version und der dazu gehörigen SAP-Tools-Version zu beachten. Je nach Entwicklungsstand werden unterschiedliche Tool-Pakete von SAP angeboten.
Die Tools für die SAPUI5-Frontend-Entwicklung sind bis Eclipse-Mars verfügbar.
Für die Entwicklung von Anwendungen werden seitens der SAP Tools zur Verfügung gestellt, die in die Entwicklungsumgebung Eclipse integriert sind.
Für die Eclipse-Versionen bis Eclipse-Mars sind die SAPUI5 Tools for Eclipse verfügbar.
Die SAPUI5 Tools for Eclipse werden nicht weiterentwickelt. An deren Stelle sollen Entwickler die Web IDE verwenden.
Die Tools können über den SAP-Marketplace bzw. über https://tools.hana.ondemand.com/<Eclipse-Version> in eine bestehende Eclipse IDE for Java EE Developers-Umgebung installiert werden.
Dabei ist das Zusammenspiel der Eclipse-Version und der dazu gehörigen SAP-Tools-Version zu beachten. Je nach Entwicklungsstand werden unterschiedliche Tool-Pakete von SAP angeboten.
Mit ABAP Development Tools for SAP Netweaver können Entwicklungsobjekte wie Tabellen, Klassen, Funktionsbausteine und so weiter in Eclipse erstellt und verwaltet werden. Als Editoren stehen das SAPGUI for HTML sowie ADT-spezifische Editoren zur Verfügung.
Der Zugriff auf das Backend erfolgt, wie bei den Frontendtools auch, entweder initial beim Anlegen eines ABAP-Projektes
(New Project->Other->ABAP->ABAP-Project) oder über
Team->Share Project.
In beiden Fällen wird die Eingabe eines Ziel-Backends sowie der Verbindungsdaten (User / Password) des Entwicklers erwartet.
Die SAP Web IDE löst die SAPUI5 Tools for Eclipse ab.
Sie wird in verschiedenen Umgebungen, z.B. auf der SAP Cloud Platform oder als Standalone- (Personal-Edition) Lösung angeboten. Für das Zusammenspiel mit Netweaver ABAP kann die Personal-Edition verwendet werden, deren Einsatz wir hier zeigen.
Wir werden die Zugriffsmöglichkeiten der Web IDE auf das Backendsystem über eine Beispielanwendung testen.
Dazu werden wir zunächst eine Datenquellen-Konfigurationsdatei anlegen und unter deren Verwendung wir das Zusammenspiel von Entwicklungsumgebung und Backend testen.
Schritt 1
Erstellen Sie eine Datei mit dem Namen Ihres Remote-Systems (z. B. DEV). Bitte beachten Sie : Die Datei hat keine Extension.
Als Speicherort wählen Sie :
\eclipse\config_master\service.destinations\destinations
Schritt 2
Öffnen Sie die Datei mit einem beliebigen Text-Editor und fügen Sie Folgendes hinzu:
Description=MW1 Data Source Description Type=HTTP TrustAll=true Authentication=NoAuthentication Name=MW1 ProxyType=Internet URL=http\://<Adresse Ihres SAP-Systems>\:<Port Ihres SAP-Systems> WebIDEUsage=odata_abap,ui5_execute_abap,dev_abap WebIDESystem=MW1 WebIDEEnabled=true
Es können mehrere Dateien zum Konfigurieren mehrerer Systeme erstellt werden.
Damit können Sie die WebIDE verwenden, um SAPUI5- oder SAP FIORI-Anwendungen zu erstellen und Daten aus den verknüpften SAP-Systemen zu verwenden.
DataSource Konfigurationen können auch verwendet werden, um Verbindungen zu OData-Service herzustellen, die nicht auf SAP-Systemen liegen (z.B. auf den Beispiel-Northwind-Service /V2/Northwind/Northwind.svc auf https://services.odata.org) (siehe : https://developers.sap.com/tutorials/odata-03-webide-odata-features.html)
Den Umgang mit der WebIDE und das Zusammenspiel mit dem Backend werden wir anhand einer vorhandenen Musteranwendung testen.
Wir werden folgende Punkte abhandeln :
- die Anwendung über einen Template-Generator erzeugen
- die Datenquelle und den OData-Service konfigurieren
- das Default-Servicemodel erstellen und den Modelltyp, die Datenquelle und den URI konfigurieren
- Layout First View der SAPUI5-Anwendung anlegen
- ein List-Control anlegen
- das OData-Servicedaten-Set implementieren
- das Databinding vornehmen
Nach der Anmeldung an der WebIDE können Sie neues Projekt aus Template erstellen.
Wir werden das SAPUI5-Application-Template verwenden.
Geben Sie einen Namen ein.
Geben Sie als View-Typ XML und einen Namen für den View ein.
Wechseln Sie im Deskriptor-Editor zur Registerkarte Datenquelle.
Hier müssen wir angeben, von wo und wie die Anwendung Daten abrufen soll.
Klicken Sie auf das Symbol „+“ unter OData Services.
Wählen Sie Ihr SAP System.
In meinem Fall heißt es „MW1“. Dies ist die Backend-Quelle.
Wählen Sie nun aus der Liste der Dienste den OData-Dienst aus, den Sie in dieser Anwendung verwenden möchten.
Für unsere Musteranwendung werden wir den vorkonfigurierten OData-Service ZC_CARRIER_CDS auswählen,
Im Ergebnis finden Sie den ODataService und die URI zum Service.
Wechseln Sie in der Datei manifest.json zur Registerkarte Modelle.
Standardmäßig ist das i18n-Modell bereits vorhanden.
Klicken Sie auf das Symbol „+“, um ein weiteres Modell hinzuzufügen.
Im Hintergrund hat die WebIDE in die Datei manifest.json einigen Code geschrieben..
Wählen Sie die Registerkarte Steuerelemente und gehen Sie die verfügbaren Steuerelemente durch.
SAP hat den Entwicklern die verfügbaren UI-Elemente in WebIDE zur Verfügung gestellt.
In diesem Beispiel werden wir das einfache Listensteuerelement zur Anzeige von Feldern aus dem Model zeigen.
– Ziehen Sie das Listensteuerelement in den Ansichtsbereich.
Die Web IDE legt standardmäßig drei Listenelemente an.
In unserem Fall arbeiten wir mit einer dynamischen Liste, die die erforderliche Anzahl von Zeilen in Abhängigkeit von den vom OData-Dienst abgerufenen Daten anzeigt. Deshalb löschen wir die unteren beiden Elemente.
Anbinden des OData Service-Datensatzes an die View der Anwendung.
Auf der rechten Seite des Layout-Editors befinden sich die Abschnitte ‚Ereignisse‘ und ‚Eigenschaften‘.
Unter Eigenschaften der XML-Ansicht befindet sich ein Feld für den Datensatz, das standardmäßig „Nicht definiert“ ist.
Beachten Sie auch das kettenartige Symbol auf der rechten Seite. Es steht für Databinding.
Durch das Databinding werden die UI-Elemente des Bildschirms an eine Datenquelle gebunden.
In unserem Beispiel werden wir den Entitätstyp POHeaderSet an die Listenelemente binden.
Dazu klicken wir auf das Kettensymbol und wählen den Enttitätstyp ‚POHeaderSet‘.
Eine Liste von EntitySets des OData-Service wird angezeigt.
Wählen Sie das EntitySet POHeaderSet.
Die XML-View ist jetzt an POHeaderSet gebunden.
Dies bedeutet, dass die Eigenschaften (Elemente / Felder) des DataSet in der Ansicht verwendet werden können.
Die Eigenschaften des EntitySets können jetzt mit Feldern des UI verbunden werden.
Dies bedeutet, dass die Eigenschaften (Elemente / Felder) des DataSet in der Ansicht verwendet werden können.
Zum Beispiel können wir das Title-Element des StandardListItems der Liste mit einem Feld ‚xyz‘ aus der POHeader-Entität verknüpfen.
Um die Ergebnisliste einer Serviceanfrage an die Liste zu knüpfen, müssen wir die CheckBox ‚Set as template‘ aktivieren.
Dies sorgt für die Anzeige der Liste in der Oberfläche.
