SAP UI5 - Componentes-chave

SAP UI5 possui vários componentes que são objetos independentes e reutilizáveis ​​no aplicativo UI5. Esses componentes podem ser desenvolvidos por pessoas diferentes e podem ser usados ​​em projetos diferentes.

Um aplicativo pode usar os componentes de diferentes locais e, portanto, você pode obter facilmente a estrutura de um aplicativo. Você pode criar diferentes tipos de componentes no desenvolvimento SAP UI5.

Componentes sem rosto

Os componentes sem rosto são usados ​​para obter os dados do sistema de back-end e não contêm uma interface de usuário.

Example- Eles fazem parte da classe sap.ui.core.component

Componentes da IU

Os componentes da IU são usados ​​para adicionar funcionalidade de renderização e representar uma área ou elemento da tela na interface do usuário.

Example- O componente da IU pode ser um botão com configurações para executar alguma tarefa. É uma parte da classe: sap.ui.core.UIComponent

Note- sap.ui.core.component é a classe base para componentes sem rosto e UI. Para definir a função de extensibilidade, os componentes podem herdar da classe base ou de outros componentes no desenvolvimento de UI.

O nome do módulo de um componente é conhecido como o nome do pacote e .component onde o nome do pacote é definido como o nome do parâmetro passado ao construtor do componente.

Os componentes SAP UI5 também podem ser divididos de acordo com o panorama do sistema -

  • Componente do lado do cliente: Isso inclui,
    • Bibliotecas de controle sap.m, sap.ui.common, etc.
    • Javascript principal
    • O teste inclui HTML e Javascript
  • Componente do lado do servidor
    • Gerador de Temas
    • Ferramentas de controle e desenvolvimento de aplicativos no Eclipse
    • Manipulador de recursos

Estrutura de um Componente

Cada componente é representado na forma de uma pasta e contém o nome dos componentes e os recursos necessários para gerenciar o componente.

Cada componente deve conter os seguintes arquivos -

  • Component.json arquivo que contém metadados para tempo de design e é usado apenas para ferramentas de tempo de design.

  • Component.js é usado para definir propriedades, eventos e métodos de componentes que são responsáveis ​​pelos metadados de tempo de execução.

Como criar um novo componente SAP UI5?

Para criar um novo componente, você deve criar uma nova pasta. Vamos nomear isso comobutton.

O próximo é criar o component.js file

Em seguida, você deve estender a classe base do componente de UI sap.ui.core.UIComponent.extend e inserir o nome do componente e o caminho do pacote.

Mais tarde, para definir um novo componente, você deve começar com o require declaração da seguinte forma -

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

A próxima etapa é definir o component.json em sua pasta da seguinte maneira -

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

Como usar um componente

Para usar um componente, você deve envolvê-lo em um contêiner de componentes. Você não pode usar diretamente um componente de IU em uma página usando o método placeAt. Outra maneira é passar o componente para o construtor componentContainer.

Usando o método placeAt

Inclui adicionar o componente ao contêiner e usar placeAt método para colocar o componente na 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 o construtor componentContainer

Um contêiner de componente carrega configurações específicas e também contém os métodos de ciclo de vida de um controle regular. O segmento de código a seguir mostra como passar o componente para o construtor componentContainer.

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