SAPUI5-Tutorial für Anfänger

SAPUI5 ist das neueste in der Reihe der SAP UI-Entwicklungstechnologien. Um eine Web-Integration für die zugrunde liegende SAP ERP-System, SAP entwickelte mehrere UI-Entwicklungstechnologien wie BSP (Business Server Pages), PDK (Portal Development Kit), Web Dynpro Java, Web Dynpro ABAP. Und der Nachfolger von Web Dynpro ABAP ist SAPUI5.

SAPUI5 Architektur

SAPUI ArchiStrukturdiagramm

In obigem ArchiDie erste Box „Geräte“ in der Struktur zeigt die Geräte an, auf denen UI5-Anwendungen ausgeführt werden. UI5-Anwendungen können über eine mobile App oder einen beliebigen Browser aufgerufen werden. Diese Schicht wird als „Präsentationsschicht“ bezeichnet.

SAPUI5-Anwendungen und oData-Dienste befinden sich auf dem SAP NetWeaver Gateway-Server. Diese Architekturschicht wird als „Anwendungsschicht“ bezeichnet.

Die eigentliche Geschäftslogik wird implementiert in SAP Kernsysteme wie ECC, CRM und BW. Geschäftslogik kann implementiert werden mithilfe von SAP Programme und Funktionsbausteine. SAP Transaktions- und Stammdaten befinden sich auf SAP Systeme. Diese Schicht wird als „Datenbankschicht“ oder „Persistenzschicht“ bezeichnet.

SAPUI5-Komponente

Eine Komponente ist ein wiederverwendbarer Codeabschnitt. Es gibt zwei Arten von Komponenten, die von … bereitgestellt werden. SAPUI5:

1. UI-Komponenten – Diese stellen eine Benutzeroberfläche dar, die UI-Elemente enthält. Sie basieren auf der SAPUI5-Klasse namens sap.ui.core.UIComponent
2. Faceless Components – Diese Komponenten besitzen keine Benutzeroberfläche. Sie basieren auf der SAPUI5-Klasse namens sap.ui.core.Component

Im Wesentlichen ist eine Komponente ein Ordner. Wenn Sie eine neue SAPUI5-Anwendung: Sie können in Ihrem Projekt-Explorer eine Ordnerstruktur wie unten erstellt sehen.

In dieser UI5-Anwendung ist PassNum eine Komponente. Die Datei Component.js ist zwingend erforderlich, damit sich eine UI5-Anwendung wie eine Komponente verhält.

Weiter in diesem SAPUI5 Eclipse Tutorial lernen wir, wie man einrichtet SAPUI5.

SAPUI5-Einrichtung

Bevor wir beginnen, müssen Sie Folgendes sicherstellen:

1. Eclipse (Luna-Version) ist auf Ihrem Laptop installiert
2. SAP Entwicklungstools für Eclipse Luna ist auf Ihrem System installiert Eclipse (SAP Entwicklungstools für Eclipse Luna – https://tools.hana.ondemand.com/luna/)
3. SAP Das Anmeldefeld ist installiert und Sie haben Zugriff darauf. SAP NetWeaver Gateway-System für die Bereitstellung und das Testen der Anwendung, die wir in diesem Blog entwickeln werden.

Nachdem die Anwendung vollständig erstellt wurde, sollte sie wie folgt aussehen:

In dieser SAPIn diesem UI5-Tutorial erstellen wir zwei Komponenten: die übergeordnete Komponente und die untergeordnete Komponente. Zuerst erstellen wir die untergeordnete Komponente und verwenden sie anschließend in der übergeordneten Komponente.

Fangen wir an, uns die Hände schmutzig zu machen.

Teil 1) Untergeordnete Anwendung erstellen

Unser Ziel ist es, eine untergeordnete Komponente zu erstellen, die eine Zahl von 1 bis 12 entgegennimmt und den Namen des Monats anzeigt. Bei der Eingabe 3 soll beispielsweise „März“ angezeigt werden.

Schritt 1) ​​Erstellen Sie das UI-Projekt

Gehen Sie zu Datei->Neu->Andere->SAPUI5-Anwendungsentwicklung->Anwendungsprojekt.

