SAPTutoriel UI5 pour débutants
Jessica Blake
⚡ Résumé intelligent
SAPUI5 est SAPLe framework HTML5 réactif de [nom de l'entreprise] alimente les applications web d'entreprise sur ordinateurs, appareils mobiles et tablettes. Ce guide explique l'architecture MVC, le modèle de composants, les bibliothèques et comment créer des composants parents et enfants. Eclipse.
Qu'est-ce que le SAPUI5 ?
SAPUI5 est un ensemble de bibliothèques permettant de créer des applications Web réactives qui s'exécutent sur plusieurs appareils tels que les ordinateurs de bureau, les mobiles et les tablettes. SAPUI5 fonctionne sur Notion MVC pour accélérer le cycle de développement en créant des données, une logique métier et une représentation des données séparément sur la vue. Ainsi le développement de la vue et du contrôleur peut s'effectuer indépendamment pour créer des modèles (conteneurs de données).
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 ArchiDans l'interface, la première case « Appareils » indique les appareils sur lesquels les applications UI5 s'exécutent. Les applications UI5 sont accessibles via une application mobile ou n'importe quel navigateur. Cette couche est appelée « Couche de présentation ».
SAPLes applications UI5 et les services oData résident sur le 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 Les systèmes centraux tels que ECC, CRM et BW. La logique métier peut être implémentée à l'aide de SAP programmes et modules fonctionnels. SAP les données transactionnelles et de base résident sur SAP systèmes. Cette couche est appelée « couche de base de données » ou « couche de persistance ».
SAPComposant UI5
Un composant est un morceau de code réutilisable. Il existe deux types de composants fournis par SAPUI5 :
- Composants d'interface utilisateur – Ils représentent une interface utilisateur contenant des éléments d'interface. Ils sont basés sur… SAPClasse UI5 appelée sap.ui.core.UIComponent
- Composants sans interface utilisateur – Ceux-ci ne possèdent pas d'interface utilisateur. Ils sont basés sur le 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 indispensable pour qu'une application UI5 se comporte comme un composant.
Suivant dans ce SAPUI5 Eclipse tutoriel, nous allons apprendre à configurer SAPUI5.
SAPConfiguration UI5
Avant de commencer, vous devez vous assurer que :
- Eclipse (version Luna) est installé sur votre ordinateur portable
- SAP Outils de développement pour Eclipse Luna sont installés sur votre Eclipse (SAP Outils de développement pour Eclipse Lune - https://tools.hana.ondemand.com/luna/)
- SAP Logon Pad est installé et vous avez accès à SAP Système NetWeaver Gateway pour le déploiement et les tests de l'application que nous allons développer dans ce blog.
Une fois l’application entièrement créée, elle devrait ressembler à ci-dessous :
Dans ce nouvel article concernant notre nouveau projet SAPDans ce tutoriel UI5, nous allons créer deux composants : le composant parent et le composant enfant. Nous commencerons par créer le composant enfant, puis nous l’utiliserons 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 accepte un nombre de 1 à 12 et affiche le nom du mois. Par exemple, s'il reçoit 3, il doit 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 SAPInstallation sous UI5 en suivant l'assistant. Voir la capture d'écran ci-dessous.
Saisissez le nom du projet et laissez les autres options telles que suggérées par l'assistant.
Dans la capture d'écran ci-dessus, deux types de bibliothèques sont affichés sous forme de boutons radio :
- sap.m
- sap.ui.commons
Lorsque vous sélectionnez sap.m, vous indiquez à l'assistant de créer un projet d'application UI5 dont la section d'amorçage inclura automatiquement la bibliothèque sap.m, conçue pour créer des applications web réactives.
Suivant dans ce SAP Dans ce tutoriel Fiori, vous trouverez ci-dessous la section de l'assistant où vous devez créer la vue initiale. La vue initiale est celle qui sera affichée en premier lors de l'accès à l'application.
Ici, vous devez indiquer le nom de la vue et sélectionner son type. 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 le langage avec lequel vous êtes le plus à l'aise.
À la fin de l'assistant, un nouveau projet sera créé et affiché dans la fenêtre Explorateur de projets. 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 à notre fichier index.html de charger Component.js lors de l'accès à l'application. Saisissez 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 le code dans notre vue displaymonth pour afficher le mois dont le numéro 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 affichage devrait ressembler à ceci.
Étape 5) Code DisplayMonthView.controller.js
Et enfin, écrivons le code du fichier contrôleur de DisplayMonthView.
Le code se trouve uniquement dans la méthode `onInit()`, c'est pourquoi seul ce code est reproduit ici. Le reste du fichier est 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 attribuez un nom technique à l'application BSP générée sur le serveur frontal ABAP. Ce nom sera : zdisplaymoisVotre projet devrait ressembler à ceci.
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 tutoriel.
É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 projet. 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 passeLe nom technique de l'application BSP générée après le déploiement est : numéro de passe zLa structure du projet sera la suivante.
Écrivons maintenant le code dans les fichiers index.html, Component.js, PassNum.view.xml et PassNum.controller.js.
Étape 2) Source Code du fichier 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, celle-ci devrait ressembler à ceci.
Étape 5) Code source de PassNum.controller.js
Seule la méthode onInit() a été modifiée. Tout le reste dans ce fichier demeure inchangé.
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. Pour ce faire, cliquez avec le bouton droit sur le projet et sélectionnez « Exécuter sur le serveur ABAP ».
Le ci-dessous URL ouvrira dans le Eclipse navigateur.
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html
Copiez le URL et exécutez-le dans votre navigateur. Le nom d'hôte ci-dessus (surligné en jaune) correspond à celui de votre serveur frontal ABAP.
Sortie
Cliquez sur le bouton « Premier », et janvier devrait s'afficher dans le composant enfant.
Profitez de la création de belles applications Web réactives à l'aide de SAPUI5.
