SAPUI5 vodič za početnike

Što je SAPUI5?

SAPUI5 je skup biblioteka za izradu responzivnih web aplikacija koje se izvode na više uređaja kao što su stolno računalo, mobilni uređaj i tablet. SAPUI5 radi dalje MVC koncept za ubrzanje razvojnog ciklusa stvaranjem podataka, poslovne logike i predstavljanja podataka zasebno u pogledu. Dakle, razvoj pogleda i kontrolera može se odvijati neovisno za stvaranje modela (spremnika podataka).

SAPUI5 je najnoviji u nizu SAP Tehnologije razvoja korisničkog sučelja. Kako bi se osigurala web integracija za temeljni SAP ERP sustav, SAP osmislio više tehnologija za razvoj korisničkog sučelja kao što su BSP (stranice poslovnog poslužitelja), PDK (komplet za razvoj portala), Web Dynpro Java, Web Dynpro ABAP. A nasljednik Web Dynpro ABAP je SAPUI5.

SAPUI5 Architektura

SAPUI Archidijagram strukture

U gore navedenom Architekture, prvi okvir, tj. 'Uređaji' označavaju uređaje na kojima se pokreću UI5 aplikacije. UI5 aplikacijama može se pristupiti putem mobilne aplikacije ili bilo kojeg preglednika na ovim uređajima. Ovaj sloj arhitekture naziva se 'Prezentacijski sloj'.

SAPUI5 aplikacije i oData usluge nalaze se na SAP NetWeaver pristupni poslužitelj. Ovaj sloj arhitekture naziva se 'Aplikacijski sloj'.

Stvarna poslovna logika implementirana je u SAP temeljni sustavi kao što su ECC, CRM i BW itd.… Poslovna logika može se implementirati pomoću SAP programi i funkcijski moduli. SAP nalaze se transakcijski i glavni podaci SAP sustava. Ovaj sloj arhitekture naziva se 'sloj baze podataka' ili 'sloj postojanosti'.

SAPUI5 komponenta

Komponenta je dio radnog koda koji se ponovno koristi gdje god je potrebno. Postoje 2 vrste komponenti koje nudi SAPUI5

Komponente korisničkog sučelja – predstavljaju korisničko sučelje koje sadrži elemente korisničkog sučelja. Oni se temelje na SPAUI5 klasi koja se zove sap.ui.core.UIComponent
Komponente bez lica – one nemaju korisničko sučelje. Ovi se temelje na SAPUI5 klasa pod nazivom sap.ui.core.Component

U biti, komponenta je mapa. Kada stvorite novi SAPUI5, moći ćete vidjeti strukturu mapa stvorenu u vašem pregledniku projekata kao što je dolje.

U ovoj UI5 aplikaciji, PassNum je komponenta. Datoteka Component.js obavezna je kako bi se aplikacija UI5 ponašala kao komponenta. Datoteka Component.js je kontroler komponente.

Sljedeći u ovome SAPUI5 Eclipse tutorial, naučit ćemo kako postaviti SAPUI5.

SAPPostavljanje UI5

Prije nego što počnemo, morate osigurati da –

Eclipse (Luna verzija) instalirana je na vašem prijenosnom računalu
SAP Razvojni alati za Eclipse Luna i instaliran na tvoju eclipse (SAP Razvojni alati za Eclipse Luna – https://tools.hana.ondemand.com/luna/)
SAP Podloga za prijavu je instalirana i imate pristup SAP Sustav NetWeaver Gateway za implementaciju i testiranje na ovoj aplikaciji koju ćemo izgraditi na ovom blogu.

Nakon što je aplikacija u potpunosti izgrađena, trebala bi izgledati ovako:

U ovom SAPUpute za UI5, stvorit ćemo 2 komponente, naime nadređenu komponentu i podređenu komponentu. Prvo ćemo kreirati podređenu komponentu, a zatim je iskoristiti u roditeljskoj komponenti.

Počnimo prljati ruke.

1. dio) Stvaranje podređene aplikacije

Naš cilj je stvoriti podređenu komponentu koja će prihvaćati brojeve od 1 do 12 i prikazivati naziv mjeseca. Na primjer, prima 3; trebao bi prikazati 'ožujak'.

Korak 1) Stvorite UI projekt

Idite na File->New->Other->SAPRazvoj UI5 aplikacije->Projekt aplikacije.

Izradite projekt aplikacije za SAPUI5 slijedeći čarobnjak koji se otvori. Pogledajte snimak zaslona u nastavku.

Unesite naziv projekta, a ostali odabiri neka ostanu isti kao što je predložio čarobnjak.

Na gornjoj snimci zaslona postoje 2 vrste biblioteka prikazanih kao radio gumbi

sap.m
sap.ui.commons

Kada odaberete sap.m, kažete čarobnjaku da stvori projekt UI5 aplikacije čiji će bootstrap odjeljak automatski uključiti sap.m biblioteku koja je namijenjena stvaranju responzivne web aplikacije.