Erstellen Sie ein Anwendungsprojekt für SAPUI5 mithilfe des Assistenten einrichten. Siehe Screenshot unten.

Geben Sie den Namen des Projekts ein und belassen Sie die anderen Auswahlen so, wie vom Assistenten vorgeschlagen.

Im obigen Screenshot werden zwei Arten von Bibliotheken als Optionsfelder angezeigt:

1. sap.m
2. sap.ui.commons

Wenn Sie sap.m auswählen, weisen Sie den Assistenten an, ein UI5-Anwendungsprojekt zu erstellen, dessen Bootstrap-Abschnitt automatisch die sap.m-Bibliothek enthält, die für die Erstellung responsiver Webanwendungen gedacht ist.

Weiter in diesem SAP Im Fiori-Tutorial sehen Sie unten den Abschnitt des Assistenten, in dem Sie die Initialansicht erstellen müssen. Eine Initialansicht ist die Ansicht, die beim Aufruf der Anwendung als erstes gerendert wird.

Hier müssen Sie den Namen der Ansicht angeben und den Ansichtstyp auswählen. SAPUI5 unterstützt 4 Arten von Ansichten, wie auf dem obigen Bildschirm zu sehen ist. Die Benutzeroberfläche eines SAPUI5-Anwendungen können erstellt werden mit JavaSkript oder XML oder JSON oder HTML, ganz gleich, mit welcher Sprache Sie sich wohlfühlen.

Am Ende des Assistenten wird ein neues Projekt erstellt und im Projekt-Explorer-Fenster angezeigt. Eclipse Wie unten.

Schritt 2) Component.js-Code

Als Nächstes erstellen wir eine Component.js-Datei und schreiben den folgenden Code hinein.

sap.ui.core.UIComponent.extend("DisplayMonth.Component", {

	metadata: {
	    "name": "DisplayMonth",
	    "dependencies": {
	      "components": []}
	    },

createContent: function() {
    var oViewData = {
      component: this
    };
    var oView = sap.ui.view({
      viewName: "DisplayMonth.displaymonth.DisplayMonthView",
      type: sap.ui.core.mvc.ViewType.XML,
      viewData: oViewData
    });

     return(oView);
  },

  init: function() {
    // call super init (will call function "create content")
    sap.ui.core.UIComponent.prototype.init.apply(this, arguments);

    // always use absolute paths relative to our own component
    // (relative paths will fail if running in the Fiori Launchpad)
    var sRootPath = jQuery.sap.getModulePath("DisplayMonth");


  },
});

Schritt 3) Index.html-Code

Als Nächstes weisen wir unsere index.html-Datei an, die Datei Component.js beim Aufruf der Anwendung zu laden. Fügen Sie dazu den folgenden Code in die index.html-Datei ein.

<!DOCTYPE HTML>
<html>
	<head>
	// adding meta tags to tell IE browser to render the page in IE-edge mode.
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	// adding meta tag to tell eclipse to use UTF 8 as character encoding
	<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
	// Bootstrap script to tell ui5 designtime and runtime to use sap.m library, use //blue-crystal these and use complex binding syntax
		<script src="resources/sap-ui-core.js"
				id="sap-ui-bootstrap"
				data-sap-ui-libs="sap.m"
				data-sap-ui-theme="sap_bluecrystal"
				data-sap-ui-xx-bindingSyntax="complex"
				data-sap-ui-resourceroots='{"DisplayMonth": "./"}'>
		</script>

		<script>

				sap.ui.getCore().attachInit(function() {
				    new sap.m.Shell({
				      app: new sap.ui.core.ComponentContainer({
				        height : "100%",
				        name : "DisplayMonth"
				      })
				    }).placeAt("content");
				  });
		</script>

	</head>
// start of body of SAPUI5 application. It contains a div element.
	<body class="sapUiBody" role="application">
		<div id="content"></div>
	</body>
</html>

Schritt 4) DisplayMonthView.view.xml-Code

Als Nächstes schreiben wir Code in unserer Ansicht "Monat anzeigen", um den Monat anzuzeigen, dessen Nummer von der übergeordneten Komponente empfangen wird.

