SAPUI5 oktatóanyag kezdőknek: Mi a Fiori példákkal

Mi a SAPUI5?

SAPIU5 egy olyan könyvtárkészlet, amely több eszközön, például asztali számítógépen, mobileszközön és táblagépen fut érzékeny webalkalmazások létrehozásához. SAPAz UI5 működik MVC koncepció a fejlesztési ciklus felgyorsítása az adatok, az üzleti logika és az adatok külön-külön történő megjelenítésével a nézetben. Így a nézet és a vezérlő fejlesztése önállóan történhet modellek (adattárolók) létrehozásához.

SAPAz UI5 a legújabb a sorozatban SAP UI fejlesztési technológiák. A mögöttes webes integráció biztosítása érdekében SAP ERP rendszer, SAP többféle felhasználói felület fejlesztési technológiával állt elő, mint például a BSP (üzleti szerver oldalak), a PDK (portálfejlesztő készlet), a Web Dynpro Java, Web Dynpro ABAP. A Web Dynpro ABAP utódja pedig az SAPUI5.

SAPIU5 Architectúra

SAPUI Architecture diagram

A fentiekben Architecture, first box, azaz az „Eszközök” jelzik azokat az eszközöket, amelyeken az UI5 alkalmazások futnak. Az UI5 alkalmazások mobilalkalmazáson vagy bármely böngészőn keresztül érhetők el ezeken az eszközökön. Az architektúrának ezt a rétegét "Prezentációs rétegnek" nevezik.

SAPAz UI5 alkalmazások és az oData szolgáltatások tovább működnek SAP NetWeaver Gateway Server. Az architektúrának ezt a rétegét "Alkalmazási rétegnek" nevezik.

A tényleges üzleti logika implementálva van SAP olyan alaprendszerek, mint az ECC, CRM, BW, stb... Az üzleti logika a segítségével megvalósítható SAP programok és funkciómodulok. SAP tranzakciós és törzsadatai vannak SAP rendszerek. Az architektúrának ezt a rétegét „adatbázisrétegnek” vagy „perzisztencia rétegnek” nevezik.

SAPUI5 komponens

A komponens egy működő kód, amelyet szükség esetén újra felhasználnak. 2 típusú komponenst kínál SAPIU5

UI komponensek – Ezek egy felhasználói felületet jelentenek, amely UI elemeket tartalmaz. Ezek az sap.ui.core.UIComponent nevű SPAUI5 osztályon alapulnak
Faceless Components – Ezeknek nincs felhasználói felületük. Ezek azon alapulnak SAPUI5 osztály neve sap.ui.core.Component

Lényegében a komponens egy mappa. Amikor létrehoz egy újat SAPUI5 alkalmazás, akkor láthat egy mappastruktúrát, amelyet a projektböngészőben hoztak létre, az alábbiak szerint.

Ebben az UI5 alkalmazásban a PassNum egy komponens. A Component.js fájl kötelező ahhoz, hogy az UI5-alkalmazás komponensként viselkedjen. A Component.js fájl az összetevővezérlő.

Következő ebben SAPIU5 Eclipse bemutató, megtanuljuk, hogyan kell beállítani SAPUI5.

SAPUI5 beállítása

Mielőtt elkezdené, meg kell győződnie arról, hogy

Eclipse (Luna verzió) telepítve van a laptopjára
SAP Fejlesztési eszközök a Eclipse Luna és telepítve a napfogyatkozásodra (SAP Fejlesztési eszközök a Eclipse luna – https://tools.hana.ondemand.com/luna/)
SAP A bejelentkezési pad telepítve van, és Ön hozzáférhet SAP NetWeaver Gateway rendszer ennek az alkalmazásnak a telepítéséhez és teszteléséhez, amelyet ebben a blogban fogunk építeni.

Az alkalmazás teljes felépítése után az alábbiak szerint kell kinéznie:

Ebben SAPUI5 oktatóanyagok útmutatójában 2 összetevőt fogunk létrehozni, nevezetesen a szülőkomponenst és a gyermekkomponenst. Először létrehozzuk a Gyermekkomponenst, majd felhasználjuk a Szülőkomponensben.

Kezdjük bepiszkolni a kezünket.

1. rész) Gyermek alkalmazás létrehozása

Célunk egy olyan gyermekkomponens létrehozása, amely 1 és 12 közötti számokat fogad el, és megjeleníti a hónap nevét. Például 3-at kap; a „March” feliratnak kell megjelennie.

1. lépés) Hozza létre a felhasználói felület projektet

Lépjen a Fájl->Új->Egyéb-> menüpontraSAPUI5 Alkalmazásfejlesztés->Alkalmazásprojekt.

Hozzon létre egy alkalmazási projektet a számára SAPUI5 a megnyíló varázsló követésével. Lásd az alábbi képernyőképet.

Írja be a projekt nevét, és hagyja, hogy a többi kijelölés ugyanaz maradjon, mint a varázsló által javasolt.

A fenti képernyőképen 2 típusú könyvtár látható rádiógombként

sap.m
sap.ui.commons

Ha kiválasztja az sap.m elemet, akkor azt utasítja a varázslónak, hogy hozzon létre egy UI5 alkalmazásprojektet, amelynek rendszerindító szakasza automatikusan tartalmazza a sap.m könyvtárat, amely egy reszponzív webalkalmazás létrehozására szolgál.

