SAPTutorial UI5 pentru începători: Ce este Fiori cu exemple

Ce Este SAPUI5?

SAPIU5 este un set de biblioteci pentru a construi aplicații web receptive care rulează pe mai multe dispozitive precum desktop, mobil și tabletă. SAPUI5 funcționează Conceptul MVC pentru a accelera ciclul de dezvoltare prin crearea de date, logica de afaceri și reprezentarea datelor separat pe vizualizare. Astfel, dezvoltarea vizualizării și controlorului poate avea loc independent pentru a crea modele (containere de date).

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 Architectura, prima casetă, adică „Dispozitive” indică dispozitivele pe care rulează aplicațiile UI5. Aplicațiile UI5 pot fi accesate printr-o aplicație mobilă sau orice browser de pe aceste dispozitive. Acest strat al arhitecturii se numește „Strat de prezentare”.

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

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

SAPComponenta UI5

O componentă este o bucată de cod de lucru care este reutilizată oriunde este necesar. Există 2 tipuri de componente furnizate de SAPIU5

Componente UI – Acestea reprezintă o interfață cu utilizatorul care conține elemente UI. Acestea se bazează pe clasa SPAUI5 numită sap.ui.core.UIComponent
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 aplicația UI5 să se comporte ca o componentă. Fișierul Component.js este controlerul componentei.

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

Eclipse (versiunea Luna) este instalată pe laptop
SAP Instrumente de dezvoltare pentru Eclipse Luna și instalat pe eclipsa ta (SAP Instrumente de dezvoltare pentru Eclipse Luna - https://tools.hana.ondemand.com/luna/)
SAP Blocul de conectare este instalat și aveți acces la SAP Sistem NetWeaver Gateway pentru implementarea și testarea acestei aplicații pe care o vom construi în acest blog.

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

În acest SAPGhid de tutoriale UI5, vom crea 2 componente și anume Componenta părinte și Componenta copil. În primul rând, 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ă Child care să accepte un număr de la 1 la 12 și să afișeze numele lunii. De exemplu, primește 3; ar trebui să afișeze „Martie”.

Pasul 1) Creați proiectul UI

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

Creați un proiect de aplicație pentru SAPUI5 urmând vrăjitorul care se deschide. Vedeți captura de ecran de mai jos.

Introduceți numele proiectului, lăsați celelalte selecții să rămână aceleași cu cele sugerate de expert.

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

sap.m
sap.ui.commons

Când selectați sap.m, îi spuneți vrăjitorului să creeze un proiect de aplicație UI5 a cărui secțiune de bootstrap va include automat biblioteca sap.m care este menită să creeze o aplicație web receptivă.

Următorul în asta SAP Tutorial FIORI, veți vedea mai jos secțiunea expertului în care trebuie să creați vizualizarea inițială. O vizualizare inițială este o vizualizare care va fi redată mai întâi când este accesată aplicația.

Aici trebuie să dați numele vizualizării și să selectați tipul vizualizării. 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, indiferent de limba 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

Apoi, să creăm un fișier Component.js și să scriem mai jos codul î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

Apoi, să spunem fișierul index.html în care să încărcăm Component.js SAPUI5 când aplicația este accesată din browser. Deci, scrieți mai jos codul î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, permiteți-ne să scriem codul în afișarea lunii, care va afișa luna al cărei număr de lună 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 inserat codul de mai sus, vizualizarea dvs. ar trebui să arate ca mai jos -

Pasul 5) Codul DisplayMonthView.controller.js

Și, în sfârșit, să scriem codul fișierului Controller DisplayMonthView.

Codul este scris doar în metoda onInit() hook a acestui controler, prin urmare lipindu-se aici doar codul onInit(). Restul fișierului este așa cum este generat de cadru.

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 Netweaver Gateway Server

Implementați proiectul și dați numele tehnic al aplicației BSP care va fi generată pe serverul frontend ABAP. Să fie numele zdisplaymonth. În acest moment, proiectul dvs. de aplicație ar trebui să arate ca mai jos.

PARTEA 2) Crearea unei componente părinte

Acum este momentul să creați o nouă Componentă (Parent Component) care va consuma Componenta pe care am creat-o până acum în acest tutorial.

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

Accesați Fișier->Nou->Altul->SAPDezvoltare aplicație UI5->Proiect de aplicație. Apoi urmați instrucțiunile asistentului pentru a crea noi 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 PassNum. Și numele tehnic al aplicației BSP generat după implementarea SAPComponenta UI5 pentru serverul frontend ABAP este zpassnum. Structura proiectului va arăta ca mai jos

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

Pasul 2) Codul sursă al 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 dvs. ar trebui să arate ca mai jos

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

Doar metoda onInit() a fost schimbată. Orice altceva din acest fișier rămâne același

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 Netweaver Gateway Server

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

Adresa URL de mai jos se va deschide în browserul Eclipse.
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html

Copiați URL-ul și rulați-l în browserul actual. În numele de gazdă de mai sus marcat cu galben se află numele de gazdă al serverului dvs. frontend ABAP.

producție

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

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

Rezumat

În acest SAPTutorial UI5, am învățat:

SAPUI5 explorat: SAPUI5 este cel mai recent din seria SAP tehnologii de dezvoltare a UI.
Ce Este SAP UI5: SAPUI5 este un set de biblioteci care este folosit pentru a construi aplicații web responsive
Componente ale SAPArhitectura UI5 este Devices, Client, NetWeaver Gateway, Persistence Layer
A SAPUI5 Component este o bucată de cod de lucru care este reutilizată oriunde este necesar
Tipuri de SAPComponentele UI5 sunt 1) Componente UI, 2) Componente fără față
Am aflat despre consumul unei componente sapui5 într-o altă componentă sapui5 și despre trecerea datelor între cele două componente