SAPUI5-Tutorial für Anfänger: Was ist Fiori mit Beispielen

Was ist SAPUI5?

SAPUI5 ist eine Reihe von Bibliotheken zum Erstellen reaktionsfähiger Webanwendungen, die auf mehreren Geräten wie Desktops, Mobilgeräten und Tablets ausgeführt werden können. SAPUI5 funktioniert weiter MVC-Konzept um den Entwicklungszyklus zu beschleunigen, indem Daten, Geschäftslogik und Datendarstellung separat in der Ansicht erstellt werden. So kann die Entwicklung von View und Controller unabhängig voneinander erfolgen, um Modelle (Datencontainer) zu erstellen.

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

SAPUI5 Architektur

SAPUI5 Architektur
SAPUI5 Architektur

SAPUI ArchiStrukturdiagramm

In obigem ArchiZuerst die Struktur box, dh „Geräte“ geben die Geräte an, auf denen UI5-Anwendungen ausgeführt werden. Auf UI5-Anwendungen kann über eine mobile App oder einen beliebigen Browser auf diesen Geräten zugegriffen werden. Diese Schicht der archiDie Struktur wird „Präsentationsschicht“ genannt.

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

Die eigentliche Geschäftslogik wird in SAP-Kernsystemen wie ECC, CRM und BW usw. implementiert. Geschäftslogik kann mithilfe von SAP-Programmen und Funktionsmodulen implementiert werden. SAP-Transaktions- und Stammdaten liegen auf SAP-Systemen. Diese Schicht der archiDie Struktur wird „Datenbankschicht“ oder „Persistenzschicht“ genannt.

SAPUI5-Komponente

Eine Komponente ist ein Teil des Arbeitscodes, der bei Bedarf wiederverwendet wird. Es gibt zwei Arten von Komponenten, die von SAPUI2 bereitgestellt werden

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

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

SAPUI5-Komponente

In dieser UI5-Anwendung ist PassNum eine Komponente. Die Component.js-Datei ist obligatorisch, damit sich die UI5-Anwendung wie eine Komponente verhält. Die Datei Component.js ist der Komponentencontroller.

Als nächstes in diesem SAPUI5 Eclipse Im Tutorial lernen wir, wie man SAPUI5 einrichtet.

SAPUI5-Setup

Bevor wir beginnen, müssen Sie sicherstellen, dass –

  1. Eclipse (Luna-Version) ist auf Ihrem Laptop installiert
  2. SAP-Entwicklungstools für Eclipse Luna und auf deinem installiert eclipse (SAP-Entwicklungstools für Eclipse Luna – https://tools.hana.ondemand.com/luna/)
  3. Das SAP Logon Pad ist installiert und Sie haben Zugriff auf das SAP NetWeaver Gateway-System zum Bereitstellen und Testen dieser Anwendung, die wir in diesem Blog erstellen werden.

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

SAPUI5-Setup

In diesem SAPUI5-Tutorial-Leitfaden erstellen wir zwei Komponenten, nämlich die übergeordnete Komponente und die untergeordnete Komponente. Zuerst erstellen wir eine untergeordnete Komponente und nutzen sie dann 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 akzeptiert und den Namen des Monats anzeigt. Beispielsweise erhält es 3; Es sollte „März“ anzeigen.

Schritt 1) ​​Erstellen Sie das UI-Projekt

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

Erstellen Sie das UI-Projekt

Erstellen Sie ein Anwendungsprojekt für SAPUI5 von following der Assistent, der sich öffnet. Siehe Screenshot unten.

Erstellen Sie das UI-Projekt

Geben Sie den Namen des Projekts ein. Die anderen Auswahlmöglichkeiten bleiben wie vom Assistenten vorgeschlagen.

Erstellen Sie das UI-Projekt

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 einer reaktionsfähigen Webanwendung gedacht ist.

Als Nächstes sehen Sie in diesem SAP FIORI-Tutorial den folgenden Abschnitt des Assistenten, in dem Sie eine erste Ansicht erstellen müssen. Eine erste Ansicht ist eine Ansicht, die beim Zugriff auf die Anwendung zuerst gerendert wird.

Erstellen Sie das UI-Projekt