Következő ebben SAP A FIORI oktatóprogramjában a varázsló alábbi szakasza látható, ahol létre kell hoznia a kezdeti nézetet. A kezdeti nézet olyan nézet, amely először jelenik meg az alkalmazás elérésekor.

Itt meg kell adni a nézet nevét és kiválasztani a nézet típusát. SAPAz UI5 4 nézettípust támogat, amint az a fenti képernyőn látható. Tehát a felhasználói felület a SAPUI5 alkalmazás építhető a segítségével Javascript vagy XML ill JSON vagy HTML, amelyik nyelvet jól ismeri.

A varázsló végén egy új projekt jön létre, és megjelenik a Project Explorer ablakában Eclipse mint lent.

2. lépés: Component.js kód

Ezután hozzunk létre egy Component.js fájlt, és írjuk be az alábbi kódot.

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");

  
  },
});

3. lépés) Index.html kód

Ezután mondjuk ki az index.html fájlt a Component.js betöltéséhez SAPUI5, ha az alkalmazást a böngészőből érik el. Tehát írja be az alábbi kódot az index.html fájlba.

<!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>

4. lépés: DisplayMonthView.view.xml kód

Ezután írjunk kódot a displaymonth nézetünkbe, amely megjeleníti azt a hónapot, amelynek hónapszámát a szülőkomponenstől kaptuk.

<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>

A fenti kód beillesztése után a nézetnek az alábbiak szerint kell kinéznie:

5. lépés: DisplayMonthView.controller.js kód

És végül írjuk meg a DisplayMonthView Controller fájljának kódját.

A kód csak a vezérlő onInit() hook metódusában van írva, ezért csak az onInit() kódot kell ide beilleszteni. A fájl többi része a keretrendszer által generált.

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);
	},

6. lépés) Az alkalmazás üzembe helyezése SAP Netweaver Gateway Server

Telepítse a projektet, és adja meg annak a BSP-alkalmazásnak a műszaki nevét, amely az ABAP előtér-kiszolgálón lesz előállítva. Legyen a név zdisplay hónap. Ezen a ponton a pályázati projektnek az alábbiak szerint kell kinéznie.

2. RÉSZ) Szülőkomponens létrehozása

Most itt az ideje, hogy hozzon létre egy új komponenst (szülőkomponens), amely felhasználja az oktatóanyagban eddig létrehozott komponenst.

1. lépés) Hozzon létre egy újat SAPUI5 alkalmazás

Lépjen a Fájl->Új->Egyéb-> menüpontraSAPUI5 Alkalmazásfejlesztés->Alkalmazásprojekt. Ezután kövesse a varázsló utasításait az új létrehozásához SAPUI5 alkalmazásprojekt. Ezt a fenti oktatóanyag 1. részének 1. lépésében részletesen leírtuk.

A szülő komponens projekt neve PassNum. És a telepítés után generált BSP-alkalmazás műszaki neve SAPAz ABAP frontend szerver UI5 összetevője zpassnum. A projekt felépítése az alábbiak szerint fog kinézni

Most írjunk kódot index.html, Component.js és PassNum.view.xml és PassNum.controller.js fájlba

2. lépés) A szülőkomponens Index.html forráskódja

<!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>

3. lépés) A szülőkomponens Component.js fájljának forráskódja

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");
 
  },
});

4. lépés) A PassNum.view.xml fájl forráskódja

<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>

Miután a fenti kódot használta a nézetben, a nézetnek az alábbiak szerint kell kinéznie

5. lépés) A PassNum.controller.js forráskódja

Csak az onInit() metódus módosult. Minden más ebben a fájlban változatlan marad

onInit: function() {

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

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

6. lépés) A szülő komponens telepítése ide SAP Netweaver Gateway Server

Telepítse az alkalmazást az ABAP előtér-kiszolgálón, és futtassa. Úgy kell futtatnia, hogy jobb gombbal a projektre kattint, majd a „Futtatás az ABAP szerveren” opcióra kattint.

Az alábbi URL megnyílik az eclipse böngészőben.
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html

Másolja ki az URL-t, és futtassa a tényleges böngészőben. A fenti sárgával jelölt gazdagépnévben az ABAP frontend szerver gazdagépneve látható.

teljesítmény

Kattintson az "Első" gombra, a januárnak meg kell jelennie a Gyermek komponensben.

Élvezze a gyönyörű, érzékeny webalkalmazások létrehozását SAPUI5.

Összegzésként

Ebben SAPUI5 oktatóanyag, megtanultuk:

SAPAz UI5 feltárása: SAPAz UI5 a legújabb a sorozatban SAP UI fejlesztési technológiák.
Mi a SAP UI5: SAPAz UI5 olyan könyvtárak halmaza, amelyek reszponzív webalkalmazások létrehozására szolgálnak
A SAPAz UI5 architektúrája a következő: Eszközök, Ügyfél, NetWeaver Gateway, Persistence Layer
A SAPAz UI5 komponens egy működő kód, amelyet szükség esetén újra felhasználnak
Típusok SAPAz UI5 komponensek 1) UI komponensek, 2) arc nélküli összetevők
Megtanultuk, hogyan lehet egy sapui5 komponenst egy másik sapui5 komponensbe felhasználni, és hogyan lehet adatokat átadni a két komponens között