<html:style>
	#__xmlview1--id{
	margin-left: 30rem;
    margin-top: 9rem;
    font-size: 6rem;
    font-style: italic;
    background-color: burlywood;
	}
</html:style>
	<App id="fioricontent">
		<Page title="Child Component">
			<content>
				<Text id="id" xmlns="sap.m" text="{myModel>/monthname}"></Text>
			</content>
		</Page>
	</App>

Nachdem Sie den obigen Code eingefügt haben, sollte Ihre Ansicht wie folgt aussehen.

Schritt 5) DisplayMonthView.controller.js-Code

Und schließlich schreiben wir den Code der Controller-Datei von DisplayMonthView.

Der Code befindet sich ausschließlich in der `onInit()`-Hook-Methode, daher wird hier nur dieser Teil eingefügt. Der Rest der Datei wurde vom Framework generiert.

onInit : function() {
		sap.ui.getCore().getEventBus().subscribe("exchange", "data",
				function(channel, event, oEventData) {
					jsonModel = new sap.ui.model.json.JSONModel({
						monthumber : oEventData,
						monthname : ''

					});

					// derive month name from month number
					switch (jsonModel.oData.monthumber) {
					case "1":
						jsonModel.oData.monthname = 'January';
						break;
					case "2":
						jsonModel.oData.monthname = 'February';
						break;
					case "3":
						jsonModel.oData.monthname = 'March';
						break;
					case "4":
						jsonModel.oData.monthname = 'April';
						break;
					case "5":
						jsonModel.oData.monthname = 'May';
						break;
					case "6":
						jsonModel.oData.monthname = 'June';
						break;
					case "7":
						jsonModel.oData.monthname = 'July';
						break;
					case "8":
						jsonModel.oData.monthname = 'August';
						break;
					case "9":
						jsonModel.oData.monthname = 'September';
						break;
					case "10":
						jsonModel.oData.monthname = 'October';
						break;
					case "11":
						jsonModel.oData.monthname = 'November';
						break;
					case "12":
						jsonModel.oData.monthname = 'December';
						break;

					}
					this.getView().setModel(jsonModel, "myModel");

				}, this);
	},

Schritt 6) Bereitstellung der Anwendung auf SAP NetWeaver Gateway-Server

Stellen Sie das Projekt bereit und geben Sie der auf dem ABAP-Frontend-Server generierten BSP-Anwendung den technischen Namen. Der Name soll lauten: zdisplaymonthIhr Projekt sollte wie folgt aussehen.

TEIL 2) Erstellen einer übergeordneten Komponente

Nun ist es an der Zeit, eine neue Komponente (übergeordnete Komponente) zu erstellen, die die bisher in diesem Tutorial erstellte Komponente verwenden wird.

Schritt 1) ​​Erstellen Sie ein neues SAPUI5-Anwendung

Gehen Sie zu Datei->Neu->Andere->SAPUI5-Anwendungsentwicklung -> Anwendungsprojekt. Folgen Sie dann den Anweisungen des Assistenten, um ein neues Projekt zu erstellen. SAPUI5-Anwendungsprojekt. Dies wurde in Schritt 1 von Teil 1 in diesem Tutorial oben ausführlich beschrieben.

Der Name des übergeordneten Komponentenprojekts lautet PassnummerDer technische Name der nach der Bereitstellung generierten BSP-Anwendung lautet: zpassnumDie Projektstruktur wird wie folgt aussehen.

Schreiben wir nun Code in die Dateien index.html, Component.js, PassNum.view.xml und PassNum.controller.js.

Schritt 2) Quelle Code der Index.html der übergeordneten Komponente

<!DOCTYPE HTML>
<html>
	<head>
// adding meta tags to tell IE browser to render the page in IE-edge mode.
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
// adding meta tag to tell eclipse to use UTF 8 as character encoding
	<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
