SAPUI5-opplæring for nybegynnere
Jessica Blake
⚡ Smart oppsummering
SAPUI5 er SAPs responsive HTML5-rammeverk som driver webapplikasjoner for bedrifter på tvers av stasjonære datamaskiner, mobilenheter og nettbrett. Denne gjennomgangen forklarer MVC-arkitekturen, komponentmodellen, bibliotekene og hvordan man bygger foreldre- og barnekomponenter inni. Eclipse.
Hva er SAPUI5?
SAPIU5 er et sett med biblioteker for å bygge responsive nettapplikasjoner som kjører på flere enheter som skrivebord, mobil og nettbrett. SAPUI5 fungerer på MVC konsept å akselerere utviklingssyklusen ved å lage data, forretningslogikk og representasjon av data separat på visningen. Så utviklingen av visning og kontroller kan skje uavhengig for å lage modeller (databeholdere).
SAPUI5 er den siste i rekken av SAP UI-utviklingsteknologier. For å gi webintegrasjon for det underliggende SAP ERP system, SAP kom opp med flere UI-utviklingsteknologier som BSP (Business server pages), PDK (Portal Development Kit), Web Dynpro Java, Web Dynpro ABAP. Og etterfølgeren til Web Dynpro ABAP er SAPUI5.
SAPIU5 Architecture
SAPUI ArchiTecture Diagram
I det ovennevnte ArchiTektur, den første boksen «Enheter» angir enhetene som UI5-applikasjoner kjører på. UI5-applikasjoner kan nås via en mobilapp eller en hvilken som helst nettleser. Dette laget kalles «Presentasjonslaget».
SAPUI5-applikasjoner og oData-tjenester ligger på SAP NetWeaver Gateway Server. Dette laget av arkitekturen kalles «applikasjonslaget».
Faktisk forretningslogikk er implementert i SAP kjernesystemer som ECC, CRM og BW. Forretningslogikk kan implementeres ved hjelp av SAP programmer og funksjonsmoduler. SAP transaksjons- og masterdata ligger på SAP systemer. Dette laget kalles «databaselaget» eller «persistenslaget».
SAPUI5-komponent
En komponent er en del gjenbrukbar kode. Det finnes to typer komponenter levert av SAPUI5:
- UI-komponenter – Disse representerer et brukergrensesnitt som inneholder UI-elementer. Disse er basert på SAPUI5-klasse kalt sap.ui.core.UIComponent
- Ansiktsløse komponenter – Disse har ikke et brukergrensesnitt. Disse er basert på SAPUI5-klassen kalt sap.ui.core.Component
I hovedsak er en komponent en mappe. Når du oppretter en ny SAPUI5-applikasjonen, vil du kunne se en mappestruktur opprettet i prosjektutforskeren som nedenfor.
I denne UI5-applikasjonen er PassNum en komponent. Component.js-filen er obligatorisk for at en UI5-applikasjon skal oppføre seg som en komponent.
Neste i dette SAPIU5 Eclipse veiledning, vil vi lære hvordan du konfigurerer SAPUI5.
SAPUI5 oppsett
Før vi starter, må du sørge for at:
- Eclipse (Luna-versjon) er installert på den bærbare datamaskinen
- SAP Utviklingsverktøy for Eclipse Luna er installert på din Eclipse (SAP Utviklingsverktøy for Eclipse Luna - https://tools.hana.ondemand.com/luna/)
- SAP Påloggingspad er installert, og du har tilgang til SAP NetWeaver Gateway-system for utrulling og testing av applikasjonen vi skal bygge i denne bloggen.
Etter at applikasjonen er ferdig bygget, skal den se slik ut:
I dette SAPI UI5-veiledningen skal vi opprette to komponenter kalt foreldrekomponenten og barnekomponenten. Først skal vi opprette barnekomponenten og deretter bruke den i foreldrekomponenten.
La oss begynne å skitne på hendene.
Del 1) Opprett underordnet søknad
Målet vårt er å lage en underkomponent som godtar et tall fra 1 til 12 og viser månedens navn. Når den for eksempel mottar 3, skal den vise «mars».
Trinn 1) Opprett UI-prosjektet
Gå til Fil->Ny->Annet->SAPUI5 Applikasjonsutvikling->Applikasjonsprosjekt.
Lag et søknadsprosjekt for SAPUI5 ved å følge veiviseren. Se skjermbilde nedenfor.
Skriv inn navnet på prosjektet, og la de andre valgene forbli slik veiviseren foreslår.
I skjermbildet ovenfor vises to typer biblioteker som radioknapper:
- sap.m
- sap.ui.commons
Når du velger sap.m, ber du veiviseren om å opprette et UI5-applikasjonsprosjekt der bootstrap-delen automatisk inkluderer sap.m-biblioteket, som er ment for å lage responsive webapplikasjoner.
Neste i dette SAP I FIORI-opplæringen ser du delen av veiviseren nedenfor der du må opprette den første visningen. En første visning er en visning som gjengis først når applikasjonen åpnes.
Her må du oppgi navnet på visningen og velge visningstype. SAPUI5 støtter 4 typer visning som tydelig på skjermen ovenfor. Så brukergrensesnittet til en SAPUI5-applikasjonen kan bygges ved hjelp av JavaSkript eller XML eller JSON eller HTML, avhengig av hvilket språk du er komfortabel med.
På slutten av veiviseren opprettes et nytt prosjekt og vises i Prosjektutforsker-vinduet i Eclipse som nedenfor.
Trinn 2) Component.js-kode
La oss deretter opprette en Component.js-fil og skrive koden nedenfor 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"); }, });
Trinn 3) Index.html-kode
La oss deretter be index.html-filen vår om å laste inn Component.js når applikasjonen åpnes. Skriv koden nedenfor 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>
Trinn 4) DisplayMonthView.view.xml-kode
La oss deretter skrive kode i displaymonth-visningen vår for å vise måneden hvis nummer er mottatt fra den overordnede komponenten.
<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>
Etter at du har limt inn koden ovenfor, skal visningen din se slik ut nedenfor.
Trinn 5) DisplayMonthView.controller.js-kode
Og til slutt, la oss skrive koden til DisplayMonthViews Controller-fil.
Koden er kun skrevet i onInit() hook-metoden, så bare den limes inn her. Resten av filen er slik den er generert av rammeverket.
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); },
Trinn 6) Implementering av applikasjonen på SAP NetWeaver Gateway-server
Distribuer prosjektet og oppgi det tekniske navnet på BSP-applikasjonen som genereres på ABAP-frontend-serveren. La navnet være zdisplaymonthProsjektet ditt skal se slik ut nedenfor.
DEL 2) Opprette en overordnet komponent
Nå er det på tide å opprette en ny komponent (foreldrekomponent) som vil bruke komponenten vi har opprettet så langt i denne veiledningen.
Trinn 1) Opprett en ny SAPUI5-applikasjon
Gå til Fil->Ny->Annet->SAPUI5 Applikasjonsutvikling->Applikasjonsprosjekt. Følg deretter veiviserinstruksjonene for å opprette et nytt SAPUI5 søknadsprosjekt. Dette er beskrevet i detalj i trinn 1 av del 1 i denne opplæringen ovenfor.
Navnet på det overordnede komponentprosjektet er PassnummerDet tekniske navnet på BSP-applikasjonen som genereres etter utrulling er zpassnumProsjektstrukturen vil se slik ut nedenfor.
La oss nå skrive kode i index.html-, Component.js-, PassNum.view.xml- og PassNum.controller.js-filer.
Trinn 2) Kilde Code av Index.html til den overordnede komponenten
<!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>
Trinn 3) Kildekoden til Component.js-filen til overordnet komponent
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"); }, });
Trinn 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>
Etter at du har brukt koden ovenfor i visningen din, skal visningen din se slik ut.
Trinn 5) Kildekoden til PassNum.controller.js
Bare onInit()-metoden er endret. Alt annet i denne filen forblir det samme.
onInit: function() { jQuery.sap.registerModulePath("DisplayMonth", "../zdisplaymonth"); }, clickbutton:function(oEvent) { sap.ui.getCore().getEventBus().publish("exchange", "data", oEvent.oSource.sId.split("--")[1]); }
Trinn 6) Distribusjon av overordnet komponent til SAP NetWeaver Gateway-server
Distribuer applikasjonen på ABAP-frontend-serveren og kjør den. Du skal kunne kjøre den ved å høyreklikke på prosjektet og klikke på alternativet «Kjør på ABAP-server».
Under URL vil åpne seg i Eclipse browser.
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html
Kopier URL og kjør den i selve nettleseren. I vertsnavnet ovenfor (markert med gult) er vertsnavnet til ABAP-frontend-serveren din.
Produksjon
Klikk på «Første»-knappen, og januar skal vises i underkomponenten.
Nyt å lage vakre, responsive nettapplikasjoner ved å bruke SAPUI5.
