SAPUI5-handledning för nybörjare
Jessica Blake
⚡ Smart sammanfattning
SAPUI5 är SAPs responsiva HTML5-ramverk som driver företagswebbapplikationer på datorer, mobiler och surfplattor. Denna genomgång förklarar MVC-arkitekturen, komponentmodellen, biblioteken och hur man bygger föräldra- och underordnade komponenter inuti Eclipse.
Vad är SAPUI5?
SAPUI5 är en uppsättning bibliotek för att bygga responsiva webbapplikationer som körs på flera enheter som skrivbord, mobil och surfplatta. SAPUI5 fungerar MVC koncept att påskynda utvecklingscykeln genom att skapa data, affärslogik och representation av data separat på vyn. Så utvecklingen av view och controller kan ske oberoende för att skapa modeller (datacontainrar).
SAPUI5 är den senaste i serien av SAP UI-utvecklingsteknologier. För att tillhandahålla webbintegration för det underliggande SAP ERP-system, SAP kom med flera UI-utvecklingsteknologier som BSP (Business server pages), PDK (Portal Development Kit), Web Dynpro Java, Web Dynpro ABAP. Och efterträdaren till Web Dynpro ABAP är SAPUI5.
SAPUI5 Architecture
SAPUI ArchiTecture Diagram
I ovanstående ArchiI den första rutan, "Enheter", anges de enheter som UI5-applikationer körs på. UI5-applikationer kan nås via en mobilapp eller valfri webbläsare. Detta lager kallas "Presentationslagret".
SAPUI5-applikationer och oData-tjänster finns på SAP NetWeaver Gateway Server. Detta lager av arkitekturen kallas "applikationslagret".
Verklig affärslogik implementeras i SAP kärnsystem som ECC, CRM och BW. Affärslogik kan implementeras med hjälp av SAP program och funktionsmoduler. SAP transaktions- och stamdata finns kvar SAP system. Detta lager kallas 'Databaslagret' eller 'Persistenslagret'.
SAPUI5-komponent
En komponent är en återanvändbar kod. Det finns två typer av komponenter som tillhandahålls av SAPUI5:
- UI-komponenter – Dessa representerar ett användargränssnitt som innehåller UI-element. Dessa är baserade på SAPUI5-klass som heter sap.ui.core.UIComponent
- Ansiktslösa komponenter – Dessa har inget användargränssnitt. Dessa är baserade på SAPUI5-klass som heter sap.ui.core.Component
En komponent är i huvudsak en mapp. När du skapar en ny SAPUI5-applikation, kommer du att kunna se en mappstruktur skapad i din projektutforskare som nedan.
I den här UI5-applikationen är PassNum en komponent. Filen Component.js är obligatorisk för att en UI5-applikation ska bete sig som en komponent.
Nästa i detta SAPUI5 Eclipse tutorial kommer vi att lära oss hur man ställer in SAPUI5.
SAPUI5-inställning
Innan vi börjar måste du se till att:
- Eclipse (Luna-versionen) är installerad på din bärbara dator
- SAP Utvecklingsverktyg för Eclipse Luna är installerade på din Eclipse (SAP Utvecklingsverktyg för Eclipse Luna – https://tools.hana.ondemand.com/luna/)
- SAP Inloggningsplattan är installerad och du har tillgång till SAP NetWeaver Gateway-system för driftsättning och testning av applikationen vi ska bygga i den här bloggen.
När applikationen är färdigbyggd bör den se ut så här:
I detta SAPI UI5-handledningen skapar vi två komponenter som heter Parent Component och Child Component. Först skapar vi Child Component och använder sedan den i Parent Component.
Låt oss börja smutsa ner händerna.
Del 1) Skapa barnapplikation
Vårt mål är att skapa en underordnad komponent som accepterar ett tal från 1 till 12 och visar månadens namn. Till exempel, när den tar emot 3, ska den visa "mars".
Steg 1) Skapa UI-projektet
Gå till Arkiv->Nytt->Övrigt->SAPUI5 Applikationsutveckling-> Applikationsprojekt.
Skapa ett ansökningsprojekt för SAPUI5 genom att följa guiden. Se skärmdump nedan.
Ange projektets namn och låt de andra valen behållas som föreslås av guiden.
I skärmdumpen ovan visas två typer av bibliotek som radioknappar:
- sap.m
- sap.ui.commons
När du väljer sap.m ber du guiden att skapa ett UI5-applikationsprojekt vars bootstrap-sektion automatiskt inkluderar sap.m-biblioteket, vilket är avsett för att skapa responsiva webbapplikationer.
Nästa i detta SAP I FIORI-handledningen ser du den del av guiden nedan där du behöver skapa den första vyn. En initial vy är en vy som renderas först när applikationen öppnas.
Här behöver du ange vyns namn och välja vyns typ. SAPUI5 stöder fyra typer av vyer, vilket framgår av ovanstående skärm. Så användargränssnittet för en SAPUI5-applikationen kan byggas med JavaSkript eller XML eller JSON eller HTML, vilket språk du än är van vid.
I slutet av guiden skapas ett nytt projekt och visas i Projektutforskaren-fönstret i Eclipse som nedan.
Steg 2) Component.js-kod
Låt oss sedan skapa en Component.js-fil och skriva följande kod 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"); }, });
Steg 3) Index.html-kod
Låt oss nu ange att vår index.html-fil ska ladda Component.js när applikationen öppnas. Skriv koden nedan 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>
Steg 4) DisplayMonthView.view.xml-kod
Låt oss sedan skriva kod i vår displaymonth-vy för att visa den månad vars nummer tas emot från förälderkomponenten.
<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 klistrat in koden ovan bör din vy se ut som nedan.
Steg 5) DisplayMonthView.controller.js-kod
Och slutligen, låt oss skriva koden för DisplayMonthViews Controller-fil.
Koden är endast skriven med onInit() hook-metoden, så endast den klistras in här. Resten av filen är som den genereras av ramverket.
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); },
Steg 6) Implementering av applikationen på SAP NetWeaver Gateway-server
Distribuera projektet och ange det tekniska namnet på BSP-applikationen som genereras på ABAP-frontendservern. Låt namnet vara zdisplaymonthDitt projekt ska se ut som nedan.
DEL 2) Skapa en överordnad komponent
Nu är det dags att skapa en ny komponent (förälderkomponent) som kommer att använda den komponent vi skapat hittills i den här handledningen.
Steg 1) Skapa en ny SAPUI5-applikation
Gå till Arkiv->Nytt->Övrigt->SAPUI5 Applikationsutveckling->Applikationsprojekt. Följ sedan guidens instruktioner för att skapa ett nytt SAPUI5 applikationsprojekt. Detta har beskrivits i detalj i steg 1 i del 1 i denna handledning ovan.
Namnet på det överordnade komponentprojektet är LösenordsnummerDet tekniska namnet på BSP-applikationen som genereras efter driftsättningen är zpassnumProjektstrukturen kommer att se ut som nedan.
Låt oss nu skriva kod i filerna index.html, Component.js, PassNum.view.xml och PassNum.controller.js.
Steg 2) Källa Code av Index.html för föräldrakomponenten
<!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>
Steg 3) Källkod för Component.js-filen för 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"); }, });
Steg 4) Källkoden för 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 använt ovanstående kod i din vy bör din vy se ut som nedan.
Steg 5) Källkod för PassNum.controller.js
Endast metoden onInit() har ändrats. Allt annat i den här filen förblir detsamma.
onInit: function() { jQuery.sap.registerModulePath("DisplayMonth", "../zdisplaymonth"); }, clickbutton:function(oEvent) { sap.ui.getCore().getEventBus().publish("exchange", "data", oEvent.oSource.sId.split("--")[1]); }
Steg 6) Distribution av överordnad komponent till SAP NetWeaver Gateway-server
Distribuera applikationen på ABAP-frontendservern och kör den. Du bör kunna köra den genom att högerklicka på projektet och klicka på alternativet "Kör på ABAP-server".
Nedan URL kommer att öppna upp i Eclipse webbläsare.
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html
kopiera URL och kör den i själva webbläsaren. I värdnamnet ovan (markerat med gult) finns värdnamnet för din ABAP-frontend-server.
Produktion
Klicka på knappen "Första" så bör januari visas i underkomponenten.
Njut av att skapa vackra, responsiva webbapplikationer med hjälp av SAPUI5.