Sljedeći u ovome SAP FIORI vodič, vidjet ćete donji odjeljak čarobnjaka u kojem trebate stvoriti početni prikaz. Inicijalni pogled je pogled koji će se prvi prikazati kada se pristupi aplikaciji.

Ovdje trebate dati naziv prikaza i odabrati vrstu pogleda. SAPUI5 podržava 4 vrste prikaza kao što je vidljivo na gornjem zaslonu. Dakle, korisničko sučelje a SAPUI5 aplikacija može se izraditi pomoću Javascript ili XML ili JSON ili HTML koji god vam jezik odgovara.

Na kraju čarobnjaka kreirat će se novi projekt i prikazati u prozoru Project Explorera Eclipse kao dolje.

Korak 2) Component.js kod

Zatim kreirajmo datoteku Component.js i u nju napišimo donji kod.

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

  
  },
});

Korak 3) Index.html kod

Zatim ćemo reći datoteku index.html u koju ćemo učitati Component.js SAPUI5 kada se aplikaciji pristupa iz preglednika. Dakle, napišite donji kod u datoteku 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>

Korak 4) DisplayMonthView.view.xml kod

Zatim, napišimo kod u prikazu displaymonth koji će prikazati mjesec čiji je broj mjeseca primljen od nadređene komponente.

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

Nakon što ste zalijepili gornji kod, vaš pogled bi trebao izgledati kao dolje-

Korak 5) DisplayMonthView.controller.js kod

I na kraju, napišimo kod DisplayMonthView Controller datoteke.

Kod je napisan samo u onInit() hook metodi ovog kontrolera stoga ovdje lijepite samo onInit() kod. Ostatak datoteke generiran je okvirom.

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

Korak 6) Implementacija aplikacije na SAP Netweaver pristupni poslužitelj

Postavite projekt i dajte tehnički naziv BSP aplikacije koja će se generirati na ABAP frontend poslužitelju. Neka bude ime zdisplaymonth. U ovom trenutku vaš bi projekt aplikacije trebao izgledati ovako.

DIO 2) Stvaranje nadređene komponente

Sada je vrijeme za stvaranje nove komponente (roditeljske komponente) koja će koristiti komponentu koju smo do sada stvorili u ovom vodiču.

Korak 1) Stvorite novi SAPUI5 aplikacija

Idite na File->New->Other->SAPRazvoj UI5 aplikacije->Projekt aplikacije. Zatim slijedite upute čarobnjaka za stvaranje novog SAPProjekt UI5 aplikacije. Ovo je detaljno opisano u 1. koraku 1. dijela ovog vodiča iznad.

Naziv projekta nadređene komponente je PassNum. I tehnički naziv BSP aplikacije generiran nakon postavljanja SAPUI5 komponenta za ABAP frontend poslužitelj je zpassnum. Struktura projekta izgledat će ovako

Napišimo sada kod u datotekama index.html, Component.js i PassNum.view.xml i PassNum.controller.js

Korak 2) Izvorni kod Index.html nadređene komponente

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

Korak 3) Izvorni kod datoteke Component.js nadređene komponente

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

Korak 4) Izvorni kod datoteke 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>

Nakon što upotrijebite gornji kod u svom prikazu, vaš bi prikaz trebao izgledati kao ispod

Korak 5) Izvorni kod PassNum.controller.js

Promijenjena je samo metoda onInit(). Sve ostalo u ovoj datoteci ostaje isto

onInit: function() {

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

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

Korak 6) Implementacija nadređene komponente na SAP Netweaver pristupni poslužitelj

Postavite aplikaciju na ABAP frontend server i pokrenite je. Trebali biste ga moći pokrenuti desnim klikom na projekt i klikom na opciju "Pokreni na ABAP poslužitelju".

Donji URL otvorit će se u eclipse pregledniku.
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html

Kopirajte URL i pokrenite ga u stvarnom pregledniku. U gornjem nazivu hosta označenom žutom bojom je naziv hosta vašeg ABAP frontend poslužitelja.

Izlaz

Kliknite gumb 'Prvi', siječanj bi se trebao prikazati u podređenoj komponenti.

Uživajte u stvaranju lijepih, responzivnih web aplikacija pomoću SAPUI5.

Rezime

U ovom SAPUI5 vodič, naučili smo:

SAPIstraženo UI5: SAPUI5 je najnoviji u nizu SAP Tehnologije razvoja korisničkog sučelja.
Što je SAP UI5: SAPUI5 je skup biblioteka koje se koriste za izradu responzivnih web aplikacija
Komponente SAPUI5 arhitektura su uređaji, klijent, pristupnik NetWeaver, sloj postojanosti
A SAPUI5 komponenta dio je radnog koda koji se ponovno koristi gdje god je potrebno
Vrste SAPKomponenta korisničkog sučelja 5 su 1) Komponente korisničkog sučelja, 2) Komponente bez lica
Naučili smo o konzumiranju jedne komponente sapui5 u drugu komponentu sapui5 i prijenosu podataka između dviju komponenti