SAPUI5 õpetus algajatele
Jessica Blake
⚡ Nutikas kokkuvõte
SAPUI5 on SAPreageeriv HTML5 raamistik, mis toetab ettevõtte veebirakendusi lauaarvutites, mobiilseadmetes ja tahvelarvutites. See juhend selgitab MVC arhitektuuri, komponentide mudelit, teeke ja seda, kuidas luua vanema ja lapse komponente. Eclipse.
Mis on SAPUI5?
SAPUI5 on teekide komplekt tundlike veebirakenduste loomiseks, mis töötavad mitmes seadmes, näiteks lauaarvutis, mobiilseadmes ja tahvelarvutis. SAPUI5 töötab MVC kontseptsioon arendustsükli kiirendamiseks, luues vaates andmed, äriloogika ja andmete esituse eraldi. Seega saab vaate ja kontrolleri arendamine mudelite (andmekonteinerite) loomiseks toimuda iseseisvalt.
SAPUI5 on seeria uusim SAP UI arendustehnoloogiad. Alusvara veebiintegratsiooni pakkumiseks SAP ERP süsteem, SAP tuli välja mitme kasutajaliidese arendustehnoloogiaga, nagu BSP (äriserveri lehed), PDK (portaali arenduskomplekt), Web Dynpro Java, Web Dynpro ABAP. Ja Web Dynpro ABAPi järeltulija on SAPUI5.
SAPUI5 Architektuur
SAPUI Architektuuri diagramm
Ülalpool ArchiStruktuuris näitab esimene kast „Seadmed” seadmeid, millel UI5 rakendused töötavad. UI5 rakendustele pääseb ligi mobiilirakenduse või mis tahes brauseri kaudu. Seda kihti nimetatakse „esitluskihiks”.
SAPUI5 rakendused ja oData teenused asuvad SAP NetWeaveri lüüsiserver. Seda arhitektuuri kihti nimetatakse rakenduskihiks.
Sisse on rakendatud tegelik äriloogika SAP põhisüsteemid nagu ECC, CRM ja BW. Äriloogikat saab rakendada, kasutades SAP programmid ja funktsioonimoodulid. SAP tehingu- ja põhiandmed asuvad SAP süsteemid. Seda kihti nimetatakse andmebaasikihiks või püsivuskihiks.
SAPUI5 komponent
Komponent on korduvkasutatav kood. Saadaval on kahte tüüpi komponente: SAPUI5:
- Kasutajaliidese komponendid – need esindavad kasutajaliidest, mis sisaldab kasutajaliidese elemente. Need põhinevad järgmisel: SAPUI5 klass nimega sap.ui.core.UIComponent
- Näota komponendid – neil puudub kasutajaliides. Need põhinevad SAPUI5 klass nimega sap.ui.core.Component
Põhimõtteliselt on komponent kaust. Kui loote uue SAPUI5 rakendus, näete oma projektiuurijas loodud kaustastruktuuri nagu allpool.
Selles UI5 rakenduses on PassNum komponent. Fail Component.js on UI5 rakenduse komponendina toimimiseks kohustuslik.
Järgmine selles SAPUI5 Eclipse õpetus, õpime, kuidas seadistada SAPUI5.
SAPUI5 seadistamine
Enne alustamist peate veenduma, et:
- Eclipse (Luna versioon) on teie sülearvutisse installitud
- SAP Arendustööriistad Eclipse Luna on teie seadmesse installitud Eclipse (SAP Arendustööriistad Eclipse Luna - https://tools.hana.ondemand.com/luna/)
- SAP Sisselogimispadi on installitud ja teil on juurdepääs SAP NetWeaver Gateway süsteem selle blogipostituses loodava rakenduse juurutamiseks ja testimiseks.
Kui rakendus on täielikult üles ehitatud, peaks see välja nägema järgmine:
Selle SAPUI5 õpetuste juhendis loome kaks komponenti nimega vanemkomponent ja lapskomponent. Esmalt loome lapskomponendi ja seejärel kasutame seda vanemkomponendis.
Hakkame käsi määrima.
1. osa) Looge lapserakendus
Meie eesmärk on luua lapsekomponent, mis aktsepteerib arvu 1 kuni 12 ja kuvab kuu nime. Näiteks kui see saab arvu 3, peaks see kuvama 'märts'.
Samm 1) Looge kasutajaliidese projekt
Avage Fail->Uus->Muu->SAPUI5 rakenduste arendus-> rakenduse projekt.
Looge rakendusprojekt SAPUI5, järgides viisardit. Vaata allolevat ekraanipilti.
Sisesta projekti nimi ja jäta muud valikud viisardi soovituste järgi samaks.
Ülaltoodud ekraanipildil on raadionuppudena kuvatud kahte tüüpi teeke:
- sap.m
- sap.ui.commons
Kui valite sap.m, käsite viisardil luua UI5 rakenduse projekti, mille alglaadimisosa sisaldab automaatselt sap.m teeki, mis on mõeldud responsiivsete veebirakenduste loomiseks.
Järgmine selles SAP FIORI õpetuses näete allpool viisardi osa, kus peate looma esialgse vaate. Esialgne vaade on vaade, mis kuvatakse rakendusele juurdepääsu korral esimesena.
Siin tuleb määrata vaate nimi ja valida vaate tüüp. SAPUI5 toetab nelja tüüpi vaadet, nagu ülaltoodud ekraanil näha. Nii et kasutajaliides a SAPUI5 rakendust saab luua kasutades JavaSkript või XML või JSON või HTML, olenevalt sellest, kumb keel teile sobib.
Viisardi lõpus luuakse uus projekt, mis kuvatakse projektihalduri aknas. Eclipse nagu allpool.
2. samm) Component.js kood
Järgmisena loome Component.js faili ja kirjutame sinna alloleva koodi.
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"); }, });
3. samm) Index.html kood
Järgmisena käsime oma index.html failil laadida Component.js rakenduse avamisel. Kirjutage allolev kood index.html faili.
<!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>
Samm 4) DisplayMonthView.view.xml kood
Järgmisena kirjutame oma kuvatava kuu vaatesse koodi, mis kuvab kuu, mille number on saadud ülemkomponendilt.
<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>
Pärast ülaltoodud koodi kleepimist peaks teie vaade välja nägema allpool näidatud.
Samm 5) DisplayMonthView.controller.js kood
Ja lõpuks kirjutame DisplayMonthView'i kontrollerifaili koodi.
Kood on kirjutatud ainult onInit() konksumeetodis, seega kleebitakse siia ainult see. Ülejäänud fail genereeritakse raamistiku poolt.
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); },
6. samm) Rakenduse juurutamine SAP NetWeaveri lüüsiserver
Rakenda projekt ja anna ABAP-i esiserveris genereeritud BSP-rakendusele tehniline nimi. Olgu see nimi zdisplaykuuTeie projekt peaks välja nägema allpool näidatud viisil.
2. OSA) Põhikomponendi loomine
Nüüd on aeg luua uus komponent (vanemkomponent), mis kasutab selles õpetuses seni loodud komponenti.
Samm 1) Looge uus SAPUI5 rakendus
Avage Fail->Uus->Muu->SAPUI5 rakenduste arendus->rakenduse projekt. Seejärel järgige uue loomiseks viisardi juhiseid SAPUI5 rakendusprojekt. Seda on üksikasjalikult kirjeldatud ülaltoodud õpetuse 1. osa 1. sammus.
Ülemkomponendi projekti nimi on PassinumberPärast juurutamist genereeritud BSP-rakenduse tehniline nimi on zpassnumProjekti struktuur näeb välja selline, nagu allpool näidatud.
Kirjutame nüüd koodi failidesse index.html, Component.js, PassNum.view.xml ja PassNum.controller.js.
2. samm) Allikas Code Ülemkomponendi Index.html failist
<!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>
Samm 3) Põhikomponendi faili Component.js lähtekood
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"); }, });
Samm 4) Faili PassNum.view.xml lähtekood
<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>
Pärast ülaltoodud koodi kasutamist oma vaates peaks teie vaade välja nägema allpool näidatud viisil.
Samm 5) PassNum.controller.js lähtekood
Ainult onInit() meetodit on muudetud. Kõik muu selles failis jääb samaks.
onInit: function() { jQuery.sap.registerModulePath("DisplayMonth", "../zdisplaymonth"); }, clickbutton:function(oEvent) { sap.ui.getCore().getEventBus().publish("exchange", "data", oEvent.oSource.sId.split("--")[1]); }
6. samm) emakomponendi juurutamine SAP NetWeaveri lüüsiserver
Paigalda rakendus ABAP-i esiserverisse ja käivita see. Selle käivitamiseks paremklõpsa projektil ja vali suvand „Käivita ABAP-serveris“.
Allpool URL avaneb Eclipse brauser.
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html
Kopeeri URL ja käivitage see brauseris. Ülaltoodud hostinimes (kollasega märgitud) on teie ABAP-i esiserveri hostinimi.
Väljund
Klõpsa nupul „Esimene“ ja jaanuar peaks ilmuma alamkomponendis.
Nautige kaunite ja tundlike veebirakenduste loomist SAPUI5.
