SAPUI5-opetusohjelma aloittelijoille

SAPUI5 on sarjan uusin SAP Käyttöliittymän kehitysteknologiat. Tarjotakseen web-integraation taustalla SAP ERP-järjestelmä, SAP keksi useita käyttöliittymäkehitystekniikoita, kuten BSP (yrityspalvelinsivut), PDK (portaalin kehityspaketti), Web Dynpro Java, Web Dynpro ABAP. Ja Web Dynpro ABAP:n seuraaja on SAPUI5.

SAPIU5 Archirakenne

SAPUI Architecture Kaavio

Edellä ArchiRakenteessa ensimmäinen ruutu "Laitteet" osoittaa laitteet, joilla UI5-sovellukset toimivat. UI5-sovelluksiin pääsee käsiksi mobiilisovelluksen tai minkä tahansa selaimen kautta. Tätä kerrosta kutsutaan esityskerrokseksi.

SAPUI5-sovellukset ja oData-palvelut sijaitsevat SAP NetWeaver Gateway Server. Tätä arkkitehtuurikerrosta kutsutaan sovelluskerrokseksi.

Todellinen liiketoimintalogiikka on toteutettu SAP ydinjärjestelmät, kuten ECC, CRM ja BW. Liiketoimintalogiikka voidaan toteuttaa käyttämällä SAP ohjelmat ja toimintomoduulit. SAP tapahtuma- ja perustiedot sijaitsevat SAP järjestelmiin. Tätä kerrosta kutsutaan tietokantakerrokseksi tai pysyvyyskerrokseksi.

SAPUI5-komponentti

Komponentti on uudelleenkäytettävä koodipätkä. On olemassa kahdenlaisia ​​komponentteja, jotka tarjoavat SAPUI5:

1. Käyttöliittymäkomponentit – Nämä edustavat käyttöliittymäelementtejä sisältävää käyttöliittymää. Nämä perustuvat SAPUI5-luokka nimeltä sap.ui.core.UIComponent
2. Kasvottomat komponentit – Näillä ei ole käyttöliittymää. Ne perustuvat SAPUI5-luokka nimeltä sap.ui.core.Component

Pohjimmiltaan komponentti on kansio. Kun luot uuden SAPUI5-sovellus, voit nähdä projektinhallinnassasi luodun kansiorakenteen kuten alla.

Tässä UI5-sovelluksessa PassNum on komponentti. Component.js-tiedosto on pakollinen, jotta UI5-sovellus toimii komponentin tavoin.

Seuraavaksi tässä SAPIU5 Eclipse opetusohjelmassa, opimme määrittämään SAPUI5.

SAPUI5:n asennus

Ennen kuin aloitamme, sinun on varmistettava, että:

1. Eclipse (Luna-versio) on asennettu kannettavaan tietokoneeseen
2. SAP Kehitystyökalut Eclipse Luna on asennettu laitteeseesi Eclipse (SAP Kehitystyökalut Eclipse Luna - https://tools.hana.ondemand.com/luna/)
3. SAP Kirjautumisalusta on asennettu ja sinulla on pääsy siihen SAP NetWeaver Gateway -järjestelmä tässä blogissa rakennettavan sovelluksen käyttöönottoa ja testausta varten.

Kun sovellus on rakennettu kokonaan, sen pitäisi näyttää alla:

Tässä SAPUI5-tutoriaalien oppaassa luomme kaksi komponenttia nimeltä Pääkomponentti ja Lapsikomponentti. Ensin luomme Lapsikomponentin ja käytämme sitä sitten Pääkomponentissa.

Aletaan likaamaan käsiämme.

Osa 1) Luo lapsisovellus

Tavoitteenamme on luoda lapsikomponentti, joka hyväksyy numeron 1–12 ja näyttää kuukauden nimen. Esimerkiksi kun se vastaanottaa luvun 3, sen pitäisi näyttää 'maaliskuu'.

Vaihe 1) Luo käyttöliittymäprojekti

Mene Tiedosto->Uusi->Muu->SAPUI5 Sovelluskehitys->Sovellusprojekti.

Luo sovellusprojekti SAPUI5-asennusta ohjatun toiminnon avulla. Katso alla oleva kuvakaappaus.

Anna projektin nimi ja anna muiden valintojen pysyä ohjatun toiminnon ehdotusten mukaisesti.

Yllä olevassa kuvakaappauksessa on kahdenlaisia ​​kirjastoja, jotka näkyvät valintanappien muodossa:

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

Kun valitset sap.m:n, käsket ohjattua toimintoa luomaan UI5-sovellusprojektin, jonka käynnistysosio sisältää automaattisesti sap.m-kirjaston, joka on tarkoitettu responsiivisten verkkosovellusten luomiseen.

