SAPUI5 Tutorial for begyndere: Hvad er Fiori med eksempler

Hvad er SAPUI5?

SAPUI5 er et sæt biblioteker til at bygge responsive webapplikationer, der kører på flere enheder som desktop, mobil og tablet. SAPUI5 virker på MVC koncept at accelerere udviklingscyklussen ved at skabe data, forretningslogik og repræsentation af data separat på visningen. Så udviklingen af ​​view og controller kan foregå uafhængigt for at skabe modeller (datacontainere).

SAPUI5 er den seneste i rækken af ​​SAP UI-udviklingsteknologier. For at levere webintegration til det underliggende SAP ERP-system kom SAP med flere UI-udviklingsteknologier som BSP (Business server pages), PDK (Portal Development Kit), Web Dynpro Java, Web Dynpro ABAP. Og efterfølgeren til Web Dynpro ABAP er SAPUI5.

SAPUI5 Architecture

SAPUI5 Architecture
SAPUI5 Architecture

SAPUI Architecture diagram

I ovenstående Architecture, først box, dvs. 'Enheder' angiver de enheder, som UI5-applikationer kører på. UI5-applikationer kan tilgås via en mobilapp eller en hvilken som helst browser på disse enheder. Dette lag af archiTecture kaldes 'Presentation Layer'.

SAPUI5-applikationer og oData-tjenester findes på SAP NetWeaver Gateway Server. Dette lag af architecture kaldes 'Application Layer'.

Faktisk forretningslogik er implementeret i SAP-kernesystemer som ECC, CRM og BW osv.... Forretningslogik kan implementeres ved hjælp af SAP-programmer og funktionsmoduler. SAP transaktions- og stamdata ligger på SAP-systemer. Dette lag af architecture kaldes 'Database Layer' eller 'Persistence Layer.'

SAPUI5 komponent

En komponent er et stykke arbejdskode, der genbruges, hvor det er nødvendigt. Der er 2 typer komponenter leveret af SAPUI5

  1. UI-komponenter – Disse repræsenterer en brugergrænseflade, der indeholder UI-elementer. Disse er baseret på SPAUI5 klasse kaldet sap.ui.core.UIComponent
  2. Ansigtsløse komponenter – Disse har ikke en brugergrænseflade. Disse er baseret på SAPUI5-klassen kaldet sap.ui.core.Component

Grundlæggende er en komponent en mappe. Når du opretter en ny SAPUI5-applikation, vil du kunne se en mappestruktur oprettet i din projektstifinder som nedenfor.

SAPUI5 komponent

I denne UI5-applikation er PassNum en komponent. Component.js-filen er obligatorisk for at UI5-applikationen opfører sig som en komponent. Component.js-filen er komponentcontrolleren.

Næste i denne SAPUI5 Eclipse tutorial, vil vi lære, hvordan du opsætter SAPUI5.

SAPUI5 opsætning

Før vi starter, skal du sikre dig, at –

  1. Eclipse (Luna version) er installeret på din bærbare computer
  2. SAP Udviklingsværktøjer til Eclipse Luna og installeret på din eclipse (SAP-udviklingsværktøjer til Eclipse Luna - https://tools.hana.ondemand.com/luna/)
  3. SAP Logon Pad er installeret, og du har adgang til SAP NetWeaver Gateway-system til implementering og test af denne applikation, som vi skal bygge i denne blog.

Når applikationen er færdigbygget, skal den se ud som nedenfor:

SAPUI5 opsætning

I denne SAPUI5 vejledning vil vi oprette 2 komponenter, nemlig forældrekomponent og børnekomponent. Først vil vi oprette Child Component og derefter forbruge den i Parent Component.

Lad os begynde at få hænderne snavsede.

Del 1) Opret underordnet ansøgning

Vores mål er at skabe en børnekomponent, der accepterer et tal fra 1 til 12 og viser månedens navn. For eksempel modtager den 3; den skulle vise 'marts'.

Trin 1) Opret UI-projektet

Gå til Filer->Ny->Andet->SAPUI5-applikationsudvikling->applikationsprojekt.

Opret UI-projektet

Opret et ansøgningsprojekt til SAPUI5 af following guiden, der åbner. Se skærmbillede nedenfor.

Opret UI-projektet

Indtast navnet på projektet, lad de andre valg forblive de samme som foreslået af guiden.

Opret UI-projektet

I ovenstående skærmbillede er der 2 typer biblioteker displayed som radioknapper

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

Når du vælger sap.m, beder du guiden om at oprette et UI5-applikationsprojekt, hvis bootstrap-sektion automatisk vil inkludere sap.m-bibliotek, som er beregnet til at skabe en responsiv webapplikation.

Næste i denne SAP FIORI tutorial vil du se nedenstående sektion af guiden, hvor du skal oprette den første visning. En indledende visning er en visning, der først gengives, når applikationen åbnes.

Opret UI-projektet

