SAP UI5 - Guide rapide

SAP fournit divers outils que les utilisateurs peuvent utiliser pour améliorer leur expérience utilisateur afin de créer des applications avec des interfaces utilisateur riches pour les applications commerciales Web. Les outils d'activation les plus courants incluent:

  • Concepteur de thème
  • NWBC et panneau latéral
  • Écrans FPM
  • Outils de développement SAP UI5

Les applications Web que vous créez à l'aide de SAP UI5 offrent une expérience utilisateur plus cohérente et sont accessibles sur des appareils tels que des tablettes, des smartphones et des ordinateurs portables. En utilisant la passerelle NetWeaver avec UI5, vous pouvez définir une séparation claire entre l'interface utilisateur et la logique métier.

SAP UI5 fournit les fonctionnalités clés suivantes -

  • Concepts d'extensibilité au niveau du code et de l'application.
  • Possibilité de créer des modèles d'interface utilisateur complexes et des mises en page prédéfinies pour des cas d'utilisation typiques.
  • Model-View-Controller (MVC) et méthodes de liaison de données.
  • Prise en charge de l'interaction avec le clavier et fonctionnalités d'accessibilité.
  • SAP UI5 est basé sur des normes ouvertes telles que JavaScript, CSS et HTML5.
  • Support de thématisation basé sur CSS.

Voici les avantages de l'utilisation de SAP UI en entreprise:

  • Cela aide à augmenter la productivité.
  • Augmentez l'adaptation des utilisateurs.
  • Moins d'erreurs manuelles.
  • Réduisez le coût de la formation.
  • Haute performance du système SAP.
  • API parfaitement conçue et peut être consommée facilement.

SAP UI5 ─ Version

Voici la liste des versions récentes d'UI5 qui ont été introduites. Chaque UI5 ​​fournit de nouvelles fonctionnalités et améliorations par rapport aux versions précédentes, la prise en charge de la plate-forme, des améliorations d'utilisabilité, etc.

  • SAP UI5 1.26
  • SAP UI5 1.28
  • SAP UI5 1.30
  • SAP UI5 1.32
  • SAP UI5 1.34
  • SAP UI5 1.36
  • SAP UI5 1.38 et bien d'autres comme SAP UI5 1.6

Schéma de version

SAP UI5 utilise un numéro de version à 3 chiffres. Par exemple, SAPUI5 1.36.5. Ici, le chiffre (1) spécifie la version principale. Le deuxième chiffre (36) spécifie le numéro de version mineure. Le troisième chiffre spécifie le numéro de version du correctif (5).

Dans chaque SAP UI5, la version majeure et mineure ainsi que la version du correctif peuvent être utilisées pour identifier les correctifs.

SAP UI5 vs Open UI5

SAP UI5 et Open UI5 fournissent tous deux l'environnement de développement de l'interface utilisateur. Cependant, ils sont différents les uns des autres dans les aspects suivants -

SAP UI5 fait partie de la suite de produits SAP et n'est pas une licence distincte. Il est intégré à différents produits SAP comme -

  • SAP NW 7.4 ou supérieur
  • SAP NetWeaver AS 7.3x
  • SAP HANA Cloud et solution sur site

Open UI5 est une technologie open source pour le développement d'applications et elle a été publiée avec Apache 2.0.

SAP UI5 n'est pas un produit distinct et est disponible avec la suite de produits SAP Open UI5 est une plateforme open source gratuite pour le développement d'applications
SAP UI5 est intégré à
  • SAP HANA
  • Plateforme cloud SAP HANA
  • Versions supérieures de SAP NetWeaver

Open UI5 a été introduit avec la licence Apache 2.0

OpenUI5 est Open Source et est disponible sur GitHub

Prise en charge du navigateur UI5

SAP UI5 prend en charge tous les principaux navigateurs de Microsoft, Google et Firefox avec les dernières versions. Cependant, les fonctionnalités prises en charge varient selon la version du navigateur et le fournisseur.

