SAPUI5-vejledning for begyndere
Jessica Blake
⚡ Smart opsummering
SAPUI5 er SAP's responsive HTML5-framework, der driver virksomhedswebapplikationer på tværs af desktop-, mobil- og tablet-enheder. Denne gennemgang forklarer MVC-arkitekturen, komponentmodellen, bibliotekerne og hvordan man bygger forældre- og underordnede komponenter indeni. Eclipse.
Hvad er SAPUI5?
SAPUI5 er et sæt biblioteker til at bygge responsive webapplikationer, der kører på flere enheder som desktop, mobil og tablet. SAPUI5 virker på MVC koncept at accelerere udviklingscyklussen ved at skabe data, forretningslogik og repræsentation af data separat på visningen. Så udviklingen af view og controller kan foregå uafhængigt for at skabe modeller (datacontainere).
SAPUI5 er den seneste i rækken af SAP UI udviklingsteknologier. For at give webintegration til det underliggende SAP ERP system, SAP kom op med flere UI-udviklingsteknologier som BSP (Business server pages), PDK (Portal Development Kit), Web Dynpro Java, Web Dynpro ABAP. Og efterfølgeren til Web Dynpro ABAP er SAPUI5.
SAPUI5 Architecture
SAPUI Architecture diagram
I ovenstående ArchiI den første boks 'Enheder' angiver den de enheder, som UI5-applikationer kører på. UI5-applikationer kan tilgås via en mobilapp eller enhver browser. Dette lag kaldes 'Præsentationslaget'.
SAPUI5-applikationer og oData-tjenester findes på SAP NetWeaver Gateway Server. Dette lag af arkitekturen kaldes 'applikationslaget'.
Faktisk forretningslogik er implementeret i SAP kernesystemer som ECC, CRM og BW. Forretningslogik kan implementeres ved hjælp af SAP programmer og funktionsmoduler. SAP transaktions- og stamdata ligger på SAP systemer. Dette lag kaldes 'databaselaget' eller 'persistenslaget'.
SAPUI5 komponent
En komponent er et stykke genanvendelig kode. Der findes 2 typer komponenter, som SAPUI5:
- UI-komponenter – Disse repræsenterer en brugergrænseflade, der indeholder UI-elementer. Disse er baseret på SAPUI5-klasse kaldet sap.ui.core.UIComponent
- Ansigtsløse komponenter – Disse har ikke en brugergrænseflade. Disse er baseret på SAPUI5 klasse kaldet sap.ui.core.Component
Grundlæggende er en komponent en mappe. Når du opretter en ny SAPUI5-applikation, vil du være i stand til at se en mappestruktur oprettet i din projektstifinder som nedenfor.
I denne UI5-applikation er PassNum en komponent. Filen Component.js er obligatorisk for at en UI5-applikation kan opføre sig som en komponent.
Næste i denne SAPUI5 Eclipse tutorial, vil vi lære at konfigurere SAPUI5.
SAPUI5 opsætning
Før vi starter, skal du sørge for at:
- Eclipse (Luna version) er installeret på din bærbare computer
- SAP Udviklingsværktøjer til Eclipse Luna er installeret på din Eclipse (SAP Udviklingsværktøjer til Eclipse Luna - https://tools.hana.ondemand.com/luna/)
- SAP Logon Pad er installeret, og du har adgang til SAP NetWeaver Gateway-system til implementering og test af den applikation, vi skal bygge i denne blog.
Når applikationen er færdigbygget, skal den se ud som nedenfor:
I denne SAPI UI5-vejledningen opretter vi to komponenter kaldet Parent Component og Child Component. Først opretter vi Child Component og bruger den derefter i Parent Component.
Lad os begynde at få hænderne snavsede.
Del 1) Opret underordnet ansøgning
Vores mål er at oprette en underordnet komponent, der accepterer et tal fra 1 til 12 og viser månedens navn. For eksempel, når den modtager 3, skal den vise 'marts'.
Trin 1) Opret UI-projektet
Gå til Filer->Ny->Andet->SAPUI5 Applikationsudvikling-> Applikationsprojekt.
Opret et ansøgningsprojekt til SAPUI5 ved at følge guiden. Se skærmbilledet nedenfor.
Indtast projektets navn, og lad de andre valg forblive som foreslået af guiden.
I ovenstående skærmbillede vises der 2 typer biblioteker som radioknapper:
- sap.m
- sap.ui.commons
Når du vælger sap.m, beder du guiden om at oprette et UI5-applikationsprojekt, hvis bootstrap-sektion automatisk inkluderer sap.m-biblioteket, som er beregnet til at oprette responsive webapplikationer.
Næste i denne SAP I FIORI-vejledningen vil du se den del af guiden nedenfor, hvor du skal oprette den indledende visning. En indledende visning er en visning, der vises først, når applikationen tilgås.
Her skal du angive navnet på visningen og vælge visningstypen. SAPUI5 understøtter 4 typer visninger, som det fremgår af ovenstående skærm. Så brugergrænsefladen af en SAPUI5-applikationen kan bygges vha JavaScript eller XML eller JSON eller HTML, alt efter hvilket sprog du er fortrolig med.
Når guiden er færdig, oprettes et nyt projekt, som vises i Projekt Explorer-vinduet. Eclipse som nedenfor.
Trin 2) Component.js-kode
Lad os derefter oprette en Component.js-fil og skrive nedenstående kode i den.
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"); }, });
Trin 3) Index.html-kode
Lad os derefter bede vores index.html-fil om at indlæse Component.js, når applikationen tilgås. Skriv nedenstående kode i index.html-filen.
<!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>
Trin 4) DisplayMonthView.view.xml-kode
Lad os derefter skrive kode i vores displaymonth-visning for at vise den måned, hvis nummer er modtaget fra den overordnede komponent.
<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>
Når du har indsat ovenstående kode, burde din visning se ud som nedenfor.
Trin 5) DisplayMonthView.controller.js-kode
Og til sidst, lad os skrive koden til DisplayMonthViews Controller-fil.
Koden er kun skrevet i onInit() hook-metoden, så kun den indsættes her. Resten af filen er som genereret af frameworket.
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); },
Trin 6) Implementering af applikationen på SAP NetWeaver Gateway-server
Implementer projektet, og angiv det tekniske navn på den BSP-applikation, der genereres på ABAP-frontendserveren. Lad navnet være zdisplaymånedDit projekt skal se ud som nedenfor.
DEL 2) Oprettelse af en overordnet komponent
Nu er det tid til at oprette en ny komponent (forælderkomponent), som vil bruge den komponent, vi har oprettet indtil videre i denne vejledning.
Trin 1) Opret en ny SAPUI5 applikation
Gå til Filer->Ny->Andet->SAPUI5 Applikationsudvikling->Applikationsprojekt. Følg derefter guidens instruktioner for at oprette et nyt SAPUI5 ansøgningsprojekt. Dette er blevet beskrevet detaljeret i trin 1 i del 1 i denne øvelse ovenfor.
Navnet på det overordnede komponentprojekt er AdgangskodeDet tekniske navn på BSP-applikationen, der genereres efter implementeringen, er zpassnumProjektstrukturen vil se ud som nedenfor.
Lad os nu skrive kode i filerne index.html, Component.js, PassNum.view.xml og PassNum.controller.js.
Trin 2) Kilde Code af Index.html for den overordnede komponent
<!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>
Trin 3) Kildekoden til Component.js-filen til Parent Component
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"); }, });
Trin 4) Kildekoden til filen 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>
Når du har brugt ovenstående kode i din visning, burde din visning se ud som nedenfor.
Trin 5) Kildekoden for PassNum.controller.js
Kun onInit()-metoden er blevet ændret. Alt andet i denne fil forbliver det samme.
onInit: function() { jQuery.sap.registerModulePath("DisplayMonth", "../zdisplaymonth"); }, clickbutton:function(oEvent) { sap.ui.getCore().getEventBus().publish("exchange", "data", oEvent.oSource.sId.split("--")[1]); }
Trin 6) Implementering af overordnet komponent til SAP NetWeaver Gateway-server
Implementer applikationen på ABAP-frontend-serveren, og kør den. Du burde kunne køre den ved at højreklikke på projektet og klikke på indstillingen 'Kør på ABAP-server'.
Den nedenstående URL vil åbne op i Eclipse browser.
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html
Kopier URL og kør den i selve browseren. I ovenstående værtsnavn (markeret med gult) er værtsnavnet på din ABAP-frontend-server.
Produktion
Klik på knappen 'Først', og januar burde vises i underkomponenten.
Nyd at skabe smukke, responsive webapplikationer ved hjælp af SAPUI5.
