SAPΕκμάθηση UI5 για αρχάριους

Τι είναι 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διάγραμμα δομής

Στα παραπάνω Architecture, πρώτο πλαίσιο, δηλαδή «Συσκευές» υποδεικνύουν τις συσκευές στις οποίες εκτελούνται οι εφαρμογές UI5. Οι εφαρμογές UI5 είναι προσβάσιμες μέσω μιας εφαρμογής για κινητά ή οποιουδήποτε προγράμματος περιήγησης σε αυτές τις συσκευές. Αυτό το επίπεδο της αρχιτεκτονικής ονομάζεται 'Επίπεδο παρουσίασης'.

SAPΟι εφαρμογές UI5 και οι υπηρεσίες oData βρίσκονται SAP Διακομιστής πύλης NetWeaver. Αυτό το επίπεδο της αρχιτεκτονικής ονομάζεται 'Επίπεδο Εφαρμογής'.

Η πραγματική επιχειρηματική λογική εφαρμόζεται στο SAP βασικά συστήματα όπως ECC, CRM και BW, κ.λπ.… Η επιχειρηματική λογική μπορεί να εφαρμοστεί χρησιμοποιώντας SAP προγράμματα και λειτουργικές μονάδες. SAP τα δεδομένα συναλλαγών και τα κύρια δεδομένα κατοικούν SAP συστήματα. Αυτό το επίπεδο της αρχιτεκτονικής ονομάζεται «Επίπεδο βάσης δεδομένων» ή «στρώμα εμμονής».

SAPΣτοιχείο UI5

Το Component είναι ένα κομμάτι κώδικα εργασίας που επαναχρησιμοποιείται όπου απαιτείται. Υπάρχουν 2 τύποι εξαρτημάτων που παρέχονται από SAPIU5

Στοιχεία διεπαφής χρήστη – Αυτά αντιπροσωπεύουν μια διεπαφή χρήστη που περιέχει στοιχεία διεπαφής χρήστη. Αυτά βασίζονται στην κλάση SPAUI5 που ονομάζεται sap.ui.core.UIComponent
Στοιχεία χωρίς πρόσωπο – Αυτά δεν έχουν διεπαφή χρήστη. Αυτά βασίζονται σε SAPΚλάση UI5 που ονομάζεται sap.ui.core.Component

Ουσιαστικά, ένα Component είναι ένας φάκελος. Όταν δημιουργείτε ένα νέο SAPΕφαρμογή UI5, θα μπορείτε να δείτε μια δομή φακέλου που δημιουργήθηκε στην εξερεύνηση του έργου σας όπως παρακάτω.

Σε αυτήν την εφαρμογή UI5, το PassNum είναι ένα στοιχείο. Το αρχείο Component.js είναι υποχρεωτικό προκειμένου η εφαρμογή UI5 να συμπεριφέρεται σαν στοιχείο. Το αρχείο Component.js είναι ο ελεγκτής στοιχείων.

Επόμενο σε αυτό SAPIU5 Eclipse tutorial, θα μάθουμε πώς να ρυθμίζουμε SAPUI5.

SAPΡύθμιση UI5

Πριν ξεκινήσουμε, πρέπει να βεβαιωθείτε ότι –

Eclipse (έκδοση Luna) είναι εγκατεστημένη στον φορητό υπολογιστή σας
SAP Εργαλεία Ανάπτυξης για Eclipse Luna και εγκαταστάθηκε στην έκλειψη σας (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) Δημιουργία εφαρμογής για παιδιά

Στόχος μας είναι να δημιουργήσουμε ένα Child Component που θα δέχεται έναν αριθμό από το 1 έως το 12 και θα εμφανίζει το όνομα του μήνα. Για παράδειγμα, λαμβάνει 3? θα πρέπει να εμφανίζει «Μάρτιος».

Βήμα 1) Δημιουργήστε το UI Project

Μεταβείτε στο Αρχείο->Νέο->Άλλο->SAPUI5 Ανάπτυξη Εφαρμογών-> Έργο εφαρμογής.

Δημιουργήστε ένα έργο εφαρμογής για SAPUI5 ακολουθώντας τον οδηγό που ανοίγει. Δείτε παρακάτω στιγμιότυπο οθόνης.

Εισαγάγετε το Όνομα του έργου, αφήστε τις άλλες επιλογές να παραμείνουν ίδιες όπως προτείνεται από τον οδηγό.

Στο παραπάνω στιγμιότυπο οθόνης, υπάρχουν 2 τύποι βιβλιοθηκών που εμφανίζονται ως κουμπιά επιλογής

χυμός.μ
sap.ui.commons

