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

↰ Previous page Next page ↱