How To – SAPUI5 Fiori Tutorial

In questo tutorial SAP UI5 per principianti, imparerai le basi di SAP UI5 come:

• Cos'è SAPUI5?
• Architettura SAPUI5
• Componente SAPUI5
• Installazione di SAPUI5
• Parte 1) Crea applicazione figlio
• Parte 2) Creazione di un componente padre

Architettura SAPUI5 ed Esempi

Architettura SAPUI5

Architettura SAPUI5

Come scrivere un TEST CASE Esercitazione sul test del softwareIl prossimoRimanere

Diagramma di architettura SAPUI

Nell'architettura di cui sopra, la 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 "Livello di presentazione".

Le applicazioni SAPUI5 e i servizi oData risiedono su SAP NetWeaver Gateway Server. Questo livello dell'architettura è chiamato "Livello applicazione".

La logica aziendale effettiva è implementata nei sistemi principali SAP come ECC, CRM e BW, ecc. La logica aziendale può essere implementata utilizzando programmi e moduli funzionali SAP. I dati transazionali e anagrafici SAP risiedono su sistemi SAP. Questo livello dell'architettura è chiamato "Database Layer" o "Persistence Layer".

Componente SAPUI5

Un componente è un pezzo di codice funzionante che viene riutilizzato dove richiesto. Esistono 2 tipi di componenti forniti da SAPUI5

1. Componenti dell'interfaccia utente: rappresentano un'interfaccia utente contenente elementi dell'interfaccia utente. Questi sono basati sulla classe SPAUI5 chiamata sap.ui.core.UIComponent
2. Componenti senza volto: non hanno un'interfaccia utente. Questi sono basati sulla classe SAPUI5 chiamata sap.ui.core.Component

In sostanza, un componente è una cartella. Quando crei una nuova applicazione SAPUI5, 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.

Successivamente in questo tutorial su SAPUI5 Eclipse, impareremo come configurare SAPUI5.

Installazione di SAPUI5

Prima di iniziare, devi assicurarti che:

1. Eclipse (versione Luna) è installato sul tuo laptop
2. Strumenti di sviluppo SAP per Eclipse Luna e installati sul tuo eclipse (Strumenti di sviluppo SAP per Eclipse Luna - https://tools.hana.ondemand.com/luna/ )
3. Il pad di accesso SAP è installato e hai accesso al sistema SAP NetWeaver Gateway per la distribuzione e il test su questa applicazione che creeremo in questo blog.

Dopo che l'applicazione è stata completamente creata, dovrebbe apparire come di seguito:

In questa guida alle esercitazioni SAPUI5, creeremo 2 componenti, ovvero il componente principale e il componente figlio. Innanzitutto, creeremo il componente figlio e quindi lo utilizzeremo nel componente padre.

Cominciamo a sporcarci le mani.

Parte 1) Crea applicazione figlio

Il nostro obiettivo è creare un componente figlio che accetti un numero compreso tra 1 e 12 e visualizzi il nome del mese. Ad esempio, ne riceve 3; dovrebbe visualizzare "marzo".

Passaggio 1) Crea il progetto UI

Vai a File-> Nuovo-> Altro-> Sviluppo applicazioni SAPUI5-> Progetto applicazione.

Crea un progetto applicativo per SAPUI5 seguendo la procedura guidata che si apre. Vedi screenshot qui sotto.

Immettere il nome del progetto, lasciare 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

1. sap.m
2. 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 che è destinata alla creazione di un'applicazione web reattiva.

Successivamente in questo tutorial SAP 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. SAPUI5 supporta 4 tipi di visualizzazione come evidenti nella schermata sopra. Quindi l'interfaccia utente di un'applicazione SAPUI5 può essere costruita utilizzando Javascript o XML o JSON o HTML qualunque sia la lingua con cui ti senti a tuo agio.

Alla fine della procedura guidata, verrà creato un nuovo progetto e visualizzato nella finestra Project Explorer di Eclipse come di seguito.

Passaggio 2) Codice Component.js

Quindi, creiamo un file Component.js e scriviamo sotto il codice al suo interno.

