SAPTutorial UI5 pentru începători

SAPUI5 este cel mai recent din seria SAP tehnologii de dezvoltare a UI. Pentru a oferi integrare web pentru subiacent SAP sistem ERP, SAP a venit cu mai multe tehnologii de dezvoltare a UI, cum ar fi BSP (pagini server de afaceri), PDK (kit de dezvoltare portal), Web Dynpro Java, Web Dynpro ABAP. Și succesorul Web Dynpro ABAP este SAPUI5.

SAPIU5 Architectură

SAPUI ArchiDiagrama de tectură

În cele de mai sus ArchiTextură, prima casetă „Dispozitive” indică dispozitivele pe care rulează aplicațiile UI5. Aplicațiile UI5 ​​pot fi accesate prin intermediul unei aplicații mobile sau al oricărui browser. Acest strat se numește „Strat de prezentare”.

SAPAplicațiile UI5 ​​și serviciile oData se află pe SAP Server NetWeaver Gateway. Acest strat al arhitecturii se numește „Strat de aplicație”.

Logica de afaceri reală este implementată în SAP sisteme de bază precum ECC, CRM și BW. Logica de business poate fi implementată folosind SAP programe și module funcționale. SAP Datele tranzacționale și Master Data rezidă pe SAP sisteme. Acest strat se numește „Strat de bază de date” sau „Strat de persistență”.

SAPComponenta UI5

O componentă este o porțiune de cod reutilizabilă. Există 2 tipuri de componente furnizate de SAPUI5:

1. Componente UI – Acestea reprezintă o interfață utilizator care conține elemente UI. Acestea se bazează pe SAPClasa UI5 numită sap.ui.core.UIComponent
2. Componente fără față – Acestea nu au o interfață cu utilizatorul. Acestea se bazează pe SAPClasa UI5 numită sap.ui.core.Component

În esență, o componentă este un folder. Când creați un nou SAPAplicația UI5, veți putea vedea o structură de foldere creată în exploratorul de proiecte, ca mai jos.

În această aplicație UI5, PassNum este o componentă. Fișierul Component.js este obligatoriu pentru ca o aplicație UI5 ​​să se comporte ca o componentă.

Următorul în asta SAPIU5 Eclipse tutorial, vom învăța cum să setăm SAPUI5.

SAPConfigurare UI5

Înainte de a începe, trebuie să vă asigurați că:

1. Eclipse (versiunea Luna) este instalată pe laptop
2. SAP Instrumente de dezvoltare pentru Eclipse Luna sunt instalate pe Eclipse (SAP Instrumente de dezvoltare pentru Eclipse Luna - https://tools.hana.ondemand.com/luna/)
3. SAP Logon Pad este instalat și aveți acces la SAP Sistemul NetWeaver Gateway pentru implementarea și testarea aplicației pe care o vom construi în acest blog.

După ce aplicația este complet construită, ar trebui să arate ca mai jos:

În acest SAPÎn ghidul tutorialelor UI5, vom crea 2 componente numite Componentă Părinte și Componentă Copil. Mai întâi, vom crea Componenta Copil și apoi o vom consuma în componenta Părinte.

Să începem să ne murdărim mâinile.

Partea 1) Creați aplicație copil

Scopul nostru este să creăm o componentă copil care să accepte un număr de la 1 la 12 și să afișeze numele lunii. De exemplu, când primește 3, ar trebui să afișeze „Martie”.

Pasul 1) Creați proiectul UI

Accesați Fișier->Nou->Altul->SAPDezvoltare aplicații UI5->Proiect aplicație.

Creați un proiect de aplicație pentru SAPUI5 urmând instrucțiunile expertului. Vedeți captura de ecran de mai jos.

Introduceți numele proiectului și lăsați celelalte selecții așa cum sunt sugerate de expert.

În captura de ecran de mai sus, există 2 tipuri de biblioteci afișate ca butoane radio:

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

Când selectați sap.m, îi spuneți expertului să creeze un proiect de aplicație UI5 ​​a cărui secțiune bootstrap va include automat biblioteca sap.m, destinată creării de aplicații web responsive.

