SAPUI5 Grundlagen

Komponenten bauen

Wiederverwendung

(C) Brandeis Consulting.

Component Konzepte

Eine Component ist eine isolierte und wiederverwendbare Einheit in SAPUI5. Sie repräsentiert einen Teil einer UI-Anwendung und kapselt die Daten und die Logik, die für die Darstellung dieses Teils erforderlich sind. Sie ist sozusagen ein Baustein, der dazu beiträgt, größere und komplexere Anwendungen in handhabbare Teile zu zerlegen.

Eine Komponente kann mehrere Views umfassen.

Die Datei Component.js definiert eine Komponente. Sie übernimmt Funktionen, die bislang der Controller erledigt hat, insbesondere die init() Funktion.

Die Metadaten einer Komponente können entweder in der Komponente selber definiert sein, so wie in der Walkthrough Anwendung. Oder sie werden in eine manifest.json-Datei ausgelagert.

(C) Brandeis Consulting.

Übersicht

(C) Brandeis Consulting.

Definition von Component.js

Die Funktion liefert eine Erweiterung von UIComponent zurück. Es wurden redefiniert:

  • Der Name der Komponente
  • metadata - Ein JSON-Objekt mit Metadaten. Später laden wir die Daten aus einer Datei manifest.json
  • init - Die Init-Funktion. Sie muss immer die Init-Funktion der Superklasse aufrufen:
    UIComponent.prototype.init.apply(this, arguments);
    
sap.ui.define([
   "sap/ui/core/UIComponent",
   "sap/ui/model/json/JSONModel",
   "sap/ui/model/resource/ResourceModel"
], function (UIComponent, JSONModel, ResourceModel) {
   "use strict";
   return UIComponent.extend("ui5.walkthrough.Component",
     {
      metadata : {
         "interfaces": ["sap.ui.core.IAsyncContentCreation"],
         "rootView": {
            "viewName": "ui5.walkthrough.view.App",
            "type": "XML",
            "id": "app"
         }
      },
      init : function () {
         // call the init function of the parent
         UIComponent.prototype.init.apply(this, arguments);
         // set data model
         var oData = {
            recipient : {
               name : "World"
            }
         };
         var oModel = new JSONModel(oData);
         this.setModel(oModel);

         // set i18n model
         var i18nModel = new ResourceModel({
            bundleName: "ui5.walkthrough.i18n.i18n"
         });
         this.setModel(i18nModel, "i18n");
      }
   });
});
(C) Brandeis Consulting.

Änderungen in index.js

Bislang hatte die Datei index.js den View im Element mit dem Namen content platziert. Statt dessen wird jetzt der ComponentContainer erzeugt und dort platziert.

sap.ui.define([
	"sap/ui/core/ComponentContainer"
], function (ComponentContainer) {
	"use strict";

	new ComponentContainer({
		name: "ui5.walkthrough",
		settings : {
			id : "walkthrough"
		},
		async: true
	}).placeAt("content");
});
(C) Brandeis Consulting.