sap.ui.core.UIComponent.extend ("DisplayMonth.Component", { 

metadati: {
 "name": "DisplayMonth", 
 "dipendenze": { 
 "componenti": []}
 },
    
createContent: function () {
 var oViewData = {
 componente: questo
 };
 var oView = sap.ui.view ({
 viewName: "DisplayMonth.displaymonth.DisplayMonthView",
 digitare: sap.ui.core.mvc.ViewType.XML,
 viewData: oViewData
 });
     
 return (oView);
 },

 init: function () {
 // chiama super init (chiamerà la funzione "crea contenuto")
 sap.ui.core.UIComponent.prototype.init.apply (this, arguments);

 // usa sempre percorsi assoluti relativi al nostro componente
 // (i percorsi relativi falliranno se in esecuzione nel Launchpad di Fiori)
 var sRootPath = jQuery.sap.getModulePath ("DisplayMonth");

  
 },
});

Passaggio 3) Codice index.html

Successivamente, diciamo al file index.html di caricare Component.js in SAPUI5 quando si accede all'applicazione dal browser. Quindi scrivi sotto il codice nel file index.html.

<! DOCTYPE HTML>
<html>
<head>
// aggiunta di meta tag per dire al browser IE di eseguire il rendering della pagina in modalità IE-edge.
<meta http-equiv = "X-UA-Compatible" content = "IE = edge">
// aggiunta di un meta tag per dire a eclipse di utilizzare UTF 8 come codifica dei caratteri
<meta http-equiv = 'Content-Type' content = 'text / html; charset = UTF-8' />
// Script Bootstrap per indicare al designtime e al runtime di ui5 di utilizzare la libreria sap.m, utilizzare // blue-crystal questi e utilizzare una sintassi di associazione complessa
<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 = "complessa"
data-sap-ui-resourceroots = '{"DisplayMonth": "./"}'>
</script>

<script>

sap.ui.getCore (). attachInit (function () {
 new sap.m.Shell ({
 app: nuovo sap.ui.core.ComponentContainer ({
 altezza: "100%",
 nome: "DisplayMonth"
 })
 }). placeAt ("contenuto");
 });
</script>

</head>
// inizio del corpo dell'applicazione SAPUI5. Contiene un elemento div.
<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 mostrerà il mese il cui numero di mese viene ricevuto dal componente padre.

<html: style>
#__ xmlview1 - id {
margine sinistro: 30rem;
 margin-top: 9rem;
 dimensione del carattere: 6rem;
 stile del carattere: corsivo;
 colore di sfondo: burlywood;
}
</ html: style>
<App id = "fioricontent">
<Page title = "Child Component">
<contenuto>
<Text id = "id" xmlns = "sap.m" text = "{myModel> / monthname}"> </Text>
</content>
</Page>
</App>

Dopo aver incollato il codice sopra, la tua vista dovrebbe apparire come sotto-

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 incollando qui solo il codice onInit (). Il resto del file è come generato dal framework.

onInit: function () {
sap.ui.getCore (). getEventBus (). subscribe ("exchange", "data",
function (channel, event, oEventData) {
jsonModel = nuovo sap.ui.model.json.JSONModel ({
monthumber: oEventData,
monthname: ''

});

// deriva il nome del mese dal numero del mese
switch (jsonModel.oData.monthumber) {
caso 1":
jsonModel.oData.monthname = 'gennaio';
rompere;
caso "2":
jsonModel.oData.monthname = 'Febbraio';
rompere;
caso "3":
jsonModel.oData.monthname = 'marzo';
rompere;
caso "4":
jsonModel.oData.monthname = 'aprile';
rompere;
caso "5":
jsonModel.oData.monthname = 'maggio';
rompere;
caso "6":
jsonModel.oData.monthname = 'giugno';
rompere;
caso "7":
jsonModel.oData.monthname = 'luglio';
rompere;
caso "8":
jsonModel.oData.monthname = 'Agosto';
rompere;
caso "9":
jsonModel.oData.monthname = 'settembre';
rompere;
caso "10":
jsonModel.oData.monthname = 'ottobre';
rompere;
caso "11":
jsonModel.oData.monthname = 'novembre';
rompere;
caso "12":
jsonModel.oData.monthname = 'dicembre';
rompere;

}
this.getView (). setModel (jsonModel, "myModel");

}, Questo);
},

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

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

