SAPTutorial UI5 per principianti

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 ArchiNella struttura, il primo riquadro "Dispositivi" indica i dispositivi su cui vengono eseguite le applicazioni UI5. Le applicazioni UI5 sono accessibili tramite un'app mobile o qualsiasi browser. Questo livello è chiamato "Livello di presentazione".

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

La logica aziendale effettiva è implementata in SAP sistemi centrali come ECC, CRM e BW. La logica aziendale può essere implementata utilizzando SAP programmi e moduli funzionali. SAP transazionali e i dati anagrafici risiedono SAP sistemi. Questo livello è chiamato "Livello Database" o "Livello di Persistenza".

SAPComponente UI5

Un componente è un pezzo di codice riutilizzabile. Sono disponibili 2 tipi di componenti forniti da SAPinterfaccia utente5:

1. Componenti UI – Rappresentano un'interfaccia utente contenente elementi UI. Sono basati su SAPClasse UI5 ​​denominata sap.ui.core.UIComponent
2. Componenti senza volto – Questi 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é un'applicazione UI5 ​​si comporti come un componente.

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

SAPConfigurazione dell'interfaccia utente5

Prima di iniziare, è necessario assicurarsi che:

1. Eclipse (Versione Luna) è installata sul tuo laptop
2. SAP Strumenti di sviluppo per Eclipse Luna è installato sul tuo Eclipse (SAP Strumenti di sviluppo per Eclipse Luna – https://tools.hana.ondemand.com/luna/)
3. SAP Logon Pad è installato e hai accesso a SAP Sistema NetWeaver Gateway per la distribuzione e il test dell'applicazione che andremo a sviluppare in questo blog.

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

In questa SAPIn questa guida ai tutorial di UI5, creeremo due componenti chiamati Componente Padre e Componente Figlio. Per prima cosa, creeremo il Componente Figlio e poi lo utilizzeremo nel Componente Padre.

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, quando riceve 3, dovrebbe visualizzare 'Marzo'.

Passaggio 1) Crea il progetto dell'interfaccia utente

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

Creare un progetto di applicazione per SAPUI5 seguendo la procedura guidata. Vedi lo screenshot qui sotto.

Inserisci il nome del progetto e lascia invariate le altre selezioni, come suggerito dalla procedura guidata.

Nella schermata qui sopra, sono visualizzati due tipi di librerie tramite pulsanti di opzione:

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

Quando si seleziona sap.m, si indica alla procedura guidata di creare un progetto di applicazione UI5 ​​la cui sezione bootstrap includerà automaticamente la libreria sap.m, pensata per la creazione di applicazioni web reattive.

Il prossimo in questo SAP Nel tutorial di FIORI, vedrai la sezione della procedura guidata qui sotto in cui devi creare la Vista iniziale. Una Vista iniziale è la vista che verrà visualizzata per prima quando si accede all'applicazione.

Qui è necessario specificare il nome della vista e selezionarne il tipo. 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 del linguaggio con cui ti trovi più a tuo agio.

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

Passaggio 2) Codice Component.js

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

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, indichiamo al file index.html di caricare Component.js all'avvio dell'applicazione. Inserite il codice seguente 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 per visualizzare il mese il cui numero è stato ricevuto dal componente padre.

<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 qui sopra, la visualizzazione dovrebbe apparire come nell'immagine sottostante.

Passaggio 5) Codice DisplayMonthView.controller.js

E infine, scriviamo il codice del file Controller di DisplayMonthView.

Il codice è scritto solo nel metodo hook onInit(), quindi qui viene incollato solo quello. Il resto del file è generato automaticamente 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

Distribuisci il progetto e assegna il nome tecnico all'applicazione BSP generata sul server frontend ABAP. Ad esempio, il nome sarà: zdisplaymonthIl tuo progetto dovrebbe apparire come nell'immagine sottostante.

PARTE 2) Creazione di un componente genitore

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

Passaggio 1) Creane uno nuovo SAPApplicazione UI5

Vai su File->Nuovo->Altro->SAPSviluppo applicazioni UI5 -> Progetto applicazione. Quindi segui le istruzioni della procedura guidata per creare un nuovo 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 padre è Numero di passwordIl nome tecnico dell'applicazione BSP generata dopo la distribuzione è zpassnumLa struttura del progetto sarà la seguente.

Ora scriviamo il codice nei file index.html, Component.js, PassNum.view.xml e PassNum.controller.js.

Passaggio 2) Fonte Code di Index.html del componente padre

<!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 riportato nella tua vista, quest'ultima dovrebbe apparire come nell'immagine sottostante.

Passaggio 5) Codice sorgente di PassNum.controller.js

È stato modificato solo il metodo onInit(). Tutto il resto del file rimane invariato.

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 eseguirla facendo clic con il pulsante destro del mouse sul progetto e selezionando l'opzione "Esegui sul server ABAP".

Il seguente URL si aprirà nel Eclipse browser.
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html

copiare il URL e avvialo nel browser. Il nome host indicato sopra (evidenziato in giallo) è il nome host del tuo server frontend ABAP.

Uscita

Fai clic sul pulsante 'Primo' e gennaio dovrebbe essere visualizzato nel componente figlio.

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

DOMANDE FREQUENTI