SAPTutorial UI5 per principianti

Cosa è SAPUI5?

SAPUI5 è un insieme di librerie per creare applicazioni Web reattive eseguibili su più dispositivi come desktop, dispositivi mobili e tablet. SAPL'interfaccia utente 5 funziona concetto MVC per accelerare il ciclo di sviluppo creando dati, logica aziendale e rappresentazione dei dati separatamente nella vista. Quindi lo sviluppo di view e controller può avvenire in modo indipendente per creare modelli (contenitori di dati).

SAPUI5 è l'ultimo della serie di SAP Tecnologie di sviluppo dell'interfaccia utente. Al fine di fornire l'integrazione web per il sottostante SAP sistema ERP, SAP ha ideato molteplici tecnologie di sviluppo dell'interfaccia utente come BSP (pagine del server aziendale), PDK (kit di sviluppo del portale), Web Dynpro Java, Web Dynpro ABAP. E il successore di Web Dynpro ABAP lo è SAPinterfaccia utente5.

SAPUI5 Architectura

SAPUI Archidiagramma della struttura

Nel sopra Architecture, prima casella, ovvero 'Dispositivi' indica i dispositivi su cui vengono eseguite le applicazioni UI5. È possibile accedere alle applicazioni UI5 tramite un'app mobile o qualsiasi browser su questi dispositivi. Questo livello dell'architettura è chiamato 'Presentation Layer'.

SAPLe applicazioni UI5 e i servizi oData risiedono su SAP NetWeaver Gateway Server. Questo livello dell'architettura è chiamato 'Application Layer'.

La logica aziendale effettiva è implementata in SAP sistemi core come ECC, CRM e BW, ecc.... La logica aziendale può essere implementata utilizzando SAP programmi e moduli funzionali. SAP transazionali e i dati anagrafici risiedono SAP sistemi. Questo livello dell'architettura è chiamato 'Livello database' o 'Livello persistenza'.

SAPComponente UI5

Un Componente è un pezzo di codice funzionante che viene riutilizzato ovunque sia necessario. Ci sono 2 tipi di componenti forniti da SAPUI5

Componenti dell'interfaccia utente: rappresentano un'interfaccia utente contenente elementi dell'interfaccia utente. Questi sono basati sulla classe SPAUI5 chiamata sap.ui.core.UIComponent
Componenti senza volto: non hanno un'interfaccia utente. Sono basati su SAPClasse UI5 denominata sap.ui.core.Component

Essenzialmente, un componente è una cartella. Quando crei un nuovo file SAPApplicazione UI5, sarai in grado di vedere una struttura di cartelle creata nel tuo esploratore di progetto come di seguito.

In questa applicazione UI5, PassNum è un componente. Il file Component.js è obbligatorio affinché l'applicazione UI5 si comporti come un componente. Il file Component.js è il controller del componente.

Il prossimo in questo SAPUI5 Eclipse tutorial, impareremo come configurare SAPinterfaccia utente5.

SAPConfigurazione dell'interfaccia utente5

Prima di iniziare, devi assicurarti che:

Eclipse (Versione Luna) è installata sul tuo laptop
SAP Strumenti di sviluppo per Eclipse Luna e installato sulla tua eclissi (SAP Strumenti di sviluppo per Eclipse Luna – https://tools.hana.ondemand.com/luna/)
SAP Il pannello di accesso è installato e puoi accedere a SAP Sistema NetWeaver Gateway per la distribuzione e il test su questa applicazione che costruiremo in questo blog.

Una volta creata completamente l'applicazione, dovrebbe apparire come di seguito:

In questa SAPGuida ai tutorial dell'interfaccia utente 5, creeremo 2 componenti, ovvero il componente principale e il componente figlio. Per prima cosa creeremo il componente figlio e poi lo utilizzeremo nel componente genitore.

Cominciamo a sporcarci le mani.

Parte 1) Crea un'applicazione secondaria

Il nostro obiettivo è creare un componente figlio che accetti un numero da 1 a 12 e visualizzi il nome del mese. Ad esempio, ne riceve 3; dovrebbe essere visualizzato "Marzo".

Passaggio 1) Crea il progetto dell'interfaccia utente

Vai su File->Nuovo->Altro->SAPSviluppo di applicazioni UI5->Progetto di applicazioni.

Creare un progetto di applicazione per SAPUI5 seguendo la procedura guidata che si apre. Vedere la schermata qui sotto.

Inserisci il Nome del progetto, lascia che le altre selezioni rimangano le stesse suggerite dalla procedura guidata.

Nello screenshot sopra, ci sono 2 tipi di librerie visualizzate come pulsanti di opzione

sap.m
sap.ui.commons

Quando selezioni sap.m, stai dicendo alla procedura guidata di creare un progetto di applicazione UI5 la cui sezione bootstrap includerà automaticamente la libreria sap.m destinata alla creazione di un'applicazione web reattiva.