Hier müssen Sie den Namen der Ansicht angeben und den Typ der Ansicht auswählen. SAPUI5 unterstützt vier Ansichtstypen, wie auf dem obigen Bildschirm ersichtlich ist. So kann die Benutzeroberfläche einer SAPUI4-Anwendung mit Javascript oder XML erstellt werden JSON oder HTML, je nachdem, mit welcher Sprache Sie vertraut sind.

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

Erstellen Sie das UI-Projekt

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 teilen wir der Datei index.html mit, dass Component.js in SAPUI5 geladen werden soll, wenn über den Browser auf die Anwendung zugegriffen wird. Schreiben Sie also den folgenden Code in die Datei index.html.

<!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 unsere displaymonth-Ansicht, der den Monat anzeigt, dessen Monatsnummer 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:

DisplayMonthView.view.xml-Code

Schritt 5) DisplayMonthView.controller.js-Code

Und schließlich schreiben wir Code für die Controller-Datei von DisplayMonthView.

Der Code wird nur in die onInit()-Hook-Methode dieses Controllers geschrieben, daher wird hier nur der onInit()-Code eingefügt. Der Rest der Datei entspricht der vom Framework generierten Datei.

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 dem SAP Netweaver Gateway Server

Deployen Sie das Projekt und geben Sie den technischen Namen der BSP-Anwendung an, die auf dem ABAP-Frontend-Server generiert werden soll. Lass den Namen sein zdisplaymonth. Zu diesem Zeitpunkt sollte Ihr Bewerbungsprojekt wie folgt aussehen.

SAP Netweaver Gateway Server

TEIL 2) Erstellen einer übergeordneten Komponente

Jetzt ist es an der Zeit, eine neue Komponente (übergeordnete Komponente) zu erstellen, die die Komponente nutzt, die wir bisher in diesem Tutorial erstellt haben.

Schritt 1) ​​Erstellen Sie eine neue SAPUI5-Anwendung

Gehen Sie zu Datei->Neu->Sonstiges->SAPUI5-Anwendungsentwicklung->Anwendungsprojekt. Befolgen Sie dann die Anweisungen des Assistenten, um ein neues SAPUI5-Anwendungsprojekt zu erstellen. Dies wurde oben in Schritt 1 von Teil 1 dieses Tutorials ausführlich beschrieben.

Der Name des übergeordneten Komponentenprojekts lautet PassNum. Und der technische Name der BSP-Anwendung, die nach der Bereitstellung der SAPUI5-Komponente auf dem ABAP-Frontend-Server generiert wird, lautet zpassnum. Die Projektstruktur sieht wie folgt aus

Erstellen Sie eine neue SAPUI5-Anwendung

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

Schritt 2) Quellcode von 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

Quellcode der Datei PassNum.view.xml

Schritt 5) Quellcode von PassNum.controller.js

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

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 auf dem SAP NetWeaver Gateway Server

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

Bereitstellung der übergeordneten Komponente auf dem SAP NetWeaver Gateway Server

Die folgende URL wird geöffnet eclipse Browser.
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html

Kopieren Sie die URL und führen Sie sie im tatsächlichen Browser aus. Im oben gelb markierten Hostnamen handelt es sich um den Hostnamen Ihres ABAP-Frontend-Servers.

Output

Ausgabe des SAP NetWeaver Gateway Servers

Klicken Sie auf die Schaltfläche „Erstes“. Der Januar sollte in der untergeordneten Komponente angezeigt werden.

Ausgabe des SAP NetWeaver Gateway Servers

Viel Spaß beim Erstellen schöner, reaktionsfähiger Webanwendungen mit SAPUI5.

Zusammenfassung

In diesem SAPUI5-Tutorial haben wir gelernt:

  • SAPUI5 erkundet: SAPUI5 ist die neueste in der Reihe der SAP-UI-Entwicklungstechnologien.
  • Was ist SAP UI5: SAPUI5 ist eine Reihe von Bibliotheken, die zum Erstellen responsiver Webanwendungen verwendet werden
  • Komponenten von SAPUI5 archisind Geräte, Client, NetWeaver Gateway, Persistenzschicht
  • Eine SAPUI5-Komponente ist ein Teil des Arbeitscodes, der bei Bedarf wiederverwendet wird
  • Arten von SAPUI5-Komponenten sind 1) UI-Komponenten, 2) gesichtslose Komponenten
  • Wir haben gelernt, wie man eine Sapui5-Komponente in eine andere Sapui5-Komponente umwandelt und Daten zwischen den beiden Komponenten weitergibt