SAPΕκμάθηση UI5 για αρχάριους
Τζέσικα Μπλέικ
⚡ Έξυπνη Σύνοψη
SAPΤο UI5 είναι SAPΤο ευέλικτο πλαίσιο HTML5 του που υποστηρίζει εταιρικές εφαρμογές ιστού σε υπολογιστές, κινητές συσκευές και συσκευές tablet. Αυτή η αναλυτική παρουσίαση εξηγεί την αρχιτεκτονική MVC, το μοντέλο στοιχείων, τις βιβλιοθήκες και τον τρόπο δημιουργίας γονικών και θυγατρικών στοιχείων μέσα σε αυτά. Eclipse.
Τι είναι SAPUI5;
SAPIU5 είναι ένα σύνολο βιβλιοθηκών για τη δημιουργία αποκριτικών εφαρμογών ιστού που εκτελούνται σε πολλές συσκευές όπως Desktop, Mobile και Tablet. SAPΤο UI5 λειτουργεί Έννοια MVC να επιταχύνει τον κύκλο ανάπτυξης δημιουργώντας δεδομένα, επιχειρηματική λογική και αναπαράσταση δεδομένων ξεχωριστά στην προβολή. Έτσι, η ανάπτυξη της προβολής και του ελεγκτή μπορεί να πραγματοποιηθεί ανεξάρτητα για τη δημιουργία μοντέλων (δοχεία δεδομένων).
SAPΤο UI5 είναι το πιο πρόσφατο στη σειρά SAP Τεχνολογίες ανάπτυξης διεπαφής χρήστη. Προκειμένου να παρέχεται ενοποίηση ιστού για το υποκείμενο SAP σύστημα ERP, SAP ανέπτυξε πολλές τεχνολογίες ανάπτυξης διεπαφής χρήστη όπως BSP (σελίδες διακομιστή επιχειρήσεων), PDK (κιτ ανάπτυξης πύλης), Web Dynpro Java, Web Dynpro ABAP. Και ο διάδοχος του Web Dynpro ABAP είναι SAPUI5.
SAPIU5 Archiδομή
SAPUI Archiδιάγραμμα δομής
Στα παραπάνω ArchiΣτην αρχιτεκτονική, το πρώτο πλαίσιο «Συσκευές» υποδεικνύει τις συσκευές στις οποίες εκτελούνται οι εφαρμογές UI5. Η πρόσβαση στις εφαρμογές UI5 είναι δυνατή μέσω μιας εφαρμογής για κινητά ή οποιουδήποτε προγράμματος περιήγησης. Αυτό το επίπεδο ονομάζεται «Επίπεδο παρουσίασης».
SAPΟι εφαρμογές UI5 και οι υπηρεσίες oData βρίσκονται στο SAP NetWeaver Gateway Server. Αυτό το επίπεδο της αρχιτεκτονικής ονομάζεται «Επίπεδο Εφαρμογής».
Η πραγματική επιχειρηματική λογική εφαρμόζεται στο SAP βασικά συστήματα όπως ECC, CRM και BW. Η επιχειρηματική λογική μπορεί να υλοποιηθεί χρησιμοποιώντας SAP προγράμματα και λειτουργικές μονάδες. SAP τα δεδομένα συναλλαγών και τα κύρια δεδομένα κατοικούν SAP συστήματα. Αυτό το επίπεδο ονομάζεται «Επίπεδο Βάσης Δεδομένων» ή «Επίπεδο Επιμονής».
SAPΣτοιχείο UI5
Ένα Στοιχείο είναι ένα κομμάτι επαναχρησιμοποιήσιμου κώδικα. Υπάρχουν 2 τύποι στοιχείων που παρέχονται από SAPUI5:
- Στοιχεία UI – Αυτά αντιπροσωπεύουν μια διεπαφή χρήστη που περιέχει στοιχεία UI. Αυτά βασίζονται στο SAPΚλάση UI5 που ονομάζεται sap.ui.core.UIComponent
- Στοιχεία χωρίς πρόσωπο – Δεν διαθέτουν διεπαφή χρήστη. Βασίζονται στο SAPΚλάση UI5 που ονομάζεται sap.ui.core.Component
Ουσιαστικά, ένα Component είναι ένας φάκελος. Όταν δημιουργείτε ένα νέο SAPΕφαρμογή UI5, θα μπορείτε να δείτε μια δομή φακέλου που δημιουργήθηκε στην εξερεύνηση του έργου σας όπως παρακάτω.
Σε αυτήν την εφαρμογή UI5, το PassNum είναι ένα Component. Το αρχείο Component.js είναι υποχρεωτικό για να συμπεριφέρεται μια εφαρμογή UI5 ως Component.
Επόμενο σε αυτό SAPIU5 Eclipse tutorial, θα μάθουμε πώς να ρυθμίζουμε SAPUI5.
SAPΡύθμιση UI5
Πριν ξεκινήσουμε, πρέπει να βεβαιωθείτε ότι:
- Eclipse (έκδοση Luna) είναι εγκατεστημένη στον φορητό υπολογιστή σας
- SAP Εργαλεία Ανάπτυξης για Eclipse Το Luna είναι εγκατεστημένο στο δικό σας Eclipse (SAP Εργαλεία Ανάπτυξης για Eclipse Λούνα - https://tools.hana.ondemand.com/luna/)
- SAP Το Logon Pad είναι εγκατεστημένο και έχετε πρόσβαση στο SAP Σύστημα NetWeaver Gateway για την ανάπτυξη και δοκιμή της εφαρμογής που θα δημιουργήσουμε σε αυτό το ιστολόγιο.
Αφού κατασκευαστεί πλήρως η εφαρμογή, θα πρέπει να μοιάζει με το παρακάτω:
Σε αυτή τη SAPΣτον οδηγό εκπαιδευτικών προγραμμάτων UI5, θα δημιουργήσουμε 2 στοιχεία με τα ονόματα Parent Component και Child Component. Αρχικά, θα δημιουργήσουμε το Child Component και στη συνέχεια θα το χρησιμοποιήσουμε στο Parent component.
Ας αρχίσουμε να λερώνουμε τα χέρια μας.
Μέρος 1) Δημιουργία εφαρμογής για παιδιά
Στόχος μας είναι να δημιουργήσουμε ένα θυγατρικό στοιχείο που θα δέχεται έναν αριθμό από το 1 έως το 12 και θα εμφανίζει το όνομα του μήνα. Για παράδειγμα, όταν λάβει 3, θα πρέπει να εμφανίζει την ένδειξη «Μάρτιος».
Βήμα 1) Δημιουργήστε το UI Project
Μεταβείτε στο Αρχείο->Νέο->Άλλο->SAPΑνάπτυξη Εφαρμογών UI5->Έργο Εφαρμογών.
Δημιουργήστε ένα έργο εφαρμογής για SAPUI5 ακολουθώντας τον οδηγό. Δείτε το στιγμιότυπο οθόνης παρακάτω.
Εισαγάγετε το όνομα του έργου και αφήστε τις υπόλοιπες επιλογές να παραμείνουν όπως προτείνονται από τον οδηγό.
Στο παραπάνω στιγμιότυπο οθόνης, εμφανίζονται 2 τύποι βιβλιοθηκών ως κουμπιά επιλογής:
- χυμός.μ
- sap.ui.commons
Όταν επιλέγετε sap.m, δίνετε εντολή στον οδηγό να δημιουργήσει ένα έργο εφαρμογής UI5 του οποίου η ενότητα bootstrap θα περιλαμβάνει αυτόματα τη βιβλιοθήκη sap.m, η οποία προορίζεται για τη δημιουργία εφαρμογών ιστού που ανταποκρίνονται στις ανάγκες του χρήστη.
Επόμενο σε αυτό SAP Στο σεμινάριο FIORI, θα δείτε την ενότητα του οδηγού παρακάτω όπου πρέπει να δημιουργήσετε την αρχική προβολή. Μια αρχική προβολή είναι μια προβολή που θα αποδοθεί πρώτη κατά την πρόσβαση στην εφαρμογή.
Εδώ πρέπει να δώσετε το όνομα της προβολής και να επιλέξετε τον τύπο της προβολής. SAPΤο UI5 υποστηρίζει 4 τύπους προβολής όπως φαίνεται στην παραπάνω οθόνη. Έτσι το UI του α SAPΗ εφαρμογή UI5 μπορεί να κατασκευαστεί χρησιμοποιώντας JavaΣενάριο ή XML ή JSON ή HTML, όποια γλώσσα σας ταιριάζει.
Στο τέλος του οδηγού, θα δημιουργηθεί ένα νέο έργο και θα εμφανιστεί στο παράθυρο Εξερεύνησης Έργων του Eclipse όπως παρακάτω.
Βήμα 2) Κώδικας Component.js
Στη συνέχεια, ας δημιουργήσουμε ένα αρχείο Component.js και ας γράψουμε τον παρακάτω κώδικα σε αυτό.
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) Κωδικός Index.html
Στη συνέχεια, ας πούμε στο αρχείο index.html να φορτώσει το Component.js όταν γίνεται πρόσβαση στην εφαρμογή. Γράψτε τον παρακάτω κώδικα στο αρχείο 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>
Βήμα 4) Κώδικας DisplayMonthView.view.xml
Στη συνέχεια, ας γράψουμε κώδικα στην προβολή displaymonth για να εμφανίσουμε τον Μήνα του οποίου ο αριθμός λαμβάνεται από το γονικό Στοιχείο.
<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>
Αφού επικολλήσετε τον παραπάνω κώδικα, η προβολή σας θα πρέπει να μοιάζει με την παρακάτω.
Βήμα 5) Κώδικας DisplayMonthView.controller.js
Και τέλος, ας γράψουμε τον κώδικα του αρχείου Controller του DisplayMonthView.
Ο κώδικας γράφεται μόνο με τη μέθοδο hook onInit(), επομένως μόνο αυτή επικολλάται εδώ. Το υπόλοιπο αρχείο είναι όπως δημιουργήθηκε από το 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); },
Βήμα 6) Ανάπτυξη της εφαρμογής στις SAP Διακομιστής πύλης NetWeaver
Αναπτύξτε το έργο και δώστε το τεχνικό όνομα της εφαρμογής BSP που δημιουργήθηκε στον διακομιστή frontend του ABAP. Έστω το όνομα zdisplaymonthΤο έργο σας θα πρέπει να μοιάζει με την παρακάτω.
ΜΕΡΟΣ 2) Δημιουργία γονικού στοιχείου
Τώρα είναι η ώρα να δημιουργήσουμε ένα νέο Component (Parent Component) το οποίο θα καταναλώσει το Component που δημιουργήσαμε μέχρι στιγμής σε αυτό το σεμινάριο.
Βήμα 1) Δημιουργήστε ένα νέο SAPΕφαρμογή UI5
Μεταβείτε στο Αρχείο->Νέο->Άλλο->SAPUI5 Ανάπτυξη Εφαρμογών->Έργο Εφαρμογών. Στη συνέχεια, ακολουθήστε τις οδηγίες του οδηγού για να δημιουργήσετε ένα νέο SAPΈργο εφαρμογής UI5. Αυτό έχει περιγραφεί λεπτομερώς στο Βήμα 1 του Μέρους 1 σε αυτό το σεμινάριο παραπάνω.
Το όνομα του έργου γονικού στοιχείου είναι ΑριθμόςΚωδικούΤο τεχνικό όνομα της εφαρμογής BSP που δημιουργείται μετά την ανάπτυξη είναι zpassnumΗ δομή του έργου θα μοιάζει με την παρακάτω.
Ας γράψουμε τώρα κώδικα σε αρχεία index.html, Component.js, PassNum.view.xml και PassNum.controller.js.
Βήμα 2) Πηγή Code του 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-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>
Βήμα 3) Πηγαίος κώδικας του αρχείου Component.js του Parent 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"); }, });
Βήμα 4) Πηγαίος κώδικας του αρχείου 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>
Αφού χρησιμοποιήσετε τον παραπάνω κώδικα στην προβολή σας, η προβολή σας θα πρέπει να μοιάζει με την παρακάτω.
Βήμα 5) Πηγαίος κώδικας του PassNum.controller.js
Μόνο η μέθοδος onInit() έχει αλλάξει. Όλα τα άλλα σε αυτό το αρχείο παραμένουν τα ίδια.
onInit: function() { jQuery.sap.registerModulePath("DisplayMonth", "../zdisplaymonth"); }, clickbutton:function(oEvent) { sap.ui.getCore().getEventBus().publish("exchange", "data", oEvent.oSource.sId.split("--")[1]); }
Βήμα 6) Ανάπτυξη του γονικού στοιχείου σε SAP Διακομιστής πύλης NetWeaver
Αναπτύξτε την εφαρμογή στον διακομιστή frontend του ABAP και εκτελέστε την. Θα πρέπει να μπορείτε να την εκτελέσετε κάνοντας δεξί κλικ στο έργο και κάνοντας κλικ στην επιλογή «Εκτέλεση σε διακομιστή ABAP».
Η παρακάτω URL θα ανοίξει στο Eclipse περιήγησης.
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html
αντιγράψτε το URL και εκτελέστε το στο πραγματικό πρόγραμμα περιήγησης. Στο παραπάνω όνομα κεντρικού υπολογιστή (σημειωμένο με κίτρινο) βρίσκεται το όνομα κεντρικού υπολογιστή του διακομιστή frontend ABAP.
Παραγωγή
Κάντε κλικ στο κουμπί «Πρώτο» και ο Ιανουάριος θα πρέπει να εμφανιστεί στο θυγατρικό στοιχείο.
Απολαύστε τη δημιουργία όμορφων, αποκριτικών εφαρμογών web χρησιμοποιώντας SAPUI5.