Seuraavaksi tässä SAP FIORI-opetusohjelmassa näet alla olevan ohjatun toiminnon osan, jossa sinun on luotava alkuperäinen näkymä. Alkuperäinen näkymä on näkymä, joka renderöidään ensimmäisenä, kun sovellusta käytetään.

Tässä sinun on annettava näkymän nimi ja valittava näkymän tyyppi. SAPUI5 tukee neljää näkymää, kuten yllä olevasta näytöstä käy ilmi. Joten käyttöliittymä a SAPUI5-sovellus voidaan rakentaa käyttämällä JavaSkripti tai XML tai JSON tai HTML, kumpi kieli sinulle sopii.

Ohjatun toiminnon lopussa luodaan uusi projekti, joka näkyy Project Explorer -ikkunassa. Eclipse kuten alla.

Vaihe 2) Component.js-koodi

Seuraavaksi luodaan Component.js-tiedosto ja kirjoitetaan siihen alla oleva koodi.

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


  },
});

Vaihe 3) Index.html-koodi

Seuraavaksi käsketään index.html-tiedostoa lataamaan Component.js, kun sovellusta käytetään. Kirjoita alla oleva koodi index.html-tiedostoon.

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

Vaihe 4) DisplayMonthView.view.xml-koodi

Kirjoitetaan seuraavaksi koodia näyttökuukausinäkymäämme näyttämään kuukausi, jonka numero on vastaanotettu pääkomponentilta.

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

Kun olet liittänyt yllä olevan koodin, näkymäsi pitäisi näyttää alla olevalta.

Vaihe 5) DisplayMonthView.controller.js-koodi

Ja lopuksi, kirjoitetaan DisplayMonthView'n Controller-tiedoston koodi.

Koodi kirjoitetaan vain onInit()-hook-metodilla, joten vain se liitetään tähän. Loput tiedostosta on sellaisena kuin framework sen on luonut.

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

Vaihe 6) Sovelluksen käyttöönotto SAP NetWeaver-yhdyskäytäväpalvelin

Ota projekti käyttöön ja anna ABAP-käyttöliittymäpalvelimella luodulle BSP-sovellukselle tekninen nimi. Olkoon nimi znäyttökuukausiProjektisi pitäisi näyttää alla olevalta.

OSA 2) Pääkomponentin luominen

Nyt on aika luoda uusi komponentti (pääkomponentti), joka käyttää tässä opetusohjelmassa tähän mennessä luomaamme komponenttia.

Vaihe 1) Luo uusi SAPUI5 sovellus

Mene Tiedosto->Uusi->Muu->SAPUI5 Sovelluskehitys->Sovellusprojekti. Luo sitten uusi noudattamalla ohjatun toiminnon ohjeita. SAPUI5-sovellusprojekti. Tämä on kuvattu yksityiskohtaisesti yllä olevan opetusohjelman osan 1 vaiheessa 1.

Yläkomponenttiprojektin nimi on PassNumKäyttöönoton jälkeen luodun BSP-sovelluksen tekninen nimi on zpassnumProjektin rakenne näyttää alla olevalta.

Kirjoitetaan nyt koodia index.html-, Component.js-, PassNum.view.xml- ja PassNum.controller.js-tiedostoihin.

Vaihe 2) Lähde Code Pääkomponentin Index.html-tiedostosta

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

Vaihe 3) Pääkomponentin Component.js-tiedoston lähdekoodi

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

  },
});

Vaihe 4) PassNum.view.xml-tiedoston lähdekoodi

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

Kun olet käyttänyt yllä olevaa koodia näkymässäsi, näkymäsi pitäisi näyttää alla olevalta.

Vaihe 5) PassNum.controller.js:n lähdekoodi

Vain onInit()-metodia on muutettu. Kaikki muu tässä tiedostossa pysyy samana.

onInit: function() {

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

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


	}

Vaihe 6) Pääkomponentin käyttöönotto kohteeseen SAP NetWeaver-yhdyskäytäväpalvelin

Asenna sovellus ABAP-käyttöliittymäpalvelimelle ja suorita se. Sinun pitäisi pystyä suorittamaan se napsauttamalla projektia hiiren kakkospainikkeella ja valitsemalla vaihtoehto 'Suorita ABAP-palvelimella'.

Alla URL avautuu vuonna Eclipse selain.
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html

Kopioi URL ja suorita se varsinaisessa selaimessa. Yllä oleva isäntänimi (merkitty keltaisella) on ABAP-käyttöliittymäpalvelimesi isäntänimi.

ulostulo

Napsauta 'Ensimmäinen'-painiketta, niin tammikuun pitäisi näkyä lapsikomponentissa.

Nauti kauniiden, responsiivisten verkkosovellusten luomisesta SAPUI5.

UKK