// Bootstrap script to tell ui5 designtime and runtime to use sap.m library, use //blue-crystal these and use complex binding syntax
		<script src="resources/sap-ui-core.js"
				id="sap-ui-bootstrap"
				data-sap-ui-libs="sap.m"
				data-sap-ui-theme="sap_bluecrystal"
				data-sap-ui-resourceroots='{"PassNum": "./"}'>
		</script>
		<script>
				  sap.ui.getCore().attachInit(function() {
				    new sap.m.Shell({
				      app: new sap.ui.core.ComponentContainer({
				        height : "100%",
				        name : "PassNum"
				      })
				    }).placeAt("content");
				  });

		</script>

	</head>
// start of Body of SAPUI5 application, Contains a div tag,
	<body class="sapUiBody" role="application">
		<div id="content"></div>
	</body>
</html>

Schritt 3) Quellcode der Component.js-Datei der übergeordneten Komponente

sap.ui.core.UIComponent.extend("PassNum.Component", {

	metadata: {
	    "name": "PassNum",
	    "dependencies": {
	      "components": []}
	    },

createContent: function() {
    var oViewData = {
      component: this
    };

// Creating Reference of a PassNum XML view
    var  myView = sap.ui.view({
      viewName: "PassNum.passnum.PassNum",
      type: sap.ui.core.mvc.ViewType.XML,
      viewData: oViewData
    });

     return(myView);
  },

  init: function() {
    // call super init (this will call function "create content")
    sap.ui.core.UIComponent.prototype.init.apply(this, arguments);
    // ensure to use absolute paths relative to own component
    // (running in the Fiori Launchpad, relative paths will fail)
    var sRootPath = jQuery.sap.getModulePath("PassNum");

  },
});

Schritt 4) Quellcode der Datei PassNum.view.xml

<Page title="Parent Component">
		<content>

			<VBox xmlns="sap.m" id="vboxid">

			<items>
				<Button xmlns="sap.m" id="1" text="First" press="clickbutton"
					class="sapUiSmallMarginEnd"></Button>
				<Button xmlns="sap.m" id="2" text="Second" press="clickbutton"
					class="sapUiSmallMarginEnd"></Button>
				<Button xmlns="sap.m" id="3" text="Third" press="clickbutton"
					class="sapUiSmallMarginEnd"></Button>
				<Button xmlns="sap.m" id="4" text="Fourth" press="clickbutton"
					class="sapUiSmallMarginEnd"></Button>
				<Button xmlns="sap.m" id="5" text="Fifth" press="clickbutton"
					class="sapUiSmallMarginEnd"></Button>

				<core:ComponentContainer id="conpcontid"
					name="DisplayMonth" manifestFirst="true" component="zdisplaymonth"></core:ComponentContainer>

				</items>
			</VBox>

		</content>
	</Page>

Nachdem Sie den obigen Code in Ihrer Ansicht verwendet haben, sollte Ihre Ansicht wie folgt aussehen.

Schritt 5) Quellcode von PassNum.controller.js

Lediglich die Methode onInit() wurde geändert. Alles andere in dieser Datei bleibt unverändert.

onInit: function() {

	jQuery.sap.registerModulePath("DisplayMonth", "../zdisplaymonth");
	},

	clickbutton:function(oEvent)
	{
		sap.ui.getCore().getEventBus().publish("exchange",
				"data", oEvent.oSource.sId.split("--")[1]);


	}

Schritt 6) Bereitstellung der übergeordneten Komponente in SAP NetWeaver Gateway-Server

Stellen Sie die Anwendung auf dem ABAP-Frontend-Server bereit und führen Sie sie aus. Sie können sie starten, indem Sie mit der rechten Maustaste auf das Projekt klicken und die Option „Auf ABAP-Server ausführen“ auswählen.

Die unten URL wird sich öffnen in Eclipse Browser.
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html

Kopieren Sie die URL und führen Sie es im Browser aus. Der oben genannte Hostname (gelb markiert) ist der Hostname Ihres ABAP-Frontend-Servers.

Ausgang

Klicken Sie auf die Schaltfläche „Erste“, und Januar sollte in der untergeordneten Komponente angezeigt werden.

Viel Spaß beim Erstellen schöner, responsiver Webanwendungen mit SAPUI5.

Häufig gestellte Fragen