PARTE 2) Creazione di un componente padre

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

Passaggio 1) Crea una nuova applicazione SAPUI5

Vai a File-> Nuovo-> Altro-> Sviluppo applicazioni SAPUI5-> Progetto applicazione. Quindi seguire le istruzioni della procedura guidata per creare un nuovo progetto applicativo SAPUI5. Questo è stato descritto in dettaglio nel passaggio 1 della parte 1 in questo tutorial sopra.

Il nome del progetto componente padre è PassNum. E il nome tecnico dell'applicazione BSP generata dopo la distribuzione del componente SAPUI5 sul server frontend ABAP è zpassnum. La struttura del progetto apparirà come di seguito

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 padre

<! DOCTYPE HTML>
<html>
<head>
// aggiunta di meta tag per dire al browser IE di eseguire il rendering della pagina in modalità IE-edge.
<meta http-equiv = "X-UA-Compatible" content = "IE = edge">
// aggiunta di un meta tag per dire a eclipse di utilizzare UTF 8 come codifica dei caratteri
<meta http-equiv = 'Content-Type' content = 'text / html; charset = UTF-8' />
// Script Bootstrap per indicare al tempo di progettazione e al runtime di ui5 di utilizzare la libreria sap.m, utilizzare // blue-crystal questi e utilizzare una sintassi di associazione complessa
<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: nuovo sap.ui.core.ComponentContainer ({
altezza: "100%",
nome: "PassNum"
})
}). placeAt ("contenuto");
});

</script>

</head>
// inizio del corpo dell'applicazione SAPUI5, contiene un tag div,
<body class = "sapUiBody" role = "application">
<div id = "content"> </div>
</body>
</html>

Passaggio 3) Codice sorgente del file Component.js di Parent Component

sap.ui.core.UIComponent.extend ("PassNum.Component", {

metadati: {
"name": "PassNum",
"dipendenze": {
"componenti": []}
},

createContent: function () {
var oViewData = {
componente: questo
};

// Creazione del riferimento di una vista XML PassNum
var myView = sap.ui.view ({
viewName: "PassNum.passnum.PassNum",
digitare: sap.ui.core.mvc.ViewType.XML,
viewData: oViewData
});

return (myView);
},

init: function () {
// chiama super init (questo chiamerà la funzione "crea contenuto")
sap.ui.core.UIComponent.prototype.init.apply (this, arguments);
// assicurarsi di utilizzare percorsi assoluti relativi al proprio componente
// (in esecuzione in Fiori Launchpad, i percorsi relativi falliranno)
var sRootPath = jQuery.sap.getModulePath ("PassNum");

},
});

Passaggio 4) Codice sorgente del file PassNum.view.xml

<Page title = "Parent Component">
<contenuto>

<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 visualizzazione, la visualizzazione dovrebbe essere simile a quella riportata di seguito

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

pulsante clic: funzione (oEvento)
{
sap.ui.getCore (). getEventBus (). publish ("exchange", 
"data", oEvent.oSource.sId.split ("-") [1]);


}

Passaggio 6) Distribuzione del componente principale su SAP Netweaver Gateway Server

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 sul server ABAP".

L'URL sottostante si aprirà nel browser Eclipse.

hostname: 8000/sap/bc/ui5_ui5/sap/zpassnum /index.html

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

Produzione

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

Divertiti a creare bellissime applicazioni web reattive utilizzando SAPUI5.

Sommario

In questo tutorial SAPUI5, abbiamo imparato:

• SAPUI5 esplorato: SAPUI5 è l'ultimo della serie di tecnologie di sviluppo dell'interfaccia utente SAP.
• Cos'è SAP UI5: SAPUI5 è un insieme di librerie che viene utilizzato per creare applicazioni Web reattive
• I componenti dell'architettura SAPUI5 sono Dispositivi, Client, NetWeaver Gateway, Persistence Layer
• Un componente SAPUI5 è un pezzo di codice funzionante che viene riutilizzato laddove richiesto
• I tipi di componenti SAPUI5 sono 1) componenti dell'interfaccia utente, 2) componenti senza volto
• Abbiamo appreso come consumare un componente sapui5 in un altro componente sapui5 e passare i dati tra i due componenti