SAPUI5-opplæring for nybegynnere

Hva er SAPUI5?

SAPIU5 er et sett med biblioteker for å bygge responsive nettapplikasjoner som kjører på flere enheter som skrivebord, mobil og nettbrett. SAPUI5 fungerer på MVC konsept å akselerere utviklingssyklusen ved å lage data, forretningslogikk og representasjon av data separat på visningen. Så utviklingen av visning og kontroller kan skje uavhengig for å lage modeller (databeholdere).

SAPUI5 er den siste i rekken av SAP UI-utviklingsteknologier. For å gi webintegrasjon for det underliggende SAP ERP system, SAP kom opp med flere UI-utviklingsteknologier som BSP (Business server pages), PDK (Portal Development Kit), Web Dynpro Java, Web Dynpro ABAP. Og etterfølgeren til Web Dynpro ABAP er SAPUI5.

SAPIU5 Architecture

SAPUI ArchiTecture Diagram

I det ovennevnte Architecture, first box, dvs. 'Devices' indikerer enhetene som UI5-applikasjoner kjøres på. UI5-applikasjoner kan nås via en mobilapp eller hvilken som helst nettleser på disse enhetene. Dette laget av arkitekturen kalles "Presentation Layer".

SAPUI5-applikasjoner og oData-tjenester ligger på SAP NetWeaver Gateway Server. Dette laget av arkitekturen kalles "Application Layer".

Faktisk forretningslogikk er implementert i SAP kjernesystemer som ECC, CRM og BW, etc.... Forretningslogikk kan implementeres ved hjelp av SAP programmer og funksjonsmoduler. SAP transaksjons- og masterdata ligger på SAP systemer. Dette laget av arkitekturen kalles "Database Layer" eller "Persistence Layer".

SAPUI5-komponent

En komponent er et stykke arbeidskode som gjenbrukes der det er nødvendig. Det er 2 typer komponenter levert av SAPIU5

UI-komponenter – Disse representerer et brukergrensesnitt som inneholder UI-elementer. Disse er basert på SPAUI5-klassen kalt sap.ui.core.UIComponent
Ansiktsløse komponenter – Disse har ikke et brukergrensesnitt. Disse er basert på SAPUI5-klassen kalt sap.ui.core.Component

I hovedsak er en komponent en mappe. Når du oppretter en ny SAPUI5-applikasjonen, vil du kunne se en mappestruktur opprettet i prosjektutforskeren som nedenfor.

I denne UI5-applikasjonen er PassNum en komponent. Component.js-filen er obligatorisk for at UI5-applikasjonen skal oppføre seg som en komponent. Component.js-filen er komponentkontrolleren.

Neste i dette SAPIU5 Eclipse veiledning, vil vi lære hvordan du konfigurerer SAPUI5.

SAPUI5 oppsett

Før vi starter, må du sørge for at –

Eclipse (Luna-versjon) er installert på den bærbare datamaskinen
SAP Utviklingsverktøy for Eclipse Luna og installert på formørkelsen din (SAP Utviklingsverktøy for Eclipse Luna - https://tools.hana.ondemand.com/luna/)
SAP Påloggingspute er installert, og du har tilgang til SAP NetWeaver Gateway-system for distribusjon og testing på denne applikasjonen som vi skal bygge i denne bloggen.

Etter at applikasjonen er ferdig bygget, skal den se slik ut:

I dette SAPUI5 tutorials guide, vil vi lage 2 komponenter, nemlig Parent Component og Child Component. Først vil vi opprette underordnet komponent og deretter bruke den i overordnet komponent.

La oss begynne å skitne på hendene.

Del 1) Opprett underordnet søknad

Målet vårt er å lage en underordnet komponent som godtar et tall fra 1 til 12 og viser månedens navn. For eksempel mottar den 3; den skal vise 'Mars'.

Trinn 1) Opprett UI-prosjektet

Gå til Fil->Ny->Annet->SAPUI5 applikasjonsutvikling->applikasjonsprosjekt.

Lag et søknadsprosjekt for SAPUI5 ved å følge veiviseren som åpnes. Se skjermbilde nedenfor.

Skriv inn navnet på prosjektet, la de andre valgene forbli de samme som foreslått av veiviseren.

I skjermbildet ovenfor er det 2 typer biblioteker vist som radioknapper

sap.m
sap.ui.commons

Når du velger sap.m, ber du veiviseren om å lage et UI5-applikasjonsprosjekt hvis bootstrap-seksjon automatisk vil inkludere sap.m-biblioteket som er ment for å lage en responsiv webapplikasjon.

Neste i dette SAP FIORI-opplæringen, vil du se under delen av veiviseren der du trenger å lage den første visningen. En innledende visning er en visning som gjengis først når applikasjonen åpnes.

