SAP UI5 - Kluczowe komponenty

SAP UI5 ma wiele komponentów, które są niezależnymi obiektami wielokrotnego użytku w aplikacji UI5. Te komponenty mogą być opracowywane przez różne osoby i mogą być używane w różnych projektach.

Aplikacja może używać komponentów z różnych lokalizacji, dzięki czemu można łatwo uzyskać strukturę aplikacji. Możesz tworzyć różne typy komponentów w ramach rozwoju SAP UI5.

Komponenty bez twarzy

Komponenty bez twarzy są używane do pobierania danych z systemu zaplecza i nie zawierają interfejsu użytkownika.

Example- Są częścią klasy sap.ui.core.component

Składniki interfejsu użytkownika

Składniki interfejsu użytkownika służą do dodawania funkcji renderowania i reprezentowania obszaru ekranu lub elementu w interfejsie użytkownika.

Example- Komponent UI może być przyciskiem z ustawieniami do wykonania jakiegoś zadania. Jest częścią klasy: sap.ui.core.UIComponent

Note- sap.ui.core.component jest klasą bazową dla komponentów bez twarzy i komponentów interfejsu użytkownika. Aby zdefiniować funkcję rozszerzalności, składniki mogą dziedziczyć z klasy bazowej lub z innych składników w programowaniu interfejsu użytkownika.

Nazwa modułu składnika jest znana jako nazwa pakietu, a .component gdzie nazwa pakietu jest zdefiniowana jako nazwa parametru przekazanego do konstruktora składnika.

Komponenty SAP UI5 można również podzielić zgodnie z krajobrazem systemu -

  • Komponent po stronie klienta: obejmuje:
    • Biblioteki kontrolne sap.m, sap.ui.common itp.
    • Podstawowy JavaScript
    • Test obejmuje HTML i Javascript
  • Komponent po stronie serwera
    • Generator motywów
    • Narzędzia do sterowania i tworzenia aplikacji w Eclipse
    • Obsługa zasobów

Struktura komponentu

Każdy komponent jest reprezentowany w postaci folderu i zawiera nazwy komponentów oraz zasoby wymagane do zarządzania komponentem.

Każdy komponent powinien zawierać następujące pliki -

  • Component.json plik zawierający metadane dotyczące czasu projektowania i jest używany tylko na potrzeby narzędzi czasu projektowania.

  • Component.js służy do definiowania właściwości, zdarzeń i metod komponentów odpowiedzialnych za metadane środowiska wykonawczego.

Jak utworzyć nowy komponent SAP UI5?

Aby utworzyć nowy komponent, musisz utworzyć nowy folder. Nazwijmy to jakobutton.

Następnie należy utworzyć plik component.js file

Następnie należy rozszerzyć klasę bazową komponentu UI sap.ui.core.UIComponent.extend i wprowadzić nazwę komponentu oraz ścieżkę do pakietu.

Później, aby zdefiniować nowy komponent, musisz zacząć od require oświadczenie w następujący sposób -

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

Następnym krokiem jest zdefiniowanie pliku component.json w folderze w następujący sposób -

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

Jak używać komponentu

Aby użyć komponentu, musisz owinąć go w pojemnik na komponenty. Nie można bezpośrednio używać składnika interfejsu użytkownika na stronie przy użyciu metody placeAt. Innym sposobem jest przekazanie komponentu do konstruktora componentContainer.

Korzystanie z metody placeAt

Obejmuje dodanie komponentu do pojemnika i użycie placeAt metoda umieszczania komponentu na stronie.

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

Korzystanie z konstruktora componentContainer

Kontener komponentów niesie określone ustawienia, a także zawiera metody cyklu życia regularnej kontroli. Poniższy segment kodu pokazuje, jak przekazać składnik do konstruktora componentContainer.

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