Dans l'architecture SAP UI5, vous disposez de trois couches -

  • En haut, se trouve la couche de présentation, où les composants UI5 sont utilisés par des appareils tels que les mobiles, les tablettes et les ordinateurs portables.

  • Au niveau de la couche intermédiaire, se trouvent les clients d'application qui incluent les bibliothèques SAP UI5 pour la thématisation et le contrôle. Les bibliothèques de contrôle UI5 ​​incluent

    • Sap.viz

    • Sap.ui.commons (Contrôles comme les champs de texte et les boutons)

    • Sap.ui.table (Contrôles d'entrée pour la table)

    • Sap.ui.ux3

    • Sap.m (comprend le contrôle d'entrée pour les appareils mobiles)

  • En bas, se trouve le composant serveur d'options. Cela inclut SAP NetWeaver Application Server pour ABAP / Java, le backend SAP, le moteur HANA XS pour le développement ou la base de données.

SAP UI5 comporte plusieurs composants qui sont des objets indépendants et réutilisables dans l'application UI5. Ces composants peuvent être développés par différentes personnes et peuvent être utilisés dans différents projets.

Une application peut utiliser les composants à partir d'emplacements différents et vous pouvez donc facilement obtenir la structure d'une application. Vous pouvez créer différents types de composants dans le cadre du développement SAP UI5.

Composants sans visage

Les composants sans visage sont utilisés pour obtenir les données du système backend et ils ne contiennent pas d'interface utilisateur.

Example- Ils font partie de la classe sap.ui.core.component

Composants de l'interface utilisateur

Les composants de l'interface utilisateur sont utilisés pour ajouter des fonctionnalités de rendu et représenter une zone d'écran ou un élément sur l'interface utilisateur.

Example- Le composant d'interface utilisateur peut être un bouton avec des paramètres pour effectuer certaines tâches. Il fait partie de la classe: sap.ui.core.UIComponent

Note- sap.ui.core.component est la classe de base pour les composants sans visage et d'interface utilisateur. Pour définir la fonction d'extensibilité, les composants peuvent hériter de la classe de base ou d'autres composants dans le développement de l'interface utilisateur.

Le nom du module d'un composant est appelé nom de package, et .component où le nom du package est défini comme le nom du paramètre passé au constructeur du composant.

Les composants SAP UI5 peuvent également être divisés en fonction de l'environnement système -

  • Composant côté client: cela comprend,
    • Bibliothèques de contrôle sap.m, sap.ui.common, etc.
    • Javascript de base
    • Le test comprend HTML et Javascript
  • Composant côté serveur
    • Générateur de thèmes
    • Outils de contrôle et de développement d'applications dans Eclipse
    • Gestionnaire de ressources

Structure d'un composant

Chaque composant est représenté sous la forme d'un dossier et contient le nom des composants et les ressources nécessaires à la gestion du composant.

Chaque composant doit contenir les fichiers suivants -

  • Component.json fichier contenant des métadonnées pour la conception et utilisé uniquement pour les outils de conception.

  • Component.js est utilisé pour définir les propriétés, les événements et les méthodes des composants qui sont responsables des métadonnées d'exécution.

Comment créer un nouveau composant SAP UI5?

Pour créer un nouveau composant, vous devez créer un nouveau dossier. Appelons cela commebutton.

Il faut ensuite créer le component.js file

Ensuite, vous devez étendre la classe de base du composant UI sap.ui.core.UIComponent.extend et entrer le nom du composant et le chemin du package.

Plus tard, pour définir un nouveau composant, vous devez commencer par le require déclaration comme suit -

// defining a new UI Component
jQuery.sap.require("sap.ui.core.UIComponent");
jQuery.sap.require("sap.ui.commons.Button");
jQuery.sap.declare("samples.components.button.Component");

// new Component
sap.ui.core.UIComponent.extend("samples.components.button.Component", {
   metadata : {
      properties : {
         text: "string"
      }
   }
});

samples.components.button.Component.prototype.createContent = function(){
   this.oButton = new sap.ui.commons.Button("btn");
   return this.oButton;
};

/*
* Overrides setText method of the component to set this text in the button
*/
samples.components.button.Component.prototype.setText = function(sText) {
   this.oButton.setText(sText);
   this.setProperty("text", sText);
   return this;
};

L'étape suivante consiste à définir le component.json dans votre dossier comme suit -

{
   "name": "samples.components.button",
   "version": "0.1.0",
   "description": "Sample button component",
   "keywords": [
      "button",
      "example"
   ],
   "dependencies": {
   }
}

Comment utiliser un composant

Pour utiliser un composant, vous devez envelopper le composant dans un conteneur de composants. Vous ne pouvez pas utiliser directement un composant d'interface utilisateur dans une page à l'aide de la méthode placeAt. Une autre méthode consiste à transmettre le composant au constructeur componentContainer.

Utilisation de la méthode placeAt

Cela inclut l'ajout du composant au conteneur et l'utilisation placeAt méthode pour placer le composant sur la page.

var oComp = sap.ui.getCore().createComponent({
   name: "samples.components.shell",
   id: "Comp1",
   settings: {appTitle: "Hello John"}
});

var oCompCont = new sap.ui.core.ComponentContainer("CompCont1", {
   component: oComp
});

oCompCont.placeAt("target1");
//using placeAt method

Utilisation du constructeur de componentContainer

Un conteneur de composants contient des paramètres spécifiques et contient également les méthodes de cycle de vie d'un contrôle régulier. Le segment de code suivant montre comment passer le composant au constructeur componentContainer.

var oCompCont2 = new sap.ui.core.ComponentContainer("CompCont2", {
   name: " samples.components.shell",
   settings: {text: "Hello John 1"}
});
oCompCont2.placeAt("target2");

Il existe différentes bibliothèques JavaScript et CSS que vous pouvez utiliser en combinaison pour le développement d'applications. SAPUI5 peut utiliser ces bibliothèques en combinaison et elles sont appelées bibliothèques de contrôle SAPUI5.

Bibliothèques de contrôle SAPUI5 communes -

  • Sap.ui.commons pour les champs de contrôle, les boutons, etc.
  • Sap.m est la bibliothèque de contrôle la plus courante et est utilisée pour les appareils mobiles
  • Sap.ui.table inclut le contrôle de table
  • Sap.ui.ux3

Note- Bibliothèque de contrôle SAPUI5 sap.m est la bibliothèque la plus courante et est utilisée pour le développement d'applications. Ces bibliothèques peuvent être combinées avec d'autres bibliothèques de contrôle.

Combinaisons de bibliothèques de contrôle

  • Vous pouvez utiliser la bibliothèque de contrôle sap.m avec d'autres bibliothèques de contrôle - sap.ui.unified, sap.viz, sap.ui.table, sap.ui.layout et sap.suite.

  • Vous pouvez combiner les bibliothèques de contrôle - sap.ui.commons, sap.ui.table, sap.ui.ux3 et sap.ui.suite entre elles.

  • Vous pouvez également combiner la bibliothèque de contrôle sap.ui.commons et sap.ui.ux3 avec d'autres bibliothèques telles que sap.ui.core, sap.ui.unified, sap.ui.layout et sap.ui.table.

  • Vous pouvez combiner sap.viz avec toutes les autres bibliothèques.

Le tableau suivant présente les principales bibliothèques de contrôle SAPUI5 et leur description -

sap.m Bibliothèque avec commandes spécialisées pour les appareils mobiles.
sap.makit La bibliothèque SAPUI5 contient les diagrammes markit.
sap.ui.commons Bibliothèque commune pour les contrôles standard
sap.ui.ux3 Bibliothèque SAPUI5 avec des contrôles qui implémentent les SAP User Experience (UX) Guidelines 3.0
sap.viz Bibliothèque SAPUI5 contenant des commandes de graphique basées sur la bibliothèque de graphiques VIZ.

Le kit de développement SAP UI5 pour HTML5 vous fournit un environnement pour le développement d'applications Web et il fournit une application avec une expérience utilisateur cohérente. Les applications Web que vous développez avec SAP UI5 sont réactives sur tous les navigateurs et appareils, et peuvent s'exécuter sur les smartphones, les tablettes et les ordinateurs de bureau.

Les commandes de l'interface utilisateur s'adaptent automatiquement aux capacités de chaque appareil.

Vous pouvez utiliser SAP UI5 sur les plates-formes suivantes -

  • SAP HANA
  • Plateforme cloud SAP HANA
  • SAP NetWeaver pour SAP NetWeaver 7.4 ou version ultérieure
  • Module complémentaire d'interface utilisateur pour SAP NetWeaver pour SAP NetWeaver Application Server 7.3x

Vous pouvez déployer l'application sur le serveur qui inclut le stockage des bibliothèques et l'obtention de données à partir de la base de données. Vous pouvez utiliser le serveur d'applications NetWeaver ou la plateforme HANA Cloud pour le déploiement d'applications, et les données sont accessibles par une application métier à l'aide du modèle OData à l'aide de Gateway. Jetez un œil à l'illustration suivante.

Lorsqu'un utilisateur envoie une demande client depuis son mobile / ordinateur portable, une demande est envoyée au serveur pour charger l'application dans un navigateur, et les données sont accessibles via la base de données et les bibliothèques pertinentes sont accessibles.

Pour créer une application UI5, vous pouvez télécharger les outils du développeur SAP UI5 d'Eclipse. Une fois que vous avez téléchargé, vous pouvez décompresser le fichier et le déployer sur le serveur Web. Pour ABAP, vous pouvez installer un module complémentaire d'interface utilisateur pour SAP NetWeaver et cela inclut également UI5 Theme Designer.

Prérequis pour SAP UI5

Pour installer et mettre à jour la boîte à outils de développement UI5 pour HTML5, vous devez remplir les conditions préalables suivantes:

Plateforme Eclipse Mars (4,5)
Système opérateur Système d'exploitation Windows (XP, Vista, 7 ou 8 / 8.1)
Runtime Java JRE version 1.6 ou supérieure, 32 bits ou 64 bits
GUI SAP

Uniquement pertinent lors de l'installation du fournisseur d'équipe du référentiel SAP UI5 ABAP

  • Pour le système d'exploitation Windows: SAP GUI pour Windows 7.30 / 7.40
Microsoft

Uniquement pertinent lors de l'installation du fournisseur d'équipe du référentiel SAP UI5 ABAP

Pour le système d'exploitation Windows: les DLL VS2010 pour la communication avec le système principal sont requises

Remarque: installez la variante x86 ou x64, en fonction de votre installation Eclipse 32 ou 64 bits

Voyons maintenant comment vous pouvez installer le kit de développement SAP UI5 dans votre système.

Step 1 - Pour installer JDK, accédez à Oracle.com et recherchez la version JDK requise.

Step 2- Téléchargez et exécutez l'installation. Vous recevrez un message comme indiqué dans la capture d'écran suivante.

Step 3- Pour installer Eclipse, allez sur www.Eclipse.org/downloads

Step 4 - Extrayez le fichier comme indiqué dans la capture d'écran suivante.

Step 5 - Pour exécuter l'installation, accédez au dossier extrait et exécutez le fichier d'application comme indiqué dans la capture d'écran suivante.

Step 6 - Pour installer les outils SAPUI5, accédez à Eclipse → Aide → Installer un nouveau logiciel.

Vous pouvez installer directement en utilisant l'URL ou en entrant le chemin du kit de démonstration UI5.

Step 7 - Ensuite, entrez l'URL dans la boîte de dialogue d'installation https://tools.hana.ondemand.com/mars

Step 8- Pour voir les fonctionnalités disponibles. Appuyez sur la touche ENTER. Vous pouvez sélectionner les fonctionnalités et cliquer sur Suivant. Il affichera la liste des fonctionnalités à installer → Cliquez sur Suivant.

Step 9 - Acceptez le contrat de licence et cliquez sur Terminer pour démarrer l'installation.

Step 10 - Téléchargez le kit de développement d'interface utilisateur pour HTML 5 à partir du lien suivant -

http://scn.sap.com/community/developer-center/front-end et extrayez le contenu dans le même dossier.

Step 11- Démarrez l'environnement Eclipse. Accédez à Aide → Installer un nouveau logiciel.

Step 12 - Cliquez sur Ajouter → Local.

Step 13 - Ensuite, accédez à l'emplacement du site de mise à jour local et sélectionnez le dossier du site de mise à jour des outils avec le dossier dans lequel vous avez extrait la boîte à outils de développement HTML5 comme source de mise à jour.

Step 14 - Sélectionnez tous les plugins et fonctionnalités pour l'installation.

Step 15 - Sélectionnez la boîte de dialogue «Contacter tous les sites de mise à jour» lors de l'installation pour trouver le logiciel requis.

Step 16- Cliquez sur le bouton Terminer pour terminer la configuration. Redémarrez Eclipse.

Step 17 - Vous pouvez vérifier l'installation en créant un nouveau projet d'application SAPUI5 via le menu Eclipse Fichier → New→ Autre en bas. Sélectionnez le dossier Développement d'applications SAP UI5 et développez-le pour créer un nouveau projet.

Step 18 - Entrez le nom du projet, sélectionnez la bibliothèque et vous pouvez cocher la case pour créer une vue initiale.

Step 19- Créez une vue à l'aide d'un exemple de code dans le projet. Entrez le nom de la vue et cliquez sur le bouton Suivant.

Step 20- Sélectionnez le paradigme de développement et cliquez sur Terminer. Vous verrez un nouveau projet de développement SAPUI5 dans une nouvelle fenêtre, comme illustré dans la capture d'écran suivante.

Désormais, pour présenter votre application ou l'exécuter en production, vous pouvez déployer votre application SAPUI5 sur le serveur tomcat. Si vous ne disposez pas d'un outil comme MAVEN, vous pouvez utiliser l'option d'exportation pour exporter le projet manuellement. Faites un clic droit sur Projet → Exporter.

Step 21 - Entrez le chemin de destination où vous souhaitez placer le war fichier.

Ensuite, copiez le fichier war-File dans le répertoire webapps de votre apache tomcat. Vous pouvez accéder à votre application en vous rendant sur ce chemin -http://localhost:8080/<votre_app> /

Note - Dans un scénario normal, de nombreux projets SAP s'exécutent dans Internet Explorer mais pour le développement SAPUI5, il est recommandé d'utiliser Google Chrome ou Firefox avec le plugin Firebug car les deux systèmes permettent l'utilisation d'outils et de plugins pour déboguer JavaScript, ainsi que d'utiliser HTML et CSS .

Le concept Model-View-Controller (MVC) est utilisé dans le développement SAP UI5 pour séparer les données d'application des interactions utilisateur. Cela vous permet de développer les applications Web et d'apporter des modifications aux applications indépendamment.

Model-View-Controller joue un rôle différent dans le développement de l'interface utilisateur -

  • le Model est responsable de la gestion des données d'application dans la base de données / backend.

  • le Viewest responsable de la définition de l'interface utilisateur pour les utilisateurs. Lorsqu'un utilisateur envoie une demande à partir de son appareil, la vue est responsable de la vue des données selon la demande soumise.

  • le Controller est utilisé pour contrôler les données et afficher les événements selon l'interaction de l'utilisateur en mettant à jour la vue et le modèle.

Vous pouvez définir le concept Model-View-Controller dans SAPUI5 avec les fonctionnalités suivantes -

Modèle

  • Le modèle sert de pont entre la vue et les données d'application.
  • Le modèle est utilisé pour obtenir la demande de la vue et y répondre selon l'entrée de l'utilisateur.
  • Le modèle ne dépend pas des classes.

Vue

  • View est chargé de gérer l'affichage des informations aux utilisateurs.
  • Les vues sont basées sur le modèle.

Manette

  • Le contrôleur est responsable de prendre les entrées fournies par les périphériques et de communiquer avec le modèle / la vue et de déclencher une action correcte.

  • Les contrôleurs sont basés sur le modèle.

SAP UI5 propose des vues et des contrôleurs sous la forme de fichiers uniques -

  • sap.ui.core.mvc.XMLView
  • sap.ui.core.mvc.JSView
  • sap.ui.core.mvc.Controller
  • sap.ui.core.mvc.JSONView

Modèle JSON

  • Le modèle JSON est un modèle côté client et est utilisé pour les petits ensembles de données.
  • Le modèle JSON prend en charge la liaison bidirectionnelle. Le concept de liaison de données est mentionné dans la seconde moitié de ce didacticiel.
  • Le modèle JSON peut être utilisé pour lier des contrôles aux données d'objet JavaScript.

Modèle XML

  • Le modèle XML peut être utilisé pour lier des contrôles à des données XML.
  • XML est également un modèle côté client et n'est donc utilisé que pour les petits ensembles de données.
  • Le modèle XML ne fournit aucun mécanisme pour la pagination basée sur le serveur ou le chargement de deltas.
  • Le modèle XML prend également en charge la liaison de données bidirectionnelle.

Les vues sont définies à l'aide des bibliothèques SAP comme suit -

  • XML avec HTML, mixte ou autonome: Library- sap.ui.core.mvc.XMLView
  • JavaScript: Bibliothèque- sap.ui.core.mvc.JSView
  • JSON: Bibliothèque - sap.ui.core.mvc.JSONView
  • HTML: Bibliothèque - sap.ui.core.mvc.HTMLView

Exemple de vue JavaScript

Sap.ui.jsview(“sap.hcm.address”, {
   getControllerName: function() {
      return “sap.hcm.address”;
   },
   createContent: function(oController) {
      var oButton = new sap.ui.commons.Button({ text: “Hello” });
      oButton.attachPress(function() {
         oController.Hello();
      })
      Return oButton;
   }
});

Exemple de vue HTML

<template data-controller-name = ”sap.hcm.address’>
   <h1>title</h1>
   <div> Embedded html </div>
   <div class = ”test” data-sap-ui-type = ”sap.ui.commons.Button”
      Id = ”Button1” data-text =  ”Hello” Data-press = ”sayHello”>
   </div>
</template>

De même, vous pouvez créer une vue JSON dérivée de sap.ui.core.mvc.JsonView.

{
   “type”:”sap.ui.core.mvc.JsonView”,
   “controllerName”:”sap.hcm.address”,
   ……………………….
   …………………...
   …………………….
}

Comparaison des types de vues

Le tableau suivant répertorie les fonctionnalités clés associées au concept MVC et la comparaison des différents types de vues par rapport aux fonctionnalités.

Fonctionnalité Vue JS Vue XML Vue JSON Affichage HTML
Bibliothèques standard et personnalisées Oui Oui Oui Oui
Propriétés des types string, int Boolean, float Oui Oui Oui Oui
Agrégation 1: 1, 1: n Association 1: 1, 1: n Oui Oui Oui Oui
Liaison de données simple Oui Oui Oui Oui
Personnaliser la liaison de données Oui Non Non Non
HTML intégré Non Oui Non Non
Achèvement du code Oui Oui Non Non
Création de modèles Oui Non Non Non
Validation Non Oui Non Non
Écouteur d'événement unique Oui Oui Oui Oui

SAPUI5 Developer Studio fournit des outils pour faciliter le processus de développement UI5. Voici les fonctions -

  • Assistant de développement de contrôle
  • Assistant de création de projet
  • Assistant de création de vues / contrôleurs

Vous pouvez le télécharger depuis SAP Marketplace en utilisant le lien https://support.sap.com/software.html. Recherchez UI Add-on 1.0 pour NetWeaver.

Accédez à Téléchargements de logiciels et entrez votre identifiant et votre mot de passe. Ensuite, accédez aux packages de support et aux correctifs. Recherchez le plugin ID 1.00 des outils sapui5.

Une trace du framework SAPUI5 est également disponible sous SCN. Vous pouvez aller sur ce lienhttp://scn.sap.com/community/developer-center/front-end

Step 1 - Pour créer un nouveau projet dans UI5 developer Studio, accédez à Fichier → Nouveau → Projet.

Step 2 - Entrez le nom du projet, de l'équipement cible et créez une vue initiale.

Step 3 - Entrez le nom de la vue et le type de vue dans la fenêtre suivante et cliquez sur Suivant.

Step 4- Dans la dernière fenêtre, vous voyez le résumé du projet. Il vous montre les propriétés du projet. Cliquez sur le bouton Terminer pour créer le projet.

Step 5- Vous serez invité à passer en perspective Java EE. Cliquez sur Oui et cela ouvrira une nouvelle fenêtre de projet UI5 avec une vue initiale - JSView.

Step 6 - Maintenant, pour ajouter un Shell à cette vue, vous pouvez utiliser la bibliothèque sap.ui.ux3.Shell ().

Step 7- Comme Shell ne fait pas partie de sap.ui.commons, vous devez ajouter la bibliothèque sap.ui.ux3. Vous pouvez ajouter des bibliothèques supplémentaires à data-sap-ui-libs.

Pour exécuter une application, vous avez deux options -

  • Exécuter sur le serveur
  • Exécuter sur webapp

L'exécution sur le serveur est recommandée car elle a un port fixe et ce n'est pas comme une exécution sur une application Web avec un port aléatoire unique.

SAP UI5 ─ Configuration

Comme indiqué dans le tableau suivant, vous pouvez définir divers attributs de configuration dans SAP UI5 -

Fonctions principales

Les fonctions principales de SAP UI5 sont les suivantes:

  • Sap.ui.getCore() - Ceci est utilisé pour obtenir une instance principale.

  • Sap.ui.getCore().byid(id) - Ceci est utilisé pour obtenir une instance de contrôle UI5 ​​créée avec id.

  • Sap.ui.getCore().applyChanges() - Ceci est utilisé pour effectuer et rendre immédiatement les modifications des contrôles UI5.

  • jQuery.sap.domById(id)- Ceci est utilisé pour obtenir n'importe quel élément HTML avec id. S'il existe un contrôle UI5 ​​avec id, l'élément renvoyé est l'élément HTML le plus élevé du contrôle UI5.

  • jQuery.sap.byId(id) - Ceci est utilisé pour renvoyer l'objet jQuery de l'élément DOM avec l'ID spécifié.

Il existe différents types de contrôles d'interface utilisateur que vous pouvez utiliser lors du développement d'applications UI5. Ces contrôles vous permettent d'ajouter un bouton, un tableau, des images, une mise en page, une zone de liste déroulante et divers autres contrôles dans l'application UI5.

Les types de contrôle courants incluent -

  • Commandes simples
  • Contrôles complexes
  • Contrôles UX3
  • Dialogs
  • Layout

Contrôle d'image

Var image = new sap.ui.commons.Image();
Image.setSrc(“Image1.gif”);
Image.setAlt(“alternat.text”);

Boîte combo

Vous pouvez utiliser une zone de liste déroulante pour fournir des entrées prédéfinies.

Propriétés - éléments, selectedKey

Var oComboBox2 = new sap.ui.commons.ComboBox (“ComboBox”,{
   Items:{path:”/data”,
      Template:oItemTemplate, filters:[oFilter]},
   Change: function(oEvent){
      Sap.ui.getCore(). byId(“field”).setValue(
         oEvent.oSource.getSelectedKey());
   }
});

Contrôle par bouton simple

Utilisez attachPresss assigner un gestionnaire d'événements pour une action push.

Var oButton = new sap.ui.commons.Button ({text : “Click”,
   Press: oController.update
});

Contrôle de la saisie semi-automatique

Pour compléter automatiquement la valeur saisie.

Var uiElement = new sap.ui.commons.AutoComplete({
   Tooltip: ”Enter the product”,
   maxPopupItems: 4
});
For (var i = 0; i<aData.lenght; i++){
   uiElement.addItem(new sap.ui.core.ListItem(
      {text: aData[i].name}));
}

Boîte de contrôle de table

Il est dérivé de sap.ui.table et chaque table contient des colonnes.

Var oTable = new sap.ui.table.Table({
   Columns: [
      New sap.ui.table.Column({
         Label: new sap.ui.commons.lable({ text: “First Column”}),
         Template: new sap.ui.commons.TextView({ text: “{Firstcolumn}” }),
         Width: “120px”
      })

Dans SAP UI5, data binding conceptest utilisé pour mettre à jour les données automatiquement en liant les données avec les contrôles qui contiennent les données d'application. À l'aide de la liaison de données, vous pouvez lier des contrôles simples comme un champ de texte, un bouton simple aux données d'application et les données sont automatiquement mises à jour lorsqu'il y a une nouvelle valeur.

À l'aide de la liaison de données bidirectionnelle, les données d'application sont mises à jour lorsque la valeur du contrôle lié change. La valeur peut être modifiée via différentes méthodes, comme l'entrée utilisateur, etc.

Dans SAP UI5, différents modèles de données peuvent être utilisés pour la liaison de données. Ces modèles de données prennent en charge différentes fonctionnalités -

Modèle JSON

Le modèle JSON est utilisé pour lier des objets JavaScript aux contrôles. Ce modèle de données est un modèle côté client et est suggéré pour les petits ensembles de données. Il ne fournit aucun mécanisme pour la pagination ou le chargement côté serveur.

Les principales caractéristiques comprennent -

  • Le modèle JSON pour la liaison de données prend en charge les données au format de notation JavaScript.
  • Il prend en charge la liaison de données bidirectionnelle.

Creating a model instance −

Var oModel = new sap.ui.model.json.JSONModel(dataUrlorData);

Modèle XML

Le modèle XML de liaison de données vous permet de lier les contrôles aux données XML. Il est utilisé pour les objets côté client et pour les petits ensembles de données. Il ne fournit aucun mécanisme pour la pagination ou le chargement côté serveur.

Les principales caractéristiques comprennent -

  • Le modèle XML de liaison de données prend en charge les données XML.
  • Il prend également en charge la liaison de données bidirectionnelle.

Creating a model instance −

Var oModel = new sap.ui.model.xml.XMLModel(dataUrlorData);

Modèle OData

Le modèle OData est un modèle côté serveur, donc toutes les données sont disponibles côté serveur. Le côté client ne peut voir que les lignes et les champs et vous ne pouvez pas utiliser le tri et le filtrage côté client. Il est nécessaire d'envoyer cette demande au serveur pour effectuer ces tâches.

La liaison de données dans le modèle OData est à sens unique, mais vous pouvez activer la liaison bidirectionnelle à l'aide de la prise en charge de l'écriture expérimentale.

Les principales caractéristiques comprennent -

  • Le modèle OData de liaison de données prend en charge les données compatibles Odata.
  • Ce modèle de données vous permet de créer des requêtes OData et de gérer les réponses.
  • Il prend en charge la liaison bidirectionnelle expérimentale.

Creating a model instance −

Var oModel = new sap.ui.model.odata.ODataModel (dataUrl [,useJSON, user, pass]);

Attribution du modèle

Vous pouvez utiliser la méthode setModel pour affecter le modèle à des contrôles ou à un noyau spécifiques.

Sap.ui.getcore().setModel(oModel);

Pour lier un modèle à afficher -

Var myView = sap.ui.view({type:sap.ui.core.mvc.ViewType.JS, viewname:”view name”});
myView.setModel(oModel);

Pour lier un modèle à un contrôle -

Var oTable = sap.ui.getCore().byId(“table”);
oTable.setModel(oModel);

Vous pouvez lier les propriétés d'un contrôle aux propriétés du modèle. Vous pouvez lier les propriétés d'un modèle à un contrôle à l'aide de la méthode bindproperty -

oControl.bindProperty(“controlProperty”, “modelProperty”);
or by using below methodvar
oControl = new sap.ui.commons.TextView({
   controlProperty: “{modelProperty}”
});

Liaison d'agrégation

Vous pouvez utiliser la liaison d'agrégation pour lier une collection de valeurs, comme la liaison de plusieurs lignes à une table. Pour utiliser l'agrégation, vous devez utiliser un contrôle qui agit comme un modèle.

Vous pouvez définir la liaison d'agrégation à l'aide de la méthode bindAgregation.

oComboBox.bindaggregation( “items”, “/modelaggregation”, oItemTemplate);

Design Patternest un nouveau terme dans le développement SAP UI5 lorsque nous parlons de développement SAP ou de système SAP Fiori. SAP travaille dur pour trouver de nouveaux modèles de conception qui prennent en charge le développement dans le système SAP à l'aide du SDK UI5.

SAP a publié différents types de modèles de conception -

Maître-détail

Il s'agit d'une première étape de la liaison d'application et est pris en charge par le contrôle SplitApp de SAP UI5. Ce modèle de conception prend en charge la liste de contenu et permet la sélection des prospects et une vue détaillée.

Détail maître-maître

Ce modèle de conception affiche le détail de la transaction dans la section Détail.

Example - Vous passez une commande en ligne et vous souhaitez voir une page de confirmation qui affiche ce que vous achetez et affiche le détail de la transaction avec une vue détaillée.

Plein écran

Ce modèle de conception est principalement recommandé pour afficher des graphiques, des données illustrées et divers types de graphiques.

Multi-flux

Ce modèle de conception est recommandé lorsque vous utilisez un flux d'application complexe et qu'il est nécessaire d'utiliser tous les modèles de conception pour créer une application fonctionnelle.

Dans le développement SAPUI5 pour les applications JavaScript plus volumineuses, le cadre UI5 ​​fournit une prise en charge intégrée de la modularisation. Modularizationconcept vous permet de diviser l'application en parties plus petites et elles peuvent être combinées ensemble au moment de l'exécution. Ces petites pièces d'application sont appelées modularisation.

Vous pouvez déclarer votre propre module JavaScript en appelant la fonction query jQuery.sap.declare et cela est utilisé pour garder une trace du nom du module et du module déjà chargé.

Pour charger un module, vous devez utiliser jQuery.sap.require

Exemple

<script>
   jQuery.sap.require(“sap.ui.commons.MessageBox”);
   ………………………
</script>

Lorsqu'un module est requis jQuery.sap.require et que ce module n'est pas chargé, il se charge automatiquement. Il appelle la méthode declare donc quand require est appelé, il sait que le module a été chargé.

SAP UI5 prend en charge le concept de localisation basé sur la plate-forme Java.

Identifying the Language Code - Pour l'identification des langues, le framework utilise un code de langue de type string.

Resource Bundles - Un fichier de regroupement de ressources est un fichier de propriétés Java et contient des paires clé / valeur où les valeurs sont des textes dépendant de la langue et les clés sont indépendantes de la langue et utilisées par l'application pour identifier et accéder aux valeurs correspondantes.

Les ensembles de ressources sont une collection de *.propertiesdes dossiers. Tous les fichiers sont nommés avec le même nom de base (préfixe identifiant le groupe de ressources), un suffixe facultatif qui identifie la langue contenue dans chaque fichier et lefixed .properties extension.

Les suffixes de langue sont formés selon l'ancienne syntaxe locale JDK. Par convention, un fichier sans suffixe de langue doit exister et contenir les textes bruts non traduits dans le langage du développeur. Ce fichier est utilisé si aucune langue plus appropriée ne peut être trouvée.

L'ensemble de ressources sap.ui.commons.message_bundle contient les fichiers suivants -

  • sap.ui.commons.message_bundle.properties - Ce fichier contient le texte brut du développeur et détermine le jeu de clés.

  • sap.ui.commons.message_bundle_en.properties - Ce fichier contient du texte anglais.

  • sap.ui.commons.message_bundle_en_US.properties - Ce fichier contient du texte en anglais américain.

  • sap.ui.commons.message_bundle_en_UK.properties - Ce fichier contient du texte en anglais britannique.

Utilisation de textes localisés dans les applications

SAPUI5 fournit deux options pour utiliser des textes localisés dans les applications: le module jQuery.sap.resources et la liaison de données.

Le code suivant est utilisé pour obtenir un ensemble de ressources pour une langue donnée -

jQuery.sap.require(“jquery.sap.resources”);
var oBundle = jQuery.sap.resources({url ; sUrl, locale:sLocale});

Le code suivant est utilisé pour accéder au texte dans le groupe de ressources -

Var sText = oBundle.getText(sKey);

Le code suivant est utilisé pour obtenir l'URL d'une ressource -

Var sUrl = sap.ui.resource(“sap.ui.table”,”messagebundle.properties”);

UNE Controlest utilisé pour définir l'apparence et la zone de l'écran. Il contient des propriétés telles que la largeur et le texte. Ces propriétés sont utilisées pour modifier l'apparence ou changer les données affichées par le contrôle. Vous pouvez créer des contrôles agrégés ou des contrôles associés.

Associated controld'un contrôle est défini comme des contrôles vaguement liés, qui ne sont pas des contrôles enfants ou une partie du contrôle principal. Les contrôles sont utilisés pour déclencher des événements bien définis.

Les contrôles dans SAPUI5 peuvent être créés directement à l'aide d'un outil ou d'un fichier JavaScript. Les contrôles créés à l'aide de la méthode extend () sont également appelésNotepad controls.

Le code suivant est utilisé pour définir un contrôle à l'aide de la méthode Extend -

Sap.ui.core.control.extend (sname, oDefinition);

Les paramètres qui sont passés à ce contrôle -

  • Nom du contrôle
  • Définition du contrôle

La définition d'un contrôle contient des informations sur l'API de contrôle, les agrégations, les événements, etc. et les méthodes d'implémentation.

Vous pouvez également créer des contrôles personnalisés. La définition du contrôle personnalisé peut contenir des méthodes publiques et privées, des métadonnées et une méthode de rendu, etc.

metadata:{
   properties: {},
   events: {},
   aggregations: {}
},

publicMethod: function() {},
_privateMethod: function() {},
init: function() {}
onclick: function(e) {},
renderer: function(rm, oControl) {}

La création d'un nouveau contrôle hérite de Button -

Sap.ui.commons.Button.extend (sname, oDefinition);

le metadata dans la définition de contrôle se compose d'objets pour les propriétés de contrôle, les événements et les agrégations.

Propriété

  • Type: type de données de la propriété de contrôle
  • String: chaîne pour une propriété string
  • Int ou float pour les propriétés numériques
  • Int [] pour un tableau d'entiers
  • String [] pour un tableau de chaînes

Événements

Les événements sont définis par l'événement de nom uniquement. Vous passez normalement un objet vide à un événement. L'application utilise l'indicateur enablePreventDefault pour interrompre l'événement.

Events: {
   Logout:{},
   Close: {
      enablePreventDefault : true
   }
}

Vous pouvez étendre les applications UI5 qui sont distantes ou dans Web IDE. Pour créer un nouveau projet d'extension, vous devez avoir une application à distance ou sur IDE.

Step 1 - Pour créer un nouveau projet, allez dans Fichier → Projet d'extension.

Step 2 - Sélectionnez l'espace de travail pour sélectionner l'application SAP Fiori souhaitée que vous souhaitez utiliser comme application d'origine.

Step 3- Lorsque vous sélectionnez une application, le champ Nom du projet d'extension est rempli avec le nom de l'application d'origine avec l'extension de suffixe. Vous pouvez changer ce nom → Suivant

Step 4 - Si nécessaire, cochez la case Ouvrir le projet d'extension dans le volet d'extensibilité pour ouvrir automatiquement le volet d'extensibilité une fois le projet généré.

Step 5 - Cliquez sur Terminer.

De même, vous pouvez également étendre les applications qui résident dans la plateforme SAP HANA Cloud. Suivez les étapes ci-dessous.

Step 1 - Pour créer un nouveau projet, allez dans Fichier → Projet d'extension.

Step 2 - Sélectionnez la boîte de dialogue Démarrer → À distance → SAP HANA Cloud Platform → Sélectionner une application dans la boîte de dialogue SAP HANA Cloud Platform.

Step 3 - Dans la fenêtre suivante, vous devez saisir le compte, le nom d'utilisateur et le mot de passe de SAP HANA Cloud Platform.

Step 4 - Sélectionnez Obtenir des applications et recherchez l'application que vous souhaitez étendre.

Step 5- Sélectionnez l'application souhaitée → OK. Le champ Nom du projet d'extension est automatiquement renseigné dans l'assistant. Si nécessaire, vous pouvez modifier ce nom.

Step 6- Cliquez sur Suivant. Choisissez Terminer pour confirmer et créer votre projet d'extension.

Le concepteur de thèmes d'interface utilisateur est un outil basé sur un navigateur qui vous permet de développer vos thèmes en modifiant l'un des modèles de thème fournis par SAP.

Example- Vous pouvez modifier la palette de couleurs ou ajouter le logo de votre entreprise. L'outil fournit un aperçu en direct du thème pendant que vous concevez.

Appliquez la marque de votre entreprise et recherchez des applications créées avec les technologies SAP UI. Le concepteur de thèmes d'interface utilisateur est un outil basé sur un navigateur pour les scénarios croisés. Utilisez-le pour créer facilement vos thèmes d'identité d'entreprise en modifiant l'un des modèles de thème fournis par SAP. Par exemple, vous pouvez modifier le jeu de couleurs ou ajouter le logo de votre entreprise. L'outil est destiné à différents groupes d'utilisateurs, notamment les développeurs, les concepteurs visuels et les administrateurs.

Plateforme prise en charge

  • SAP NetWeaver comme ABAP (via UI Add-On 1.0 SP4)
  • SAP NetWeaver Portal (7.30 SP10 et version supérieure)
  • SAP HANA Cloud (planifié)
  • Portail SAP NetWeaver (7.02 prévu)

Principales caractéristiques et avantages

  • Browser-based, graphical WYSIWYG editor - Modifie les valeurs des paramètres de thème et voit immédiatement comment cela affecte la visualisation de la page d'aperçu sélectionnée.

  • Built-in preview pages - Sélectionnez les pages d'aperçu intégrées pour voir à quoi ressemblera votre thème personnalisé lorsqu'il sera appliqué à une application -

    • Aperçus de l'application (exemple: approbation de bon de commande, SAP Fiori Launchpad)

    • Contrôle des aperçus

  • Different levels of theming -

    • Thématisation rapide (paramètres de thème de base inter-technologies)

    • Thématisation experte (paramètres de thème spécifiques à la technologie)

    • Edition manuelle LESS ou CSS

  • Color palette for reuse - Spécifie un ensemble de paramètres avec les valeurs de couleur principales définissant la marque de votre entreprise.

  • Cross-technology theming - Créez un thème cohérent qui s'applique à divers clients et technologies SAP UI -

    • Bibliothèques standard SAPUI5 (y compris les applications SAP Fiori et SAP Fiori Launchpad)

    • Technologies de rendu unifié (telles que Web Dynpro ABAP et Floorplan Manager)

    • Client d'entreprise SAP NetWeaver

Client de l'interface utilisateur SAP Les parties de l'interface utilisateur peuvent être thématiques
Web Dynpro ABAP

Vous pouvez appliquer un thème aux applications qui n'utilisent pas les éléments d'interface utilisateur suivants:

  • HTMLIsland
  • HTMLContainer
  • Chart
  • FlashIsland
  • SilverlightIsland
  • BusinessGraphics

Vous ne pouvez utiliser que les thèmes créés avec le concepteur de thèmes d'interface utilisateur pour les applications Web Dynpro ABAP à partir de SAP NetWeaver 7.0 EHP2
Floorplan Manager pour Web Dynpro ABAP (FPM) Vous pouvez thématiser des applications qui n'utilisent pas HTMLIslands ou Chart UIBBs
SAPUI5 Vous pouvez thématiser les bibliothèques SAP Standard. Les bibliothèques SAPUI5 personnalisées ne peuvent pas avoir de thème
Client d'entreprise SAP NetWeaver (NWBC)

NWBC for Desktop (4.0 ou supérieur): Vous pouvez thématiser le shell NWBC et les pages de présentation (page d'index, nouvel onglet, carte de service).

NWBC pour HTML (3.6): vous pouvez créer un thème pour la carte des services. Le shell ne peut pas être thématisé.

Comment appeler un concepteur de thèmes dans SAP Fiori?

Step 1- Connectez-vous au serveur SAP Fiori Front-End. Vous pouvez utiliserT-Code: Theme Designer ou utilisez le raccourci comme indiqué dans la capture d'écran suivante et connectez-vous.

Step 2- Une fois connecté, vous aurez tous les modèles par défaut fournis par SAP pour Theme Designer. Sélectionnez le thème par défaut et cliquez sur Ouvrir.

Step 3 - Entrez le lien Fiori Launchpad et le nom de l'application et cliquez sur Ajouter.

Step 4- Sur le côté droit du panneau d'écran, vous pouvez sélectionner Couleur, Police, Image et autres propriétés. Vous pouvez modifier les couleurs comme indiqué dans les captures d'écran suivantes.

Step 5- Pour enregistrer le thème, vous pouvez cliquer sur l'icône Enregistrer comme indiqué dans la capture d'écran suivante. Vous avez également une option pour enregistrer et construire une option.

Une fois que vous avez cliqué sur Enregistrer et construire, il commencera à enregistrer et une fois terminé, vous recevrez un message de confirmation - Enregistrer et construire terminé.

Step 6 - Pour obtenir le lien de ce thème personnalisé, utilisez le code T comme indiqué dans la capture d'écran suivante -

Step 7 - Sélectionnez le thème que vous avez créé et cliquez sur l'onglet Info.

Step 8 - Utilisez Ctrl + Y pour copier l'URL de l'écran et en prendre note.

Thèmes pris en charge

Ce sont les thèmes par défaut fournis avec UI5 -

  • Cristal bleu
  • Réflexion d'or
  • Identifier visuel mobile
  • Noir à contraste élevé

Types de graphiques

Il existe différents types de graphiques dans la bibliothèque de graphiques sap.viz.ui5 qui peuvent être utilisés pour représenter les données d'entreprise. Voici quelques types de graphiques CVOM - Colonne, Bulle, Ligne, Pie, etc.

Les applications SAP UI5 s'exécutent sur différents appareils mobiles comme l'iPad et les smartphones. Cependant, pour une meilleure expérience utilisateur, vous devez contrôler l'apparence, les interactions tactiles et divers autres paramètres de l'interface utilisateur.

UI5 contient une bibliothèque de contrôle sap.m qui prend en charge le développement d'applications pour les appareils mobiles et prend en charge tous les concepts clés tels que la liaison de données, MVC, etc.

Principales caractéristiques

  • Prise en charge de la plate-forme pour Android, iOS, BlackBerry
  • Il contient 40 contrôles
  • Navigateurs Webkit - Google Chrome
  • Concepts UI5 - MVC, localisation, modularisation, etc.

Dans ce chapitre, nous allons apprendre à créer un projet dans Web IDE. Allons-y étape par étape.

Step 1 - Pour démarrer un nouveau projet, allez dans Fichier → Nouveau → Projet

Step 2- Saisissez le nom du projet. Dans la fenêtre suivante, sélectionnez le modèle.

Step 3 - Sélectionnez le modèle Applications mobiles SAPUI5 → Suivant

Step 4- L'étape suivante consiste à sélectionner la connexion de données. Sélectionnez l'URL du service → Sélectionnez

Step 5 - Dans l'étape suivante, vous devez effectuer la personnalisation du modèle.

Step 6 - En cliquant sur Suivant, vous verrez le Finish bouton.

Une fois que vous cliquez sur Terminer, vous pouvez voir un nouveau projet créé avec la structure par défaut de l'application d'interface utilisateur. Il contient la vue, le modèle et le nom du projet.