SAP UI5 - Componentes clave

SAP UI5 tiene múltiples componentes que son objetos independientes y reutilizables en la aplicación UI5. Estos componentes pueden ser desarrollados por diferentes personas y pueden usarse en diferentes proyectos.

Una aplicación puede usar los componentes de diferentes ubicaciones y, por lo tanto, puede obtener fácilmente la estructura de una aplicación. Puede crear diferentes tipos de componentes bajo el desarrollo de SAP UI5.

Componentes sin rostro

Los componentes sin rostro se utilizan para obtener los datos del sistema backend y no contienen una interfaz de usuario.

Example- Son parte de la clase sap.ui.core.component

Componentes de UI

Los componentes de la interfaz de usuario se utilizan para agregar funcionalidad de representación y representar un área o elemento de la pantalla en la interfaz de usuario.

Example- El componente de la interfaz de usuario puede ser un botón con configuraciones para realizar alguna tarea. Es parte de la clase: sap.ui.core.UIComponent

Note- sap.ui.core.component es la clase base para componentes sin rostro y UI. Para definir la función de extensibilidad, los componentes pueden heredar de la clase base o de otros componentes en el desarrollo de la interfaz de usuario.

El nombre del módulo de un componente se conoce como el nombre del paquete y .component donde el nombre del paquete se define como el nombre del parámetro pasado al constructor del componente.

Los componentes de SAP UI5 también se pueden dividir según el panorama del sistema:

  • Componente del lado del cliente: esto incluye,
    • Controle las bibliotecas sap.m, sap.ui.common, etc.
    • Javascript principal
    • La prueba incluye HTML y Javascript
  • Componente del lado del servidor
    • Generador de temas
    • Herramientas de control y desarrollo de aplicaciones en Eclipse
    • Manejador de recursos

Estructura de un componente

Cada componente está representado en forma de carpeta y contiene el nombre de los componentes y los recursos necesarios para administrar el componente.

Cada componente debe contener los siguientes archivos:

  • Component.json archivo que contiene metadatos para el tiempo de diseño y se usa solo para herramientas de tiempo de diseño.

  • Component.js se utiliza para definir propiedades, eventos y métodos de componentes que son responsables de los metadatos en tiempo de ejecución.

¿Cómo crear un nuevo componente SAP UI5?

Para crear un nuevo componente, debe crear una nueva carpeta. Vamos a nombrar esto comobutton.

Lo siguiente es crear el component.js file

Luego, debe extender la clase base del componente de IU sap.ui.core.UIComponent.extend e ingresar el nombre del componente y la ruta del paquete.

Posteriormente, para definir un nuevo componente, debe comenzar con el require declaración de la siguiente manera:

// 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;
};

El siguiente paso es definir el component.json en su carpeta de la siguiente manera:

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

Cómo utilizar un componente

Para utilizar un componente, debe envolver el componente en un contenedor de componentes. No puede usar directamente un componente de IU en una página usando el método placeAt. Otra forma es pasar el componente al constructor componentContainer.

Usando el método placeAt

Incluye agregar el componente al contenedor y usar placeAt método para colocar el componente en la página.

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

Usando el constructor componentContainer

Un contenedor de componentes tiene configuraciones específicas y también contiene los métodos de ciclo de vida de un control regular. El siguiente segmento de código muestra cómo pasar el componente al constructor componentContainer.

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