SAPUI5-handledning för nybörjare

Vad är SAPUI5?

SAPUI5 är en uppsättning bibliotek för att bygga responsiva webbapplikationer som körs på flera enheter som skrivbord, mobil och surfplatta. SAPUI5 fungerar MVC koncept att påskynda utvecklingscykeln genom att skapa data, affärslogik och representation av data separat på vyn. Så utvecklingen av view och controller kan ske oberoende för att skapa modeller (datacontainrar).

SAPUI5 är den senaste i serien av SAP UI-utvecklingsteknologier. För att tillhandahålla webbintegration för det underliggande SAP ERP-system, SAP kom med flera UI-utvecklingsteknologier som BSP (Business server pages), PDK (Portal Development Kit), Web Dynpro Java, Web Dynpro ABAP. Och efterträdaren till Web Dynpro ABAP är SAPUI5.

SAPUI5 Architecture

SAPUI ArchiTecture Diagram

I ovanstående Architecture, first box, dvs. 'Devices' indikerar de enheter som UI5-applikationer körs på. UI5-applikationer kan nås via en mobilapp eller vilken webbläsare som helst på dessa enheter. Detta lager av arkitekturen kallas 'Presentation Layer'.

SAPUI5-applikationer och oData-tjänster finns kvar SAP NetWeaver Gateway Server. Detta lager av arkitekturen kallas "Application Layer".

Verklig affärslogik implementeras i SAP kärnsystem som ECC, CRM och BW, etc... Affärslogik kan implementeras med hjälp av SAP program och funktionsmoduler. SAP transaktions- och stamdata finns kvar SAP system. Detta lager av arkitekturen kallas 'Databas Layer' eller 'Persistence Layer'.

SAPUI5-komponent

En komponent är en arbetskod som återanvänds där det behövs. Det finns 2 typer av komponenter som tillhandahålls av SAPUI5

UI-komponenter – Dessa representerar ett användargränssnitt som innehåller UI-element. Dessa är baserade på SPAUI5-klassen som kallas sap.ui.core.UIComponent
Ansiktslösa komponenter – Dessa har inget användargränssnitt. Dessa är baserade på SAPUI5-klass som heter sap.ui.core.Component

En komponent är i huvudsak en mapp. När du skapar en ny SAPUI5-applikation, kommer du att kunna se en mappstruktur skapad i din projektutforskare som nedan.

I denna UI5-applikation är PassNum en komponent. Component.js-filen är obligatorisk för att UI5-applikationen ska bete sig som en komponent. Component.js-filen är komponentkontrollanten.

Nästa i detta SAPUI5 Eclipse tutorial kommer vi att lära oss hur man ställer in SAPUI5.

SAPUI5-inställning

Innan vi börjar måste du se till att –

Eclipse (Luna-versionen) är installerad på din bärbara dator
SAP Utvecklingsverktyg för Eclipse Luna och installerad på din förmörkelse (SAP Utvecklingsverktyg för Eclipse Luna – https://tools.hana.ondemand.com/luna/)
SAP Inloggningsplattan är installerad och du har tillgång till SAP NetWeaver Gateway-system för distribution och testning av denna applikation som vi kommer att bygga i den här bloggen.

När applikationen är färdigbyggd bör den se ut så här:

I detta SAPUI5 handledning, kommer vi att skapa 2 komponenter, nämligen Parent Component och Child Component. Först skapar vi Child Component och konsumerar den sedan i Parent-komponenten.

Låt oss börja smutsa ner händerna.

Del 1) Skapa barnapplikation

Vårt mål är att skapa en barnkomponent som accepterar ett nummer från 1 till 12 och visar månadens namn. Till exempel får den 3; den ska visa "mars".

Steg 1) Skapa UI-projektet

Gå till Arkiv->Nytt->Övrigt->SAPUI5 Applikationsutveckling->Applikationsprojekt.

Skapa ett ansökningsprojekt för SAPUI5 genom att följa guiden som öppnas. Se skärmdump nedan.

Ange namnet på projektet, låt de andra valen förbli desamma som guiden föreslår.

I skärmdumpen ovan finns det två typer av bibliotek som visas som radioknappar

sap.m
sap.ui.commons

När du väljer sap.m, säger du åt guiden att skapa ett UI5-applikationsprojekt vars bootstrap-sektion automatiskt kommer att inkludera sap.m-biblioteket som är avsett för att skapa en responsiv webbapplikation.

Nästa i detta SAP FIORI-handledning, kommer du att se avsnittet nedan i guiden där du behöver skapa en första vy. En initial vy är en vy som renderas först när applikationen öppnas.

