SAPVýukový program UI5 pro začátečníky
Jessica Blakeová
⚡ Chytré shrnutí
SAPUI5 je SAPResponzivní framework HTML5, který pohání podnikové webové aplikace na stolních počítačích, mobilních zařízeních a tabletech. Tato ukázka vysvětluje architekturu MVC, model komponent, knihovny a jak uvnitř vytvářet nadřazené a podřízené komponenty. Eclipse.
Co je to SAPUI5?
SAPUI5 je sada knihoven pro vytváření responzivních webových aplikací, které běží na více zařízeních, jako jsou stolní počítače, mobily a tablety. SAPUI5 funguje Koncept MVC urychlit vývojový cyklus vytvářením dat, obchodní logiky a reprezentace dat odděleně v pohledu. Vývoj pohledu a ovladače tedy může probíhat nezávisle a vytvářet modely (datové kontejnery).
SAPUI5 je nejnovější v řadě SAP Technologie vývoje uživatelského rozhraní. Aby bylo možné zajistit webovou integraci pro základní SAP ERP systém, SAP přišel s několika technologiemi pro vývoj uživatelského rozhraní, jako je BSP (stránky obchodního serveru), PDK (portal development kit), Web Dynpro Java, Web Dynpro ABAP. A nástupcem Web Dynpro ABAP je SAPUI5.
SAPUI5 Architecture
SAPUI Architecture Diagram
Ve výše uvedeném ArchiV textu první pole „Zařízení“ označuje zařízení, na kterých běží aplikace UI5. K aplikacím UI5 lze přistupovat prostřednictvím mobilní aplikace nebo libovolného prohlížeče. Tato vrstva se nazývá „prezentační vrstva“.
SAPAplikace UI5 a služby oData se nacházejí na SAP Server NetWeaver Gateway. Tato vrstva architektury se nazývá „aplikační vrstva“.
Skutečná obchodní logika je implementována v SAP základní systémy jako ECC, CRM a BW. Obchodní logiku lze implementovat pomocí SAP programy a funkční moduly. SAP transakční a kmenová data jsou uložena SAP systémy. Tato vrstva se nazývá „databázová vrstva“ nebo „persistence vrstva“.
SAPKomponenta UI5
Komponenta je kus kódu, který lze znovu použít. Existují 2 typy komponent, které poskytuje SAPUI5:
- Komponenty uživatelského rozhraní – Představují uživatelské rozhraní obsahující prvky uživatelského rozhraní. Jsou založeny na SAPTřída UI5 s názvem sap.ui.core.UIComponent
- Beztvářné komponenty – Tyto nemají uživatelské rozhraní. Jsou založeny na SAPTřída UI5 s názvem sap.ui.core.Component
Komponenta je v podstatě složka. Když vytvoříte nový SAPUI5, budete moci vidět strukturu složek vytvořenou v průzkumníku projektu, jak je uvedeno níže.
V této aplikaci UI5 je PassNum komponentou. Soubor Component.js je povinný pro to, aby se aplikace UI5 chovala jako komponenta.
Další v tomto SAPUI5 Eclipse tutoriálu, naučíme se, jak nastavit SAPUI5.
SAPNastavení UI5
Než začneme, musíte se ujistit, že:
- Eclipse (verze Luna) je nainstalována na vašem notebooku
- SAP Vývojové nástroje pro Eclipse Luna je nainstalována na vašem Eclipse (SAP Vývojové nástroje pro Eclipse Luna - https://tools.hana.ondemand.com/luna/)
- SAP Přihlašovací klávesnice je nainstalována a máte přístup k SAP Systém NetWeaver Gateway pro nasazení a testování aplikace, kterou budeme v tomto blogu vytvářet.
Po úplném sestavení aplikace by měla vypadat takto:
V tomto SAPV tutoriálu k UI5 vytvoříme 2 komponenty s názvem Nadřazená komponenta a Podřízená komponenta. Nejprve vytvoříme Podřízenou komponentu a poté ji budeme používat v Nadřazené komponentě.
Začneme si špinit ruce.
Část 1) Vytvoření podřízené aplikace
Naším cílem je vytvořit podřízenou komponentu, která bude přijímat číslo od 1 do 12 a zobrazovat název měsíce. Například, když obdrží hodnotu 3, měla by zobrazit „březen“.
Krok 1) Vytvořte projekt uživatelského rozhraní
Přejděte na Soubor->Nový->Další->SAPVývoj aplikací UI5 -> Aplikační projekt.
Vytvořte projekt aplikace pro SAPUI5 podle pokynů průvodce. Viz snímek obrazovky níže.
Zadejte název projektu a ostatní výběry nechte tak, jak je navrhl průvodce.
Na výše uvedeném snímku obrazovky jsou zobrazeny 2 typy knihoven jako přepínače:
- sap.m
- sap.ui.commons
Když vyberete sap.m, sdělíte průvodci, aby vytvořil projekt aplikace UI5, jehož bootstrapová sekce bude automaticky obsahovat knihovnu sap.m, která je určena pro vytváření responzivních webových aplikací.
Další v tomto SAP V tutoriálu FIORI uvidíte níže uvedenou část průvodce, kde je třeba vytvořit počáteční zobrazení. Počáteční zobrazení je zobrazení, které se vykreslí jako první při přístupu k aplikaci.
Zde je třeba zadat název zobrazení a vybrat typ zobrazení. SAPUI5 podporuje 4 typy zobrazení, jak je patrné na obrazovce výše. Takže uživatelské rozhraní a SAPAplikace UI5 může být sestavena pomocí JavaSkript nebo XML nebo JSON nebo HTML, podle toho, který jazyk vám vyhovuje.
Na konci průvodce bude vytvořen nový projekt a zobrazen v okně Průzkumník projektů. Eclipse jako níže.
Krok 2) Kód Component.js
Dále si vytvořme soubor Component.js a napíšeme do něj níže uvedený kód.
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"); }, });
Krok 3) Kód Index.html
Dále řekněme našemu souboru index.html, aby načetl Component.js při přístupu k aplikaci. Do souboru index.html napište níže uvedený kód.
<!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>
Krok 4) Kód DisplayMonthView.view.xml
Dále si v našem zobrazení displaymonth napíšeme kód, který zobrazí měsíc, jehož číslo je přijato z nadřazené komponenty.
<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>
Po vložení výše uvedeného kódu by váš pohled měl vypadat takto.
Krok 5) Kód DisplayMonthView.controller.js
A nakonec si napišme kód souboru Controller pro DisplayMonthView.
Kód je napsán pouze v metodě hook onInit(), takže se zde vkládá pouze ten. Zbytek souboru je tak, jak ho vygeneroval 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); },
Krok 6) Nasazení aplikace na SAP Server brány NetWeaver
Nasaďte projekt a zadejte technický název BSP aplikace generované na frontendovém serveru ABAP. Nechť název bude zdisplaymonthVáš projekt by měl vypadat takto.
ČÁST 2) Vytvoření nadřazené komponenty
Nyní je čas vytvořit novou komponentu (nadřazenou komponentu), která bude využívat komponentu, kterou jsme dosud v tomto tutoriálu vytvořili.
Krok 1) Vytvořte nový SAPaplikace UI5
Přejděte na Soubor->Nový->Další->SAPVývoj aplikací UI5->Aplikační projekt. Poté postupujte podle pokynů průvodce a vytvořte nový SAPProjekt aplikace UI5. To bylo podrobně popsáno v kroku 1 části 1 v tomto tutoriálu výše.
Název nadřazeného projektu komponenty je Číslo_přístupuTechnický název aplikace BSP vygenerované po nasazení je zpassnumStruktura projektu bude vypadat níže.
Nyní si napišme kód do souborů index.html, Component.js, PassNum.view.xml a PassNum.controller.js.
Krok 2) Zdroj Code souboru Index.html nadřazené komponenty
<!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>
Krok 3) Zdrojový kód souboru Component.js nadřazené komponenty
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"); }, });
Krok 4) Zdrojový kód souboru 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>
Po použití výše uvedeného kódu ve vašem zobrazení by vaše zobrazení mělo vypadat takto.
Krok 5) Zdrojový kód PassNum.controller.js
Změněna byla pouze metoda onInit(). Všechno ostatní v tomto souboru zůstává stejné.
onInit: function() { jQuery.sap.registerModulePath("DisplayMonth", "../zdisplaymonth"); }, clickbutton:function(oEvent) { sap.ui.getCore().getEventBus().publish("exchange", "data", oEvent.oSource.sId.split("--")[1]); }
Krok 6) Nasazení nadřazené komponenty do SAP Server brány NetWeaver
Nasaďte aplikaci na frontendový server ABAP a spusťte ji. Měli byste ji být schopni spustit kliknutím pravým tlačítkem myši na projekt a výběrem možnosti „Spustit na serveru ABAP“.
Níže URL se otevře v Eclipse prohlížeč.
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html
Zkopírujte URL a spusťte jej v samotném prohlížeči. Ve výše uvedeném názvu hostitele (označeném žlutě) je název hostitele vašeho frontendového serveru ABAP.
Výstup
Klikněte na tlačítko „První“ a v podřízené komponentě by se měl zobrazit leden.
Užijte si vytváření krásných, responzivních webových aplikací pomocí SAPUI5.
