SAPUI5 õpetus algajatele
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 Architecture, esimene kast, st "Seadmed" näitavad seadmeid, millel UI5 rakendused töötavad. UI5 rakendustele pääseb juurde mobiilirakenduse või nende seadmete mis tahes brauseri kaudu. Seda arhitektuurikihti nimetatakse "Esitluskihiks".
SAPUI5 rakendused ja oData teenused asuvad SAP NetWeaveri lüüsiserver. Seda arhitektuurikihti nimetatakse rakenduskihiks.
Sisse on rakendatud tegelik äriloogika SAP põhisüsteemid nagu ECC, CRM ja BW jne... Äriloogikat saab rakendada kasutades SAP programmid ja funktsioonimoodulid. SAP tehingu- ja põhiandmed asuvad SAP süsteemid. Seda arhitektuuri kihti nimetatakse andmebaasikihiks või püsivuskihiks.
SAPUI5 komponent
Komponent on osa töötavast koodist, mida kasutatakse vajaduse korral uuesti. Saadaval on 2 tüüpi komponente SAPUI5
- UI komponendid – need esindavad kasutajaliidese elemente sisaldavat kasutajaliidest. Need põhinevad SPAUI5 klassil nimega sap.ui.core.UIComponent
- Näota komponendid – neil pole kasutajaliidest. 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 jaoks komponendina toimimiseks kohustuslik. Component.js fail on komponendi kontroller.
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 ja installitud teie varjutusse (SAP Arendustööriistad Eclipse Luna - https://tools.hana.ondemand.com/luna/)
- SAP Sisselogimisplaat on installitud ja teil on juurdepääs SAP NetWeaver Gateway süsteem selle rakenduse juurutamiseks ja testimiseks, mida me selles ajaveebis ehitame.
Kui rakendus on täielikult üles ehitatud, peaks see välja nägema järgmine:
Selle SAPUI5 õpetuste juhend, loome 2 komponenti, nimelt vanemkomponent ja alamkomponent. Esiteks loome alamkomponendi ja seejärel tarbime seda emakomponendis.
Hakkame käsi määrima.
1. osa) Looge lapserakendus
Meie eesmärk on luua alamkomponent, mis aktsepteerib numbreid vahemikus 1 kuni 12 ja kuvab kuu nime. Näiteks saab see 3; see peaks näitama "Märt".
Samm 1) Looge kasutajaliidese projekt
Avage Fail->Uus->Muu->SAPUI5 rakenduste arendus->rakenduse projekt.
Looge rakendusprojekt SAPUI5, järgides avanevat viisardit. Vaadake allpool olevat ekraanipilti.
Sisestage projekti nimi, jätke ülejäänud valikud samaks, nagu viisard soovitas.
Ülaltoodud ekraanipildil on raadionuppudena kuvatud kahte tüüpi teeke
- sap.m
- sap.ui.commons
Kui valite sap.m, käsite viisardil luua UI5 rakenduse projekt, mille alglaadimise jaotis sisaldab automaatselt sap.m teeki, mis on mõeldud reageeriva veebirakenduse loomiseks.
Järgmine selles SAP FIORI õpetus, näete allpool viisardi jaotist, kus peate looma esialgse vaate. Algvaade on vaade, mis renderdatakse rakendusele juurdepääsul esimesena.
Siin tuleb anda 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 Javascript või XML või JSON või HTML-i, olenevalt sellest, mis keeles olete rahul.
Nõustaja lõpus luuakse uus projekt ja see kuvatakse Project Exploreri aknas Eclipse nagu allpool.
2. samm) Component.js kood
Järgmiseks loome faili Component.js ja kirjutame sellesse alla 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 ütleme välja faili index.html, millesse Component.js laadida SAPUI5, kui rakendusele pääsete juurde brauserist. Nii et kirjutage alla kood faili 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>
Samm 4) DisplayMonthView.view.xml kood
Järgmisena kirjutame oma kuvamiskuu vaatesse koodi, mis kuvab kuud, mille kuu number on saadud emakomponendilt.
<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 järgmine:
Samm 5) DisplayMonthView.controller.js kood
Ja lõpuks kirjutame DisplayMonthView kontrolleri faili koodi.
Kood on kirjutatud ainult selle kontrolleri meetodis onInit() hook, seega kleebitakse siia ainult onInit() kood. Ülejäänud fail on raamistiku loodud.
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
Juurutage projekt ja andke tehniline nimi BSP-rakendusele, mis luuakse ABAP-i esiserveris. Las nimi olla zdisplaykuu. Siinkohal peaks teie rakendusprojekt välja nägema järgmine.
2. OSA) Põhikomponendi loomine
Nüüd on aeg luua uus komponent (emakomponent), mis kasutab ära 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.
Põhikomponendi projekti nimi on PassNum. Ja pärast kasutuselevõttu loodud BSP-rakenduse tehniline nimi SAPABAP-i esiserveri UI5 komponent on zpassnum. Projekti struktuur näeb välja järgmine
Kirjutame nüüd koodi failidesse index.html, Component.js ja PassNum.view.xml ja PassNum.controller.js
2. samm) põhikomponendi Index.html lähtekood
<!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 selline, nagu allpool
Samm 5) PassNum.controller.js lähtekood
Muudetud on ainult meetodit onInit(). 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
Juurutage rakendus ABAP-i esiserverisse ja käivitage see. Peaksite saama seda käivitada, paremklõpsates projektil ja klõpsates valikul "Käivita ABAP-serveris".
Allolev URL avaneb eclipse'i brauseris.
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html
Kopeerige URL ja käivitage see tegelikus brauseris. Ülaltoodud kollasega tähistatud hostinimes on teie ABAP-i esiserveri hostinimi.
Väljund
Klõpsake nuppu "Esimene", jaanuar peaks kuvama alamkomponendis.
Nautige kaunite ja tundlike veebirakenduste loomist SAPUI5.
kokkuvõte
Selle SAPUI5 õpetusest oleme õppinud:
- SAPUI5 uuritud: SAPUI5 on seeria uusim SAP UI arendustehnoloogiad.
- Mis on SAP UI5: SAPUI5 on teekide komplekt, mida kasutatakse tundlike veebirakenduste loomiseks
- . \ T SAPUI5 arhitektuur on seadmed, klient, NetWeaveri lüüs, püsivuskiht
- A SAPUI5 komponent on osa töötavast koodist, mida kasutatakse vajaduse korral uuesti
- Tüübid SAPUI5 komponent on 1) kasutajaliidese komponendid, 2) näota komponendid
- Õppisime ühe sapui5 komponendi tarbimisest teise sapui5 komponendiks ja andmete edastamisest kahe komponendi vahel