Här måste du ange namnet på vyn och välja typ av vyn. SAPUI5 stöder fyra typer av vyer, vilket framgår av ovanstående skärm. Så användargränssnittet för en SAPUI5-applikationen kan byggas med Javascript eller XML eller JSON eller HTML vilket språk du än är bekväm med.

I slutet av guiden kommer ett nytt projekt att skapas och visas i Project Explorer-fönstret i Eclipse som nedan.

Steg 2) Component.js-kod

Låt oss sedan skapa en Component.js-fil och skriva nedanstående kod 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");

  
  },
});

Steg 3) Index.html-kod

Låt oss sedan berätta för filen index.html att ladda Component.js i SAPUI5 när applikationen nås från webbläsaren. Så skriv nedanstående kod i filen 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>

Steg 4) DisplayMonthView.view.xml-kod

Låt oss sedan skriva kod i vår visningsmånadsvy som visar den månad vars månadsnummer tas emot från den överordnade 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>

När du har klistrat in ovanstående kod bör din vy se ut som nedan-

Steg 5) DisplayMonthView.controller.js-kod

Och slutligen, låt oss skriva koden för DisplayMonthViews Controller-fil.

Koden skrivs endast i onInit()-hookmetoden för denna styrenhet, därför klistras bara in onInit()-koden här. Resten av filen är som genererad av ramverket.

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

Steg 6) Implementering av applikationen på SAP Netweaver Gateway Server

Distribuera projektet och ange det tekniska namnet på BSP-applikationen som kommer att genereras på ABAP-gränssnittsservern. Låt namnet vara zdisplaymonth. Vid det här laget bör ditt ansökningsprojekt se ut som nedan.

DEL 2) Skapa en överordnad komponent

Nu är det dags att skapa en ny komponent (förälderkomponent) som kommer att förbruka den komponent som vi skapat hittills i denna handledning.

Steg 1) Skapa en ny SAPUI5-applikation

Gå till Arkiv->Nytt->Övrigt->SAPUI5 Applikationsutveckling->Applikationsprojekt. Följ sedan guidens instruktioner för att skapa en ny SAPUI5 applikationsprojekt. Detta har beskrivits i detalj i steg 1 i del 1 i denna handledning ovan.

Namnet på det överordnade komponentprojektet är PassNum. Och det tekniska namnet på BSP-applikationen som genereras efter utplacering av SAPUI5-komponent till ABAP frontend-server är zpassnum. Projektstrukturen kommer att se ut som nedan

Låt oss nu skriva kod i filerna index.html, Component.js och PassNum.view.xml och PassNum.controller.js

Steg 2) Källkod för Index.html för den överordnade 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>

Steg 3) Källkod för Component.js-filen för Parent Component

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

Steg 4) Källkoden för 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>

När du har använt ovanstående kod i din vy bör din vy se ut som nedan

Steg 5) Källkod för PassNum.controller.js

Endast metoden onInit() har ändrats. Allt annat i den här filen förblir detsamma

onInit: function() {

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

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

Steg 6) Distribution av överordnad komponent till SAP Netweaver Gateway Server

Distribuera applikationen på ABAP frontend-server och kör den. Du bör kunna köra det genom att högerklicka på projektet och klicka på alternativet "Kör på ABAP-server".

Nedan URL kommer att öppnas i webbläsaren Eclipse.
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html

Kopiera URL:en och kör den i den faktiska webbläsaren. I ovanstående värdnamn markerat med gult är värdnamnet för din ABAP-gränssnittsserver.

Produktion

Klicka på "Första"-knappen, januari ska visas i barnkomponenten.

Njut av att skapa vackra, responsiva webbapplikationer med hjälp av SAPUI5.

Sammanfattning

I detta SAPUI5 handledning, vi har lärt oss:

SAPUI5 utforskade: SAPUI5 är den senaste i serien av SAP UI-utvecklingsteknologier.
Vad är SAP UI5: SAPUI5 är en uppsättning bibliotek som används för att bygga responsiva webbapplikationer
Komponenter av SAPUI5-arkitekturen är Devices, Client, NetWeaver Gateway, Persistence Layer
A SAPUI5 Component är en bit arbetskod som återanvänds där det behövs
Typer av SAPUI5-komponenten är 1) UI-komponenter, 2) Ansiktslösa komponenter
Vi lärde oss om att konsumera en sapui5-komponent till en annan sapui5-komponent och skicka data mellan de två komponenterna