Her må du oppgi navnet på visningen og velge type visning. SAPUI5 støtter 4 typer visning som tydelig på skjermen ovenfor. Så brukergrensesnittet til en SAPUI5-applikasjonen kan bygges ved hjelp av Javascript eller XML eller JSON eller HTML, hvilket språk du er komfortabel med.

På slutten av veiviseren vil et nytt prosjekt bli opprettet og vist i Project Explorer-vinduet Eclipse som nedenfor.

Trinn 2) Component.js-kode

La oss deretter lage en Component.js-fil og skrive koden nedenfor i den.

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

  
  },
});

Trinn 3) Index.html-kode

La oss deretter fortelle index.html-filen som skal lastes inn Component.js SAPUI5 når applikasjonen åpnes fra nettleseren. Så skriv under koden i index.html filen.

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

Trinn 4) DisplayMonthView.view.xml-kode

La oss deretter skrive kode i vår visningsmånedsvisning som viser måneden hvis månedsnummer er mottatt fra den overordnede komponenten.

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

Etter at du har limt inn koden ovenfor, skal visningen din se ut som nedenfor-

Trinn 5) DisplayMonthView.controller.js-kode

Og til slutt, la oss skrive koden til DisplayMonthViews Controller-fil.

Koden skrives kun i onInit()-hookmetoden til denne kontrolleren, og limer derfor kun inn onInit()-koden her. Resten av filen er som generert av rammeverket.

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

Trinn 6) Implementering av applikasjonen på SAP Netweaver Gateway Server

Distribuer prosjektet og gi det tekniske navnet på BSP-applikasjonen som vil bli generert på ABAP-grensesnittserveren. La navnet være zdisplaymonth. På dette tidspunktet skal søknadsprosjektet ditt se ut som nedenfor.

DEL 2) Opprette en overordnet komponent

Nå er det på tide å lage en ny komponent (foreldrekomponent) som vil konsumere komponenten vi har laget så langt i denne opplæringen.

Trinn 1) Opprett en ny SAPUI5-applikasjon

Gå til Fil->Ny->Annet->SAPUI5 applikasjonsutvikling->applikasjonsprosjekt. Følg deretter veiviserens instruksjoner for å opprette ny SAPUI5 søknadsprosjekt. Dette er beskrevet i detalj i trinn 1 av del 1 i denne opplæringen ovenfor.

Navnet på det overordnede komponentprosjektet er Passnummer. Og det tekniske navnet på BSP-applikasjonen generert etter distribusjon av SAPUI5 komponent til ABAP frontend server er zpassnum. Prosjektstrukturen vil se ut som nedenfor

La oss nå skrive kode i index.html, Component.js og PassNum.view.xml og PassNum.controller.js filer

Trinn 2) Kildekoden til Index.html for den overordnede komponenten

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

Trinn 3) Kildekoden til Component.js-filen til overordnet komponent

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

Trinn 4) Kildekoden til filen 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>

Etter at du har brukt koden ovenfor i visningen din, skal visningen din se ut som nedenfor

Trinn 5) Kildekoden til PassNum.controller.js

Bare onInit()-metoden er endret. Alt annet i denne filen forblir det samme

onInit: function() {

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

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

Trinn 6) Distribusjon av overordnet komponent til SAP Netweaver Gateway Server

Distribuer applikasjonen på ABAP frontend-server og kjør den. Du skal kunne kjøre det ved å høyreklikke på prosjektet og klikke på alternativet "Kjør på ABAP-server".

Nedenfor URL vil åpne opp i Eclipse-nettleseren.
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html

Kopier URL-en og kjør den i den faktiske nettleseren. I vertsnavnet ovenfor er merket med gult vertsnavnet til din ABAP-grensesnittserver.

Produksjon

Klikk på "Først"-knappen, januar skal vises i underordnet komponent.

Nyt å lage vakre, responsive nettapplikasjoner ved å bruke SAPUI5.

Sammendrag

I dette SAPUI5-opplæringen, vi har lært:

SAPUI5 utforsket: SAPUI5 er den siste i rekken av SAP UI-utviklingsteknologier.
Hva er SAP UI5: SAPUI5 er et sett med biblioteker som brukes til å bygge responsive webapplikasjoner
Komponenter av SAPUI5-arkitekturen er Devices, Client, NetWeaver Gateway, Persistence Layer
A SAPUI5 Component er et stykke arbeidskode som gjenbrukes der det er nødvendig
Typer av SAPUI5-komponenten er 1) UI-komponenter, 2) Ansiktsløse komponenter
Vi lærte om å konsumere en sapui5-komponent til en annen sapui5-komponent og overføre data mellom de to komponentene