SAPUI5 oktatóanyag kezdőknek

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 ArchiA struktúrában az első, „Eszközök” mező azokat az eszközöket jelöli, amelyeken az UI5 alkalmazások futnak. Az UI5 alkalmazások mobilalkalmazáson vagy bármilyen böngészőn keresztül érhetők el. Ezt a réteget „Megjelenítési rétegnek” nevezik.

SAPUI5 alkalmazások és oData szolgáltatások találhatók a SAP NetWeaver Gateway Server. Az architektúra ezen rétegét „alkalmazásrétegnek” nevezik.

A tényleges üzleti logika implementálva van SAP alapvető rendszerek, mint például az ECC, a CRM és a BW. Az üzleti logika a következőképpen valósítható meg: SAP programok és funkciómodulok. SAP tranzakciós és törzsadatai vannak SAP rendszerek. Ezt a réteget „Adatbázis rétegnek” vagy „Perzisztencia rétegnek” nevezik.

SAPUI5 komponens

A komponens egy újrafelhasználható kódrészlet. A komponensek kétféle típust biztosítanak: SAPUI5:

1. Felhasználói felület komponensei – Ezek egy felhasználói felületet képviselnek, amely felhasználói felület elemeket tartalmaz. Ezek a következőkön alapulnak: SAPsap.ui.core.UIComponent nevű UI5 osztály
2. Arc nélküli komponensek – Ezeknek nincs felhasználói felületük. Ezek a következőn 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 egy UI5 alkalmazás komponensként viselkedjen.

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

SAPUI5 beállítása

Mielőtt elkezdenénk, meg kell győződnünk arról, hogy:

1. Eclipse (Luna verzió) telepítve van a laptopjára
2. SAP Fejlesztési eszközök a Eclipse A Luna telepítve van a készülékeden Eclipse (SAP Fejlesztési eszközök a Eclipse luna – https://tools.hana.ondemand.com/luna/)
3. SAP A bejelentkezési panel telepítve van, és hozzáférhet a SAP NetWeaver Gateway rendszer a blogban fejlesztendő alkalmazás telepítéséhez és teszteléséhez.

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

Ebben SAPAz UI5 oktatóanyagok útmutatójában két komponenst fogunk létrehozni, szülőkomponenst és 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

A célunk egy olyan gyermekkomponens létrehozása, amely 1-től 12-ig terjedő számokat fogad el, és megjeleníti a hónap nevét. Például, ha 3-at kap, akkor a 'Március' értéket kell megjelenítenie.

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 varázsló követésével. Lásd az alábbi képernyőképet.

Írja be a projekt nevét, és hagyja a többi kijelölést a varázsló javaslata szerint.

A fenti képernyőképen kétféle könyvtár jelenik meg választógombként:

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

Amikor kiválasztja az sap.m fájlt, arra utasítja a varázslót, hogy hozzon létre egy UI5 alkalmazásprojektet, amelynek a bootstrap szakasza automatikusan tartalmazza az sap.m könyvtárat, amely reszponzív webes alkalmazások létrehozására szolgál.

Következő ebben SAP A FIORI oktatóanyagban a varázsló azon szakaszát látod, ahol létre kell hoznod a kezdeti nézetet. A kezdeti nézet az a nézet, amely először megjelenik az alkalmazás megnyitásakor.

Itt kell megadni a nézet nevét és kiválasztani a 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 JavaSzkript vagy XML, vagy JSON vagy HTML, attól függően, hogy melyik nyelvben érzed jól magad.

A varázsló végén egy új projekt jön létre, amely megjelenik a Projektböngésző ablakban. Eclipse mint lent.

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

Ezután hozzunk létre egy Component.js fájlt, és írjuk bele 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

Következő lépésként utasítsuk az index.html fájlunkat, hogy töltse be a Component.js-t, amikor az alkalmazáshoz hozzáférünk. Írjuk 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

Következő lépésként írjunk kódot a hónap megjelenítése nézetbe, hogy megjelenítsük a szülő komponenstől kapott hónap számát.

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

Miután beillesztetted a fenti kódot, a nézetednek így kell kinéznie, mint az alábbiakban látható.

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

Végül pedig írjuk meg a DisplayMonthView vezérlőfájljának kódját.

A kód csak az onInit() hook metódusban íródott, így csak az kerül ide beillesztésre. A fájl többi része a keretrendszer által generált módon történik.

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 átjárószerver

Telepítse a projektet, és adja meg az ABAP frontend szerveren generált BSP alkalmazás technikai nevét. Legyen a név a következő: zdisplay hónapA projektednek így kell kinéznie:

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

Most itt az ideje létrehozni egy új komponenst (Parent Component), amely felhasználja az ebben 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 egy ú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: JelszószámA telepítés után generált BSP alkalmazás technikai neve a következő. zpassnumA projekt felépítése az alábbiak szerint fog kinézni.

Írjunk most kódot az index.html, Component.js, PassNum.view.xml és PassNum.controller.js fájlokba.

2. lépés) Forrás Code a szülőkomponens Index.html fájljának

<!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áltad a nézetedben, a nézetednek az alábbiak szerint kell kinéznie.

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

Csak az onInit() metódus változott. A fájlban minden más változatlan maradt.

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 átjárószerver

Telepítsd az alkalmazást az ABAP előtétszerverre, és futtasd. A futtatásához kattints a projektre a jobb gombbal, majd válaszd a „Futtatás ABAP szerveren” opciót.

Az alábbi URL megnyílik majd a Eclipse böngészőt.
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html

Másolja a URL és futtassa a böngészőben. A fenti hostname (sárgával jelölve) az ABAP frontend szerver hostneve.

teljesítmény

Kattints az „Első” gombra, és a januárnak meg kell jelennie a gyermekkomponensben.

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

GYIK