SAP UI5 - Componenti chiave

SAP UI5 ha più componenti che sono oggetti indipendenti e riutilizzabili nell'applicazione UI5. Questi componenti possono essere sviluppati da persone diverse e possono essere utilizzati in progetti diversi.

Un'applicazione può utilizzare i componenti da posizioni diverse e quindi è possibile ottenere facilmente la struttura di un'applicazione. È possibile creare diversi tipi di componenti nello sviluppo di SAP UI5.

Componenti senza volto

I componenti senza volto vengono utilizzati per ottenere i dati dal sistema di backend e non contengono un'interfaccia utente.

Example- Fanno parte della classe sap.ui.core.component

Componenti dell'interfaccia utente

I componenti dell'interfaccia utente vengono utilizzati per aggiungere funzionalità di rendering e rappresentare un'area o un elemento dello schermo nell'interfaccia utente.

Example- Il componente dell'interfaccia utente può essere un pulsante con le impostazioni per eseguire alcune attività. È una parte della classe: sap.ui.core.UIComponent

Note- sap.ui.core.component è la classe base per i componenti senza volto e dell'interfaccia utente. Per definire la funzione di estensibilità, i componenti possono ereditare dalla classe base o da altri componenti nello sviluppo dell'interfaccia utente.

Il nome del modulo di un componente è noto come nome del pacchetto e .component dove il nome del pacchetto è definito come il nome del parametro passato al costruttore del componente.

I componenti SAP UI5 possono anche essere suddivisi in base al panorama del sistema -

  • Componente lato client: questo include,
    • Librerie di controllo sap.m, sap.ui.common, ecc.
    • Core Javascript
    • Il test include HTML e Javascript
  • Componente lato server
    • Generatore di temi
    • Strumenti di controllo e sviluppo di applicazioni in Eclipse
    • Gestore delle risorse

Struttura di un componente

Ogni componente è rappresentato sotto forma di una cartella e contiene il nome dei componenti e delle risorse necessarie per gestire il componente.

Ogni componente dovrebbe contenere i seguenti file:

  • Component.json file che contiene metadati per la fase di progettazione e viene utilizzato solo per gli strumenti della fase di progettazione.

  • Component.js viene utilizzato per definire proprietà, eventi e metodi dei componenti responsabili dei metadati di runtime.

Come creare un nuovo componente SAP UI5?

Per creare un nuovo componente, devi creare una nuova cartella. Chiamiamolo comebutton.

Il prossimo è creare il file component.js file

Quindi, è necessario estendere la classe base del componente UI sap.ui.core.UIComponent.extend e immettere il nome del componente e il percorso del pacchetto.

Successivamente, per definire un nuovo componente, devi iniziare con il require dichiarazione come segue -

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

Il prossimo passo è definire il component.json nella tua cartella come segue:

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

Come utilizzare un componente

Per utilizzare un componente, è necessario avvolgere il componente in un contenitore di componenti. Non è possibile utilizzare direttamente un componente dell'interfaccia utente in una pagina utilizzando il metodo placeAt. Un altro modo è passare il componente al costruttore componentContainer.

Utilizzo del metodo placeAt

Include l'aggiunta del componente al contenitore e l'utilizzo di placeAt metodo per posizionare il componente sulla pagina.

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

Utilizzo del costruttore componentContainer

Un contenitore di componenti contiene impostazioni specifiche e contiene anche i metodi del ciclo di vita di un controllo regolare. Il segmento di codice seguente mostra come passare il componente al costruttore componentContainer.

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