SAPUI5-zelfstudie voor beginners
Jessica Blake
⚡ Slimme samenvatting
SAPUI5 is SAPHet responsieve HTML5-framework van [naam framework] wordt gebruikt voor zakelijke webapplicaties op desktops, mobiele telefoons en tablets. Deze handleiding legt de MVC-architectuur, het componentmodel, de bibliotheken en het bouwen van ouder- en kindcomponenten binnen [naam framework] uit. Eclipse.
Wat is SAPUI5?
SAPIU5 is een reeks bibliotheken om responsieve webapplicaties te bouwen die op meerdere apparaten draaien, zoals desktop, mobiel en tablet. SAPUI5 werkt aan MVC-concept om de ontwikkelingscyclus te versnellen door gegevens, bedrijfslogica en weergave van gegevens afzonderlijk in de weergave te creëren. Zo kan de ontwikkeling van view en controller zelfstandig plaatsvinden om modellen (datacontainers) te creëren.
SAPUI5 is de nieuwste in de serie SAP UI-ontwikkelingstechnologieën. Om webintegratie voor het onderliggende te bieden SAP ERP-systeem, SAP bedacht meerdere UI-ontwikkelingstechnologieën zoals BSP (Business server-pagina's), PDK (Portal development kit), Web Dynpro Java, Web Dynpro ABAP. En de opvolger van Web Dynpro ABAP is SAPgebruikersinterface5.
SAPIU5 Architectuur
SAPUI Archistructuurdiagram
In bovenstaande ArchiIn de structuur geeft het eerste vak 'Apparaten' aan op welke apparaten UI5-applicaties draaien. UI5-applicaties zijn toegankelijk via een mobiele app of een willekeurige browser. Deze laag wordt de 'presentatielaag' genoemd.
SAPUI5-applicaties en oData-services bevinden zich op de SAP NetWeaver Gateway Server. Deze architectuurlaag wordt de 'applicatielaag' genoemd.
Werkelijke bedrijfslogica wordt geïmplementeerd SAP Kernsystemen zoals ECC, CRM en BW. Bedrijfslogica kan worden geïmplementeerd met behulp van SAP programma's en functiemodules. SAP transactie- en mastergegevens bevinden zich op SAP systemen. Deze laag wordt de 'databaselaag' of 'persistentielaag' genoemd.
SAPUI5-component
Een component is een stuk herbruikbare code. Er zijn twee soorten componenten beschikbaar. SAPUI5:
- UI-componenten – Deze vertegenwoordigen een gebruikersinterface die UI-elementen bevat. Ze zijn gebaseerd op de SAPUI5-klasse genaamd sap.ui.core.UIComponent
- Faceless Components – Deze hebben geen gebruikersinterface. Ze zijn gebaseerd op de SAPUI5-klasse genaamd sap.ui.core.Component
In wezen is een component een map. Wanneer u een nieuw SAPUI5-applicatie, kunt u een mappenstructuur zien die in uw projectverkenner is aangemaakt, zoals hieronder.
In deze UI5-applicatie is PassNum een component. Het bestand Component.js is essentieel voor een UI5-applicatie om zich als een component te gedragen.
Volgende in dit SAPIU5 Eclipse tutorial, we zullen leren hoe te installeren SAPgebruikersinterface5.
SAPUI5-installatie
Voordat we beginnen, moet u ervoor zorgen dat:
- Eclipse (Luna-versie) is op uw laptop geïnstalleerd
- SAP Ontwikkeltools voor Eclipse Luna wordt geïnstalleerd op uw Eclipse (SAP Ontwikkeltools voor Eclipse Luna- https://tools.hana.ondemand.com/luna/)
- SAP Logon Pad is geïnstalleerd en u hebt toegang tot de SAP Het NetWeaver Gateway-systeem gebruiken we voor de implementatie en het testen van de applicatie die we in deze blog gaan bouwen.
Nadat de applicatie volledig is gebouwd, zou deze er als volgt uit moeten zien:
In deze SAPIn deze UI5-tutorialhandleiding maken we twee componenten: een oudercomponent en een kindcomponent. Eerst maken we de kindcomponent aan en vervolgens gebruiken we deze in de oudercomponent.
Laten we beginnen onze handen vuil te maken.
Deel 1) Maak een onderliggende applicatie
Ons doel is om een kindcomponent te maken die een getal van 1 tot 12 accepteert en de naam van de maand weergeeft. Als het bijvoorbeeld 3 ontvangt, moet het 'Maart' weergeven.
Stap 1) Maak het UI-project
Ga naar Bestand->Nieuw->Overig->SAPUI5 Applicatieontwikkeling->Applicatieproject.
Maak een toepassingsproject aan voor SAPUI5 installeren door de wizard te volgen. Zie onderstaande schermafbeelding.
Voer de projectnaam in en laat de overige selecties zoals voorgesteld door de wizard.
In de bovenstaande schermafbeelding worden 2 soorten bibliotheken weergegeven als keuzeknoppen:
- sap.m
- sap.ui.commons
Wanneer je sap.m selecteert, geef je de wizard de opdracht om een UI5-applicatieproject te maken waarvan het bootstrap-gedeelte automatisch de sap.m-bibliotheek zal bevatten. Deze bibliotheek is bedoeld voor het maken van responsieve webapplicaties.
Volgende in dit SAP In deze Fiori-tutorial zie je hieronder een gedeelte van de wizard waar je de initiële weergave moet maken. Een initiële weergave is de weergave die als eerste wordt weergegeven wanneer de applicatie wordt geopend.
Hier moet u de naam van de weergave opgeven en het type weergave selecteren. SAPUI5 ondersteunt 4 weergavetypen, zoals blijkt uit het bovenstaande scherm. Dus de gebruikersinterface van a SAPUI5-applicatie kan worden gebouwd met behulp van JavaScript of XML of JSON of HTML, welke taal je ook het beste beheerst.
Aan het einde van de wizard wordt een nieuw project aangemaakt en weergegeven in het venster Projectverkenner. Eclipse zoals hieronder.
Stap 2) Component.js-code
Laten we vervolgens een Component.js-bestand aanmaken en de onderstaande code daarin schrijven.
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"); }, });
Stap 3) Index.html-code
Laten we vervolgens ons index.html-bestand vertellen dat Component.js moet worden geladen wanneer de applicatie wordt geopend. Voeg de onderstaande code toe aan het index.html-bestand.
<!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>
Stap 4) DisplayMonthView.view.xml-code
Laten we vervolgens code schrijven in onze `displaymonth`-weergave om de maand weer te geven waarvan het nummer afkomstig is van het bovenliggende component.
<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>
Nadat je de bovenstaande code hebt geplakt, zou je weergave er als volgt uit moeten zien.
Stap 5) DisplayMonthView.controller.js-code
En tot slot schrijven we de code voor het controllerbestand van DisplayMonthView.
De code is alleen geschreven in de onInit() hook-methode, dus alleen dat gedeelte is hier weergegeven. De rest van het bestand is gegenereerd door het framework.
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); },
Stap 6) Implementatie van de applicatie op SAP NetWeaver Gateway Server
Implementeer het project en geef de technische naam op van de BSP-applicatie die op de ABAP-frontendserver is gegenereerd. Laat de naam zijn zweergavemaandJe project zou er als volgt uit moeten zien.
DEEL 2) Een bovenliggende component creëren
Nu is het tijd om een nieuwe component (oudercomponent) te maken die de component die we tot nu toe in deze handleiding hebben gemaakt, zal gebruiken.
Stap 1) Maak een nieuwe SAPUI5-applicatie
Ga naar Bestand->Nieuw->Overig->SAPGa naar UI5 Applicatieontwikkeling -> Applicatieproject. Volg vervolgens de instructies van de wizard om een nieuw project te maken. SAPUI5-applicatieproject. Dit is gedetailleerd beschreven in stap 1 van deel 1 in deze tutorial hierboven.
De naam van het bovenliggende componentproject is WachtwoordDe technische naam van de BSP-applicatie die na de implementatie wordt gegenereerd, is zpassnumDe projectstructuur zal er als volgt uitzien.
Laten we nu code schrijven in de bestanden index.html, Component.js, PassNum.view.xml en PassNum.controller.js.
Stap 2) Bron Code van Index.html van het bovenliggende component
<!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>
Stap 3) Broncode van het Component.js-bestand van de bovenliggende 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"); }, });
Stap 4) Broncode van het PassNum.view.xml-bestand
<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>
Nadat je de bovenstaande code in je view hebt gebruikt, zou je view er als volgt uit moeten zien.
Stap 5) Broncode van PassNum.controller.js
Alleen de onInit()-methode is gewijzigd. Al het andere in dit bestand blijft hetzelfde.
onInit: function() { jQuery.sap.registerModulePath("DisplayMonth", "../zdisplaymonth"); }, clickbutton:function(oEvent) { sap.ui.getCore().getEventBus().publish("exchange", "data", oEvent.oSource.sId.split("--")[1]); }
Stap 6) Implementatie van de bovenliggende component naar SAP NetWeaver Gateway Server
Implementeer de applicatie op de ABAP-frontendserver en voer deze uit. Je kunt de applicatie starten door met de rechtermuisknop op het project te klikken en vervolgens de optie 'Uitvoeren op ABAP-server' te selecteren.
Het onderstaande URL zal openen in de Eclipse browser.
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html
Kopieer de URL en voer het uit in de daadwerkelijke browser. In de bovenstaande hostnaam (geel gemarkeerd) staat de hostnaam van uw ABAP-frontendserver.
uitgang
Klik op de knop 'Eerste' en januari zou in het onderliggende onderdeel moeten verschijnen.
Geniet van het maken van prachtige, responsieve webapplicaties met behulp van SAPgebruikersinterface5.
