SAPSamouczek UI5 dla początkujących
Jessiki Blake
⚡ Inteligentne podsumowanie
SAPUI5 to jest SAPResponsywny framework HTML5 firmy , który napędza korporacyjne aplikacje internetowe na komputerach stacjonarnych, urządzeniach mobilnych i tabletach. Ten przewodnik wyjaśnia architekturę MVC, model komponentów, biblioteki oraz sposób tworzenia komponentów nadrzędnych i podrzędnych. Eclipse.
Czym jest SAPInterfejs użytkownika5?
SAPUI5 to zestaw bibliotek do tworzenia responsywnych aplikacji internetowych, które działają na wielu urządzeniach, takich jak komputery stacjonarne, urządzenia mobilne i tablety. SAPUI5 działa Koncepcja MVC aby przyspieszyć cykl rozwoju poprzez oddzielne tworzenie danych, logiki biznesowej i reprezentacji danych w widoku. Zatem rozwój widoku i kontrolera może odbywać się niezależnie w celu tworzenia modeli (kontenerów danych).
SAPUI5 to najnowszy produkt z serii SAP Technologie tworzenia interfejsu użytkownika. Aby zapewnić integrację internetową dla instrumentu bazowego SAP systemu ERP, SAP wymyślił wiele technologii tworzenia interfejsu użytkownika, takich jak BSP (strony serwerów biznesowych), PDK (zestaw do tworzenia portali), Web Dynpro Java, Web Dynpro ABAP. A następcą Web Dynpro ABAP jest SAPInterfejs użytkownika5.
SAPUI5 Architektura
SAPUI ArchiSchemat tecture
W powyższym ArchiW przypadku architektury, pierwsze pole „Urządzenia” wskazuje urządzenia, na których działają aplikacje UI5. Dostęp do aplikacji UI5 można uzyskać za pośrednictwem aplikacji mobilnej lub dowolnej przeglądarki. Ta warstwa nazywa się „warstwą prezentacji”.
SAPAplikacje UI5 i usługi oData znajdują się na SAP Serwer bramy NetWeaver. Ta warstwa architektury nazywana jest „warstwą aplikacji”.
Rzeczywista logika biznesowa jest zaimplementowana w SAP systemy bazowe, takie jak ECC, CRM i BW. Logikę biznesową można wdrożyć za pomocą SAP programy i moduły funkcyjne. SAP transakcyjne i dane podstawowe, na których znajdują się dane SAP systemów. Ta warstwa nazywana jest „warstwą bazy danych” lub „warstwą trwałości”.
SAPKomponent interfejsu użytkownika5
Komponent to fragment kodu wielokrotnego użytku. Istnieją dwa typy komponentów udostępniane przez SAPInterfejs użytkownika5:
- Komponenty interfejsu użytkownika – reprezentują interfejs użytkownika zawierający elementy interfejsu użytkownika. Są one oparte na SAPKlasa UI5 o nazwie sap.ui.core.UIComponent
- Komponenty bezosobowe – nie posiadają interfejsu użytkownika. Opierają się na SAPKlasa UI5 o nazwie sap.ui.core.Component
Zasadniczo komponent jest folderem. Kiedy tworzysz nowy SAPUI5, będziesz mógł zobaczyć strukturę folderów utworzoną w eksploratorze projektu, jak poniżej.
W tej aplikacji UI5 PassNum jest komponentem. Plik Component.js jest obowiązkowy, aby aplikacja UI5 zachowywała się jak komponent.
Dalej w tym SAPUI5 Eclipse tutorial, nauczymy się jak skonfigurować SAPInterfejs użytkownika5.
SAPKonfiguracja interfejsu użytkownika5
Zanim zaczniemy, musisz się upewnić, że:
- Eclipse (wersja Luna) jest zainstalowana na Twoim laptopie
- SAP Narzędzia programistyczne dla Eclipse Luna jest zainstalowana na Twoim Eclipse (SAP Narzędzia programistyczne dla Eclipse Luna - https://tools.hana.ondemand.com/luna/)
- SAP Zainstalowano Logon Pad i masz dostęp do SAP System NetWeaver Gateway do wdrażania i testowania aplikacji, którą będziemy tworzyć w tym blogu.
Po całkowitym zbudowaniu aplikacji, powinna ona wyglądać jak poniżej:
W tym SAPW przewodniku po samouczkach UI5 utworzymy dwa komponenty: komponent nadrzędny i komponent podrzędny. Najpierw utworzymy komponent podrzędny, a następnie wykorzystamy go w komponencie nadrzędnym.
Zacznijmy brudzić sobie ręce.
Część 1) Utwórz aplikację podrzędną
Naszym celem jest stworzenie komponentu podrzędnego, który będzie przyjmował liczbę od 1 do 12 i wyświetlał nazwę miesiąca. Na przykład, po otrzymaniu liczby 3, powinien wyświetlić „Marzec”.
Krok 1) Utwórz projekt interfejsu użytkownika
Przejdź do Plik->Nowy->Inne->SAPRozwój aplikacji UI5 -> Projekt aplikacji.
Utwórz projekt aplikacji dla SAPUI5, postępując zgodnie z instrukcjami kreatora. Zobacz zrzut ekranu poniżej.
Wprowadź nazwę projektu i pozostaw pozostałe wybory sugerowane przez kreatora.
Na powyższym zrzucie ekranu wyświetlane są 2 typy bibliotek jako przyciski radiowe:
- sok.m
- sap.ui.commons
Wybierając sap.m, każesz kreatorowi utworzyć projekt aplikacji UI5, którego sekcja Bootstrap będzie automatycznie zawierać bibliotekę sap.m, przeznaczoną do tworzenia responsywnych aplikacji internetowych.
Dalej w tym SAP W samouczku FIORI zobaczysz sekcję kreatora poniżej, w której musisz utworzyć widok początkowy. Widok początkowy to widok, który zostanie wyrenderowany jako pierwszy po uruchomieniu aplikacji.
Tutaj musisz podać nazwę widoku i wybrać jego typ. SAPUI5 obsługuje 4 typy widoków, co widać na powyższym ekranie. Zatem interfejs użytkownika SAPAplikację UI5 można zbudować przy użyciu JavaSkrypt lub XML lub JSON lub HTML – w zależności od tego, który język jest dla Ciebie odpowiedni.
Po zakończeniu działania kreatora zostanie utworzony nowy projekt, który zostanie wyświetlony w oknie Eksploratora projektów. Eclipse jak poniżej.
Krok 2) Kod Component.js
Następnie utwórzmy plik Component.js i wpiszmy w nim poniższy kod.
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) Kod Index.html
Następnie wprowadźmy w pliku index.html polecenie, aby ładował Component.js podczas dostępu do aplikacji. Wpisz poniższy kod w pliku 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>
Krok 4) Kod DisplayMonthView.view.xml
Następnie napiszmy kod w widoku displaymonth, aby wyświetlić miesiąc, którego numer otrzymano z komponentu nadrzędnego.
<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 wklejeniu powyższego kodu widok powinien wyglądać jak poniżej.
Krok 5) Kod DisplayMonthView.controller.js
Na koniec napiszmy kod pliku kontrolera DisplayMonthView.
Kod jest napisany tylko w metodzie hook onInit(), więc tylko ona jest tutaj wklejona. Reszta pliku jest wygenerowana przez 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) Wdrożenie aplikacji na SAP Serwer bramy NetWeaver
Wdróż projekt i podaj nazwę techniczną aplikacji BSP wygenerowanej na serwerze front-end ABAP. Niech nazwą będzie zmiesiącwyświetlaniaTwój projekt powinien wyglądać tak jak poniżej.
CZĘŚĆ 2) Tworzenie komponentu nadrzędnego
Teraz nadszedł czas na utworzenie nowego komponentu (komponentu nadrzędnego), który będzie wykorzystywał komponent utworzony dotychczas w tym samouczku.
Krok 1) Utwórz nowy SAPAplikacja UI5
Przejdź do Plik->Nowy->Inne->SAPRozwój aplikacji UI5 -> Projekt aplikacji. Następnie postępuj zgodnie z instrukcjami kreatora, aby utworzyć nowy SAPProjekt aplikacji UI5. Zostało to szczegółowo opisane w kroku 1 części 1 w tym samouczku powyżej.
Nazwa projektu komponentu nadrzędnego to Numer hasłaNazwa techniczna aplikacji BSP wygenerowanej po wdrożeniu to zpassnumStruktura projektu będzie wyglądać następująco.
Napiszmy teraz kod w plikach index.html, Component.js, PassNum.view.xml i PassNum.controller.js.
Krok 2) Źródło Code pliku Index.html komponentu nadrzędnego
<!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) Kod źródłowy pliku Component.js komponentu nadrzędnego
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) Kod źródłowy pliku 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 zastosowaniu powyższego kodu w widoku, powinien on wyglądać tak, jak pokazano poniżej.
Krok 5) Kod źródłowy PassNum.controller.js
Zmieniono tylko metodę onInit(). Wszystko inne w tym pliku pozostaje bez zmian.
onInit: function() { jQuery.sap.registerModulePath("DisplayMonth", "../zdisplaymonth"); }, clickbutton:function(oEvent) { sap.ui.getCore().getEventBus().publish("exchange", "data", oEvent.oSource.sId.split("--")[1]); }
Krok 6) Wdrożenie komponentu nadrzędnego w SAP Serwer bramy NetWeaver
Wdróż aplikację na serwerze front-end ABAP i uruchom ją. Powinieneś móc ją uruchomić, klikając prawym przyciskiem myszy projekt i wybierając opcję „Uruchom na serwerze ABAP”.
Poniżej URL otworzy się w Eclipse browser.
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html
Skopiuj URL i uruchom go w przeglądarce. W powyższej nazwie hosta (zaznaczonej na żółto) znajduje się nazwa hosta serwera front-end ABAP.
Wydajność
Kliknij przycisk „Pierwszy”, a styczeń powinien wyświetlić się w komponencie podrzędnym.
Ciesz się tworzeniem pięknych, responsywnych aplikacji internetowych za pomocą SAPInterfejs użytkownika5.
