SAP UI5 - Composants clés

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