SAPTutoriel UI5 pour débutants

SAPUI5 est le dernier de la série de SAP Technologies de développement d’interface utilisateur. Afin de fournir une intégration Web pour le sous-jacent SAP Système ERP, SAP a proposé plusieurs technologies de développement d'interface utilisateur telles que BSP (pages de serveur d'entreprise), PDK (kit de développement de portail), Web Dynpro Java, WebDynpro ABAP. Et le successeur de Web Dynpro ABAP est SAPUI5.

SAPUI5 Architecture

SAPUI Archidiagramme de structure

Au dessus ArchiLa première case, « Appareils », indique les appareils sur lesquels s'exécutent les applications UI5. Les applications UI5 sont accessibles via une application mobile ou n'importe quel navigateur sur ces appareils. Cette couche de l'architecture est appelée « couche de présentation ».

SAPLes applications UI5 et les services oData résident sur SAP Serveur de passerelle NetWeaver. Cette couche de l'architecture est appelée « couche application ».

La logique métier réelle est implémentée dans SAP des systèmes de base comme ECC, CRM et BW, etc.… La logique métier peut être implémentée en utilisant SAP programmes et modules fonctionnels. SAP les données transactionnelles et de base résident sur SAP systèmes. Cette couche de l'architecture est appelée « couche de base de données » ou « couche de persistance ».

SAPComposant UI5

Un composant est un morceau de code fonctionnel qui est réutilisé partout où cela est nécessaire. Il existe 2 types de composants fournis par SAPUI5

1. Composants d'interface utilisateur – Ceux-ci représentent une interface utilisateur contenant des éléments d'interface utilisateur. Ceux-ci sont basés sur la classe SPAUI5 appelée sap.ui.core.UIComponent
2. Composants sans visage – Ceux-ci n’ont pas d’interface utilisateur. Ils sont basés sur SAPClasse UI5 ​​appelée sap.ui.core.Component

Essentiellement, un composant est un dossier. Lorsque vous créez un nouveau SAPApplication UI5, vous pourrez voir une structure de dossiers créée dans votre explorateur de projet comme ci-dessous.

Dans cette application UI5, PassNum est un composant. Le fichier Component.js est obligatoire pour que l’application UI5 se comporte comme un composant. Le fichier Component.js est le contrôleur de composants.

Suivant dans ce SAPUI5 Eclipse tutoriel, nous allons apprendre à configurer SAPUI5.

SAPConfiguration UI5

Avant de commencer, vous devez vous assurer que :

1. Eclipse (version Luna) est installé sur votre ordinateur portable
2. SAP Outils de développement pour Eclipse Luna et installé sur votre éclipse (SAP Outils de développement pour Eclipse Lune - https://tools.hana.ondemand.com/luna/)
3. SAP Le clavier de connexion est installé et vous avez accès à SAP Système NetWeaver Gateway pour le déploiement et les tests sur cette application que nous allons construire dans ce blog.

Une fois l’application entièrement créée, elle devrait ressembler à ci-dessous :

Dans ce nouvel article concernant notre nouveau projet SAPGuide des didacticiels UI5, nous allons créer 2 composants, à savoir le composant parent et le composant enfant. Tout d’abord, nous allons créer un composant enfant, puis le consommer dans le composant parent.

Commençons par nous salir les mains.

Partie 1) Créer une application enfant

Notre objectif est de créer un composant enfant qui acceptera un nombre de 1 à 12 et affichera le nom du mois. Par exemple, il en reçoit 3 ; il devrait afficher « Mars ».

Étape 1) Créer le projet d'interface utilisateur

Allez dans Fichier->Nouveau->Autre->SAPDéveloppement d'applications UI5-> Projet d'application.

Créer un projet d'application pour SAPUI5 en suivant l'assistant qui s'ouvre. Voir capture d'écran ci-dessous.

Entrez le nom du projet, laissez les autres sélections rester les mêmes que celles suggérées par l'assistant.

Dans la capture d'écran ci-dessus, 2 types de bibliothèques sont affichés sous forme de boutons radio

1. sap.m
2. sap.ui.commons

Lorsque vous sélectionnez sap.m, vous demandez à l'assistant de créer un projet d'application UI5 dont la section d'amorçage inclura automatiquement la bibliothèque sap.m destinée à créer une application Web réactive.

Suivant dans ce SAP Didacticiel FIORI, vous verrez ci-dessous la section de l'assistant où vous devez créer la vue initiale. Une vue initiale est une vue qui sera rendue en premier lors de l'accès à l'application.

Ici, vous devez donner le nom de la vue et sélectionner le type de vue. SAPUI5 prend en charge 4 types de vue, comme le montre l'écran ci-dessus. Ainsi, l'interface utilisateur d'un SAPL'application UI5 peut être créée en utilisant Javascript ou XML ou JSON ou HTML selon la langue avec laquelle vous êtes à l'aise.