Όταν επιλέγετε το sap.m, λέτε στον οδηγό να δημιουργήσει ένα έργο εφαρμογής UI5 του οποίου η ενότητα bootstrap θα περιλαμβάνει αυτόματα τη βιβλιοθήκη sap.m που προορίζεται για τη δημιουργία μιας αποκριτικής εφαρμογής web.

Επόμενο σε αυτό SAP Εκμάθηση FIORI, θα δείτε παρακάτω την ενότητα του οδηγού όπου πρέπει να δημιουργήσετε την αρχική προβολή. Μια αρχική προβολή είναι μια προβολή που θα αποδοθεί πρώτη κατά την πρόσβαση στην εφαρμογή.

Εδώ πρέπει να δώσετε το όνομα της προβολής και να επιλέξετε τον τύπο της προβολής. SAPΤο UI5 υποστηρίζει 4 τύπους προβολής όπως φαίνεται στην παραπάνω οθόνη. Έτσι το UI του α SAPΗ εφαρμογή UI5 μπορεί να κατασκευαστεί χρησιμοποιώντας Javascript ή XML ή JSON ή HTML όποια γλώσσα σας αρέσει.

Στο τέλος του οδηγού, ένα νέο έργο θα δημιουργηθεί και θα εμφανιστεί στο παράθυρο του Project Explorer του 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 SAPUI5 όταν γίνεται πρόσβαση στην εφαρμογή από το πρόγραμμα περιήγησης. Γράψτε λοιπόν παρακάτω κώδικα στο αρχείο 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

Στη συνέχεια, ας γράψουμε κώδικα στην προβολή μηνός εμφάνισης που θα εμφανίζει τον Μήνα του οποίου ο αριθμός μήνα λήφθηκε από το γονικό στοιχείο.

<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() αυτού του ελεγκτή, επομένως επικολλώντας εδώ μόνο τον κώδικα onInit(). Το υπόλοιπο αρχείο είναι όπως δημιουργείται από το πλαίσιο.

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 σε αυτό το σεμινάριο παραπάνω.

Το όνομα του γονικού έργου Component είναι PassNum. Και το τεχνικό όνομα της εφαρμογής BSP που δημιουργήθηκε μετά την ανάπτυξη του SAPΤο στοιχείο UI5 στον διακομιστή διεπαφής ABAP είναι zpassnum. Η δομή του έργου θα μοιάζει όπως παρακάτω

Ας γράψουμε τώρα κώδικα στα αρχεία index.html, Component.js και PassNum.view.xml και PassNum.controller.js

Βήμα 2) Πηγαίος κώδικας ευρετηρίου.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

Αναπτύξτε την εφαρμογή σε διακομιστή διεπαφής ABAP και εκτελέστε την. Θα πρέπει να μπορείτε να το εκτελέσετε κάνοντας δεξί κλικ στο έργο και κάνοντας κλικ στην επιλογή «Εκτέλεση στον διακομιστή ABAP».

Η παρακάτω διεύθυνση URL θα ανοίξει στο πρόγραμμα περιήγησης eclipse.
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html

Αντιγράψτε τη διεύθυνση URL και εκτελέστε την στο πραγματικό πρόγραμμα περιήγησης. Στο παραπάνω όνομα κεντρικού υπολογιστή με κίτρινο χρώμα είναι το όνομα κεντρικού υπολογιστή του διακομιστή διεπαφής ABAP.

Παραγωγή

Κάντε κλικ στο κουμπί "Πρώτο", ο Ιανουάριος θα πρέπει να εμφανίζεται στο Child Component.

Απολαύστε τη δημιουργία όμορφων, αποκριτικών εφαρμογών web χρησιμοποιώντας SAPUI5.

Περίληψη

Σε αυτή τη SAPΟδηγός UI5, μάθαμε:

SAPUI5 που εξερευνήθηκε: SAPΤο UI5 είναι το πιο πρόσφατο στη σειρά SAP Τεχνολογίες ανάπτυξης διεπαφής χρήστη.
Τι είναι SAP UI5: SAPΤο UI5 είναι ένα σύνολο βιβλιοθηκών που χρησιμοποιείται για τη δημιουργία Responsive διαδικτυακών εφαρμογών
Συστατικά του SAPΗ αρχιτεκτονική UI5 είναι Devices, Client, NetWeaver Gateway, Persistence Layer
A SAPΤο στοιχείο UI5 είναι ένα κομμάτι κώδικα εργασίας που επαναχρησιμοποιείται όπου απαιτείται
Τύποι SAPΤο στοιχείο UI5 είναι 1) Στοιχεία διεπαφής χρήστη, 2) στοιχεία χωρίς πρόσωπο
Μάθαμε για την κατανάλωση ενός συστατικού sapui5 σε ένα άλλο στοιχείο sapui5 και τη διαβίβαση δεδομένων μεταξύ των δύο στοιχείων