Εκμάθηση SAPUI5 για αρχάριους: Τι είναι το Fiori με παραδείγματα

Τι είναι το SAPUI5;

SAPUI5 είναι ένα σύνολο βιβλιοθηκών για τη δημιουργία αποκριτικών εφαρμογών ιστού που εκτελούνται σε πολλές συσκευές όπως Desktop, Mobile και Tablet. Το SAPUI5 λειτουργεί Έννοια MVC να επιταχύνει τον κύκλο ανάπτυξης δημιουργώντας δεδομένα, επιχειρηματική λογική και αναπαράσταση δεδομένων ξεχωριστά στην προβολή. Έτσι, η ανάπτυξη της προβολής και του ελεγκτή μπορεί να πραγματοποιηθεί ανεξάρτητα για τη δημιουργία μοντέλων (δοχεία δεδομένων).

Το SAPUI5 είναι η πιο πρόσφατη στη σειρά τεχνολογιών ανάπτυξης SAP UI. Προκειμένου να παρέχει ενοποίηση ιστού για το υποκείμενο σύστημα SAP ERP, η SAP παρουσίασε πολλαπλές τεχνολογίες ανάπτυξης διεπαφής χρήστη όπως BSP (σελίδες διακομιστή επιχειρήσεων), PDK (κιτ ανάπτυξης πύλης), Web Dynpro Java, Web Dynpro ABAP. Και ο διάδοχος του Web Dynpro ABAP είναι το SAPUI5.

SAPUI5 Archiδομή

SAPUI5 Archiδομή
SAPUI5 Archiδομή

SAPUI Archiδιάγραμμα δομής

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

Οι εφαρμογές SAPUI5 και οι υπηρεσίες oData βρίσκονται στον διακομιστή SAP NetWeaver Gateway. Αυτό το στρώμα του archiΗ δομή ονομάζεται "Επίπεδο εφαρμογής".

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

Στοιχείο SAPUI5

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

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

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

Στοιχείο SAPUI5

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

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

Ρύθμιση SAPUI5

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

  1. Eclipse (έκδοση Luna) είναι εγκατεστημένη στον φορητό υπολογιστή σας
  2. Εργαλεία ανάπτυξης SAP για Eclipse Luna και εγκαταστάθηκε στο δικό σας eclipse (Εργαλεία ανάπτυξης SAP για Eclipse Λούνα - https://tools.hana.ondemand.com/luna/)
  3. Το SAP Logon pad έχει εγκατασταθεί και έχετε πρόσβαση στο σύστημα SAP NetWeaver Gateway για ανάπτυξη και δοκιμή σε αυτήν την εφαρμογή που πρόκειται να δημιουργήσουμε σε αυτό το ιστολόγιο.

Αφού κατασκευαστεί πλήρως η εφαρμογή, θα πρέπει να μοιάζει με το παρακάτω:

Ρύθμιση SAPUI5

Σε αυτόν τον οδηγό εκμάθησης SAPUI5, θα δημιουργήσουμε 2 στοιχεία, το Parent Component και το Child Component. Πρώτα, θα δημιουργήσουμε Child Component και στη συνέχεια θα το καταναλώσουμε στο Parent component.

Ας αρχίσουμε να λερώνουμε τα χέρια μας.

Μέρος 1) Δημιουργία εφαρμογής για παιδιά

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

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

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

Δημιουργήστε το UI Project

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

Δημιουργήστε το UI Project

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

Δημιουργήστε το UI Project

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

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

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

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

Δημιουργήστε το UI Project

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

Στο τέλος του οδηγού, ένα νέο έργο θα δημιουργηθεί και θα εμφανιστείyed στο παράθυρο του Project Explorer του Eclipse όπως παρακάτω.

Δημιουργήστε το UI Project

Βήμα 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>

Αφού επικολλήσετε τον παραπάνω κώδικα, η προβολή σας θα πρέπει να είναι όπως παρακάτω-

Κώδικας DisplayMonthView.view.xml

Βήμα 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 Gateway Server

Αναπτύξτε το έργο και δώστε το τεχνικό όνομα της εφαρμογής BSP που θα δημιουργηθεί στον διακομιστή frontend ABAP. Ας είναι το όνομα zdisplaymonth. Σε αυτό το σημείο, το έργο της αίτησής σας θα πρέπει να είναι όπως παρακάτω.

Διακομιστής πύλης SAP Netweaver

ΜΕΡΟΣ 2) Δημιουργία γονικού στοιχείου

Τώρα είναι η ώρα να δημιουργήσετε ένα νέο Component (Parent Component) το οποίο θα καταναλώσει το Component που δημιουργήσαμε μέχρι τώρα σε αυτό το σεμινάριο.

Βήμα 1) Δημιουργήστε μια νέα εφαρμογή SAPUI5

Μεταβείτε στο Αρχείο-> Νέο-> Άλλο-> Ανάπτυξη Εφαρμογών SAPUI5-> Έργο εφαρμογής. Στη συνέχεια, ακολουθήστε τις οδηγίες του οδηγού για να δημιουργήσετε νέο έργο εφαρμογής SAPUI5. Αυτό έχει περιγραφεί λεπτομερώς στο Βήμα 1 του Μέρους 1 σε αυτό το σεμινάριο παραπάνω.

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

Δημιουργήστε μια νέα εφαρμογή SAPUI5

Ας γράψουμε τώρα κώδικα στα αρχεία 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>

Αφού χρησιμοποιήσετε τον παραπάνω κώδικα στην προβολή σας, η προβολή σας θα πρέπει να είναι όπως παρακάτω

Πηγαίος κώδικας του αρχείου PassNum.view.xml

Βήμα 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».

Ανάπτυξη γονικού στοιχείου στον διακομιστή πύλης SAP Netweaver

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

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

Παραγωγή

Έξοδος διακομιστή SAP Netweaver Gateway

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

Έξοδος διακομιστή SAP Netweaver Gateway

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

Χαρακτηριστικά

Σε αυτό το σεμινάριο SAPUI5, μάθαμε:

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