À la fin de l'assistant, un nouveau projet sera créé et affiché dans la fenêtre de l'Explorateur de projets de Eclipse comme ci-dessous.

Étape 2) Code Component.js

Ensuite, créons un fichier Component.js et écrivons-y le code ci-dessous.

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");

  
  },
});

Étape 3) Code Index.html

Ensuite, indiquons le fichier index.html dans lequel charger Component.js SAPUI5 lorsque l’application est accessible depuis le navigateur. Écrivez donc le code ci-dessous dans le fichier 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>

Étape 4) Code DisplayMonthView.view.xml

Ensuite, écrivons du code dans notre vue displaymonth qui affichera le mois dont le numéro de mois est reçu du composant parent.

<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>

Après avoir collé le code ci-dessus, votre vue devrait ressembler à ci-dessous :

Étape 5) Code DisplayMonthView.controller.js

Et enfin, écrivons le code du fichier Controller de DisplayMonthView.

Le code est écrit uniquement dans la méthode hook onInit() de ce contrôleur, collant donc ici uniquement le code onInit(). Le reste du fichier est tel que généré par le 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);
	},

Étape 6) Déploiement de l'application sur SAP Serveur de passerelle Netweaver

Déployez le projet et donnez le nom technique de l'application BSP qui sera générée sur le serveur frontend ABAP. Que le nom soit zdisplaymois. À ce stade, votre projet d'application devrait ressembler à ci-dessous.

PARTIE 2) Création d'un composant parent

Il est maintenant temps de créer un nouveau composant (composant parent) qui consommera le composant que nous avons créé jusqu'à présent dans ce didacticiel.

Étape 1) Créez un nouveau SAPApplication UI5

Allez dans Fichier->Nouveau->Autre->SAPDéveloppement d'applications UI5-> Projet d'application. Suivez ensuite les instructions de l'assistant pour créer un nouveau SAPProjet d'application UI5. Cela a été décrit en détail à l'étape 1 de la partie 1 de ce didacticiel ci-dessus.

Le nom du projet de composant parent est Numéro de passe. Et le nom technique de l'application BSP généré après déploiement de SAPLe composant UI5 du serveur frontal ABAP est znuméro de passe. La structure du projet ressemblera à ci-dessous

Écrivons maintenant le code dans les fichiers index.html, Component.js et PassNum.view.xml et PassNum.controller.js

Étape 2) Code source d'Index.html du composant parent

<!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>

Étape 3) Code source du fichier Component.js du composant parent

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");
 
  },
});

Étape 4) Code source du fichier 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>

Après avoir utilisé le code ci-dessus dans votre vue, votre vue devrait ressembler à ci-dessous

Étape 5) Code source de PassNum.controller.js

Seule la méthode onInit() a été modifiée. Tout le reste dans ce fichier reste le même

onInit: function() {

	jQuery.sap.registerModulePath("DisplayMonth", "../zdisplaymonth");
	},

	clickbutton:function(oEvent)
	{			
		sap.ui.getCore().getEventBus().publish("exchange", 
				"data", oEvent.oSource.sId.split("--")[1]);
		
		
	}

Étape 6) Déploiement du composant parent vers SAP Serveur de passerelle Netweaver

Déployez l'application sur le serveur frontal ABAP et exécutez-la. Vous devriez pouvoir l'exécuter en cliquant avec le bouton droit sur le projet et en cliquant sur l'option « Exécuter sur le serveur ABAP ».

L'URL ci-dessous s'ouvrira dans le navigateur Eclipse.
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html

Copiez l'URL et exécutez-la dans le navigateur actuel. Dans le nom d'hôte ci-dessus marqué en jaune se trouve le nom d'hôte de votre serveur frontal ABAP.

Sortie

Cliquez sur le bouton « Premier », janvier devrait s'afficher dans le composant enfant.

Profitez de la création de belles applications Web réactives à l'aide de SAPUI5.

Résumé

Dans ce nouvel article concernant notre nouveau projet SAPTutoriel UI5, nous avons appris :

• SAPUI5 exploré : SAPUI5 est le dernier de la série de SAP Technologies de développement d’interface utilisateur.
• Qu’est ce qu' SAP UI5 : SAPUI5 est un ensemble de bibliothèques utilisées pour créer des applications Web réactives.
• Composants de SAPL'architecture UI5 ​​comprend les périphériques, le client, la passerelle NetWeaver et la couche de persistance
• A SAPLe composant UI5 est un morceau de code fonctionnel qui est réutilisé partout où cela est nécessaire
• Types d' SAPLes composants UI5 sont 1) des composants d'interface utilisateur, 2) des composants sans visage
• Nous avons appris à consommer un composant sapui5 dans un autre composant sapui5 et à transmettre des données entre les deux composants.