SAPUI5 vodič za početnike
Jessica Blake
⚡ Pametni sažetak
SAPUI5 je SAPResponzivni HTML5 okvir koji pokreće poslovne web aplikacije na stolnim računalima, mobilnim uređajima i tabletima. Ovaj vodič objašnjava MVC arhitekturu, model komponenti, biblioteke i kako izgraditi roditeljske i podređene komponente unutar Eclipse.
Š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 ArchiU teksturi, prvi okvir 'Uređaji' označava uređaje na kojima se izvršavaju UI5 aplikacije. UI5 aplikacijama se može pristupiti putem mobilne aplikacije ili bilo kojeg preglednika. Ovaj sloj naziva se 'Prezentacijski sloj'.
SAPUI5 aplikacije i oData usluge nalaze se na SAP NetWeaver Gateway Server. Ovaj sloj arhitekture naziva se 'sloj aplikacije'.
Stvarna poslovna logika implementirana je u SAP temeljnih sustava poput ECC-a, CRM-a i BW-a. Poslovna logika može se implementirati pomoću SAP programi i funkcijski moduli. SAP nalaze se transakcijski i glavni podaci SAP sustavi. Ovaj sloj naziva se 'sloj baze podataka' ili 'sloj perzistencije'.
SAPUI5 komponenta
Komponenta je dio koda koji se može ponovno koristiti. Postoje 2 vrste komponenti koje pruža SAPUI5:
- UI komponente – predstavljaju korisničko sučelje koje sadrži UI elemente. Temelje se na SAPUI5 klasa pod nazivom sap.ui.core.UIComponent
- Bezlične komponente – nemaju korisničko sučelje. Temelje se 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 je obavezna da bi se UI5 aplikacija ponašala kao komponenta.
Sljedeći u ovome SAPUI5 Eclipse tutorial, naučit ćemo kako postaviti SAPUI5.
SAPPostavljanje UI5
Prije nego što počnemo, morate se uvjeriti da:
- Eclipse (Luna verzija) instalirana je na vašem prijenosnom računalu
- SAP Razvojni alati za Eclipse Luna je instalirana na vašem Eclipse (SAP Razvojni alati za Eclipse Luna – https://tools.hana.ondemand.com/luna/)
- SAP Logon Pad je instaliran i imate pristup SAP NetWeaver Gateway sustav za implementaciju i testiranje aplikacije koju ćemo izraditi u ovom blogu.
Nakon što je aplikacija u potpunosti izgrađena, trebala bi izgledati ovako:
U ovom SAPU vodiču za UI5 tutorijale, stvorit ćemo 2 komponente pod nazivom Nadređena komponenta i Podređena komponenta. Prvo ćemo stvoriti Podređenu komponentu, a zatim je koristiti u Nadređenoj komponenti.
Počnimo prljati ruke.
1. dio) Stvaranje podređene aplikacije
Naš je cilj stvoriti podređenu komponentu koja će prihvatiti broj od 1 do 12 i prikazati naziv mjeseca. Na primjer, kada primi 3, trebala 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 čarobnjaka. Pogledajte snimku zaslona u nastavku.
Unesite naziv projekta i ostavite ostale odabire onako kako predlaže čarobnjak.
Na gornjoj snimci zaslona prikazane su 2 vrste biblioteka kao radio gumbi:
- sap.m
- sap.ui.commons
Kada odaberete sap.m, govorite čarobnjaku da stvori UI5 aplikacijski projekt čiji će bootstrap odjeljak automatski uključivati biblioteku sap.m, koja je namijenjena stvaranju responzivnih web aplikacija.
Sljedeći u ovome SAP U FIORI tutorialu, vidjet ćete odjeljak čarobnjaka u nastavku gdje trebate stvoriti početni prikaz. Početni prikaz je prikaz koji će se prvi prikazati kada se aplikaciji pristupi.
Ovdje trebate navesti naziv prikaza i odabrati vrstu prikaza. 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 JavaSkripta ili XML ili JSON ili HTML, koji god jezik vam odgovara.
Na kraju čarobnjaka, novi projekt će biti kreiran i prikazan u prozoru Project Explorera Eclipse kao dolje.
Korak 2) Component.js kod
Zatim, kreirajmo Component.js datoteku 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, recimo našoj datoteci index.html da učitava Component.js kada se pristupi aplikaciji. 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 našem prikazu displaymonth za prikaz mjeseca čiji je broj primljen od roditeljske 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š prikaz bi trebao izgledati kao dolje.
Korak 5) DisplayMonthView.controller.js kod
I na kraju, napišimo kod za DisplayMonthView-ovu Controller datoteku.
Kod je napisan samo u metodi hook onInit(), tako da je samo to ovdje zalijepljeno. Ostatak datoteke je onakav kakav je generirao okvir.
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 Gateway poslužitelj
Implementirajte projekt i dajte tehnički naziv BSP aplikacije generirane na ABAP frontend poslužitelju. Neka naziv bude zdisplaymonthVaš projekt bi trebao izgledati kao dolje.
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 tutorialu.
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 nadređenog projekta komponente je Broj lozinkeTehnički naziv BSP aplikacije generirane nakon implementacije je zpassnumStruktura projekta izgledat će kao što je prikazano dolje.
Sada napišimo kod u datotekama index.html, Component.js, PassNum.view.xml i PassNum.controller.js.
Korak 2) Izvor Code 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š prikaz bi trebao izgledati kao dolje.
Korak 5) Izvorni kod PassNum.controller.js
Samo je metoda onInit() promijenjena. 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 Gateway poslužitelj
Instalirajte aplikaciju na ABAP frontend poslužitelju i pokrenite je. Trebali biste je moći pokrenuti desnim klikom na projekt i odabirom opcije 'Pokreni na ABAP poslužitelju'.
U nastavku URL otvorit će se u Eclipse preglednik.
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html
Kopirati URL i pokrenite ga u stvarnom pregledniku. U gornjem nazivu hosta (označen žutom bojom) nalazi se naziv hosta vašeg ABAP frontend poslužitelja.
Izlaz
Kliknite na gumb 'Prvi' i siječanj bi se trebao prikazati u podređenoj komponenti.
Uživajte u stvaranju lijepih, responzivnih web aplikacija pomoću SAPUI5.