Il prossimo in questo SAP Tutorial FIORI, vedrai la sezione seguente della procedura guidata in cui è necessario creare la vista iniziale. Una vista iniziale è una vista di cui verrà eseguito il rendering per prima quando si accede all'applicazione.

Qui è necessario fornire il nome della vista e selezionare il tipo di vista. SAPL'interfaccia utente5 supporta 4 tipi di visualizzazione, come evidente nella schermata sopra. Quindi l'interfaccia utente di a SAPL'applicazione UI5 può essere creata utilizzando Javascript o XML o JSON o HTML a seconda della lingua con cui ti senti a tuo agio.

Al termine della procedura guidata, verrà creato un nuovo progetto e visualizzato nella finestra Esplora progetti di Eclipse come sotto.

Passaggio 2) Codice Component.js

Successivamente, creiamo un file Component.js e scriviamo il codice seguente al suo interno.

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

  
  },
});

Passaggio 3) Codice Index.html

Successivamente, diciamo al file index.html in cui caricare Component.js SAPUI5 quando si accede all'applicazione dal browser. Quindi scrivi sotto il codice nel file 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>

Passaggio 4) Codice DisplayMonthView.view.xml

Successivamente, scriviamo il codice nella nostra vista displaymonth che visualizzerà il mese il cui numero del mese viene ricevuto dal componente principale.

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

Dopo aver incollato il codice sopra, la tua visualizzazione dovrebbe apparire come di seguito:

Passaggio 5) Codice DisplayMonthView.controller.js

Infine, scriviamo il codice del file Controller di DisplayMonthView.

Il codice è scritto solo nel metodo hook onInit() di questo controller, quindi incolla qui solo il codice onInit(). Il resto del file è generato dal 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);
	},

Passaggio 6) Distribuzione dell'applicazione su SAP Server gateway Netweaver

Distribuire il progetto e fornire il nome tecnico dell'applicazione BSP che verrà generata sul server frontend ABAP. Lascia stare il nome zdisplaymonth. A questo punto, il progetto della tua applicazione dovrebbe apparire come di seguito.

PARTE 2) Creazione di un componente genitore

Ora è il momento di creare un nuovo componente (componente principale) che consumerà il componente che abbiamo creato finora in questo tutorial.

Passaggio 1) Creane uno nuovo SAPApplicazione UI5

Vai su File->Nuovo->Altro->SAPSviluppo di applicazioni UI5->Progetto di applicazioni. Quindi seguire le istruzioni della procedura guidata per crearne di nuovi SAPProgetto dell'applicazione UI5. Questo è stato descritto in dettaglio nel passaggio 1 della parte 1 in questo tutorial sopra.

Il nome del progetto del componente principale è NumPass. E il nome tecnico dell'applicazione BSP generato dopo la distribuzione di SAPIl componente UI5 per il server frontend ABAP è zpassnum. La struttura del progetto sarà simile alla seguente

Scriviamo ora il codice nei file index.html, Component.js e PassNum.view.xml e PassNum.controller.js

Passaggio 2) Codice sorgente di Index.html del componente principale

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

Passaggio 3) Codice sorgente del file Component.js del componente principale

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

Passaggio 4) Codice sorgente del file 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>

Dopo aver utilizzato il codice sopra nella tua visualizzazione, la tua visualizzazione dovrebbe apparire come quella seguente

Passaggio 5) Codice sorgente di PassNum.controller.js

È stato modificato solo il metodo onInit(). Tutto il resto in questo file rimane lo stesso

onInit: function() {

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

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

Passaggio 6) Distribuzione del componente principale a SAP Server gateway Netweaver

Distribuisci l'applicazione sul server frontend ABAP ed eseguila. Dovresti essere in grado di eseguirlo facendo clic con il pulsante destro del mouse sul progetto e facendo clic sull'opzione "Esegui su server ABAP".

L'URL sottostante si aprirà nel browser Eclipse.
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html

Copia l'URL ed eseguilo nel browser effettivo. Nel nome host sopra contrassegnato in giallo è il nome host del tuo server frontend ABAP.

Uscita

Fare clic sul pulsante "Primo", gennaio dovrebbe essere visualizzato nel componente figlio.

Divertiti a creare applicazioni web belle e reattive utilizzando SAPinterfaccia utente5.

Sintesi

In questa SAPTutorial UI5, abbiamo imparato:

SAPL'interfaccia utente 5 ha esplorato: SAPUI5 è l'ultimo della serie di SAP Tecnologie di sviluppo dell'interfaccia utente.
Cosa è SAP interfaccia utente5: SAPUI5 è un insieme di librerie utilizzate per creare applicazioni Web reattive
Componenti di SAPL'architettura UI5 è composta da dispositivi, client, gateway NetWeaver, livello di persistenza
A SAPIl componente UI5 è un pezzo di codice funzionante che viene riutilizzato ovunque necessario
Tipi di SAPI componenti UI5 sono 1) Componenti UI, 2) Componenti Faceless
Abbiamo imparato a consumare un componente sapui5 in un altro componente sapui5 e a trasferire dati tra i due componenti