Următorul în asta SAP În tutorialul FIORI, veți vedea mai jos secțiunea asistentului unde trebuie să creați Vizualizarea inițială. O Vizualizare inițială este o vizualizare care va fi randată prima dată când aplicația este accesată.

Aici trebuie să specificați numele vizualizării și să selectați tipul acesteia. SAPUI5 acceptă 4 tipuri de vizualizare, după cum se vede pe ecranul de mai sus. Deci, interfața de utilizare a unui SAPAplicația UI5 poate fi construită folosind JavaScript sau XML sau JSON sau HTML, oricare limbaj cu care vă simțiți confortabil.

La sfârșitul expertului, un nou proiect va fi creat și afișat în fereastra Project Explorer a Eclipse ca mai jos.

Pasul 2) Codul Component.js

În continuare, haideți să creăm un fișier Component.js și să scriem codul de mai jos în el.

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


  },
});

Pasul 3) Codul Index.html

În continuare, să-i spunem fișierului nostru index.html să încarce Component.js atunci când aplicația este accesată. Scrieți codul de mai jos în fișierul 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>

Pasul 4) Codul DisplayMonthView.view.xml

Apoi, să scriem cod în vizualizarea noastră displaymonth pentru a afișa luna al cărei număr este primit de la componenta părinte.

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

După ce ați lipit codul de mai sus, vizualizarea ar trebui să arate ca mai jos.

Pasul 5) Codul DisplayMonthView.controller.js

Și în final, haideți să scriem codul fișierului Controller al DisplayMonthView.

Codul este scris doar în metoda hook onInit(), deci doar acesta este lipit aici. Restul fișierului este așa cum a fost generat de framework.

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

Pasul 6) Implementarea aplicației pe SAP Serverul NetWeaver Gateway

Implementați proiectul și specificați numele tehnic al aplicației BSP generate pe serverul frontend ABAP. Numele să fie zdisplaymonthProiectul tău ar trebui să arate ca mai jos.

PARTEA 2) Crearea unei componente părinte

Acum este momentul să creăm o nouă componentă (componentă părinte) care va consuma componenta creată până acum în acest tutorial.

Pasul 1) Creați un nou SAPAplicația UI5

Accesați Fișier->Nou->Altul->SAPDezvoltare aplicații UI5->Proiect aplicație. Apoi urmați instrucțiunile expertului pentru a crea un nou SAPProiect de aplicație UI5. Acest lucru a fost descris în detaliu în Pasul 1 al Părții 1 din acest tutorial de mai sus.

Numele proiectului Component părinte este Număr de parolăNumele tehnic al aplicației BSP generate după implementare este zpassnumStructura proiectului va arăta ca mai jos.

Să scriem acum cod în fișierele index.html, Component.js, PassNum.view.xml și PassNum.controller.js.

Pasul 2) Sursă Code din Index.html al componentei părinte

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

Pasul 3) Codul sursă al fișierului Component.js al componentei părinte

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

  },
});

Pasul 4) Codul sursă al fișierului 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>

După ce utilizați codul de mai sus în vizualizarea dvs., vizualizarea ar trebui să arate ca mai jos.

Pasul 5) Codul sursă al lui PassNum.controller.js

Doar metoda onInit() a fost modificată. Tot restul din acest fișier rămâne la fel.

onInit: function() {

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

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


	}

Pasul 6) Implementarea componentei părinte la SAP Serverul NetWeaver Gateway

Implementați aplicația pe serverul frontend ABAP și rulați-o. Ar trebui să o puteți rula făcând clic dreapta pe proiect și apoi pe opțiunea „Run on ABAP server”.

Cele de mai jos URL se va deschide în Eclipse browser-ul.
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html

copiaţi URL și rulați-l în browserul propriu-zis. În numele de gazdă de mai sus (marcat cu galben) se află numele de gazdă al serverului frontend ABAP.

producție

Faceți clic pe butonul „Primul”, iar ianuarie ar trebui să fie afișată în componenta copil.

Bucurați-vă de a crea aplicații web frumoase și receptive folosind SAPUI5.

Întrebări frecvente