Her skal du angive navnet på visningen og vælge type visning. SAPUI5 understøtter 4 typer visninger, som det fremgår af ovenstående skærm. Så brugergrænsefladen for en SAPUI5-applikation kan bygges ved hjælp af Javascript eller XML eller JSON eller HTML, hvilket sprog du er fortrolig med.

I slutningen af ​​guiden vil et nyt projekt blive oprettet og vistyed i vinduet Project Explorer Eclipse som nedenfor.

Opret UI-projektet

Trin 2) Component.js-kode

Lad os derefter oprette en Component.js-fil og skrive nedenstående kode 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");

  
  },
});

Trin 3) Index.html-kode

Lad os derefter fortælle, at index.html-filen skal indlæse Component.js i SAPUI5, når applikationen tilgås fra browseren. Så skriv nedenstående kode 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>

Trin 4) DisplayMonthView.view.xml-kode

Lad os derefter skrive kode i vores displaymånedsvisning, som viser den måned, hvis månedsnummer er modtaget fra den overordnede komponent.

<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 indsat ovenstående kode, skal din visning se ud som nedenfor-

DisplayMonthView.view.xml-kode

Trin 5) DisplayMonthView.controller.js-kode

Og endelig, lad os skrive koden til DisplayMonthViews Controller-fil.

Koden er kun skrevet i onInit() hook-metoden for denne controller, og indsætter derfor kun onInit()-koden her. Resten af ​​filen er som genereret af rammen.

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

Trin 6) Implementering af applikationen på SAP Netweaver Gateway Server

Implementer projektet og giv det tekniske navn på BSP-applikationen, som vil blive genereret på ABAP-frontend-serveren. Lad navnet være zdisplaymåned. På dette tidspunkt skal dit ansøgningsprojekt se ud som nedenfor.

SAP Netweaver Gateway Server

DEL 2) Oprettelse af en overordnet komponent

Nu er det tid til at oprette en ny komponent (forældrekomponent), som vil forbruge den komponent, vi har oprettet indtil videre i denne vejledning.

Trin 1) Opret en ny SAPUI5-applikation

Gå til Filer->Ny->Andet->SAPUI5-applikationsudvikling->applikationsprojekt. Følg derefter guidens instruktioner for at oprette et nyt SAPUI5-applikationsprojekt. Dette er blevet beskrevet detaljeret i trin 1 i del 1 i denne øvelse ovenfor.

Navnet på det overordnede komponentprojekt er PassNum. Og det tekniske navn på BSP-applikationen, der blev genereret efter implementering af SAPUI5-komponenten til ABAP-frontend-serveren er zpassnum. Projektstrukturen vil se ud som nedenfor

Opret en ny SAPUI5-applikation

Lad os nu skrive kode i index.html, Component.js og PassNum.view.xml og PassNum.controller.js filer

Trin 2) Kildekode for Index.html for den overordnede komponent

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

Trin 3) Kildekoden til Component.js-filen til 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");
 
  },
});

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

Når du har brugt ovenstående kode i din visning, skal din visning se ud som nedenfor

Kildekoden til filen PassNum.view.xml

Trin 5) Kildekoden for PassNum.controller.js

Kun onInit()-metoden er blevet ændret. Alt andet i denne fil forbliver det samme

onInit: function() {

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

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

Trin 6) Implementering af overordnet komponent til SAP Netweaver Gateway Server

Implementer applikationen på ABAP-frontend-serveren og kør den. Du bør være i stand til at køre det ved at højreklikke på projektet og klikke på 'Kør på ABAP-server' mulighed.

Implementering af overordnet komponent til SAP Netweaver Gateway Server

Nedenstående URL vil åbne op i eclipse browser.
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html

Kopier URL'en og kør den i den faktiske browser. I ovenstående værtsnavn markeret med gult er værtsnavnet på din ABAP-frontend-server.

Produktion

SAP Netweaver Gateway Server Output

Klik på knappen 'Først', januar skal vises i underordnet komponent.

SAP Netweaver Gateway Server Output

Nyd at skabe smukke, responsive webapplikationer ved hjælp af SAPUI5.

Resumé

I denne SAPUI5 tutorial har vi lært:

  • SAPUI5 udforsket: SAPUI5 er den seneste i rækken af ​​SAP UI-udviklingsteknologier.
  • Hvad er SAP UI5: SAPUI5 er et sæt biblioteker, der bruges til at bygge responsive webapplikationer
  • Komponenter af SAPUI5 architecture er Devices, Client, NetWeaver Gateway, Persistence Layer
  • En SAPUI5-komponent er et stykke arbejdskode, der genbruges, hvor det er nødvendigt
  • Typer af SAPUI5-komponenter er 1) UI-komponenter, 2) Ansigtsløse komponenter
  • Vi lærte om at forbruge en sapui5-komponent til en anden sapui5-komponent og overføre data mellem de to komponenter