2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
Komponenten(Komponente) ist eine unabhängige und wiederverwendbare Komponente in einer SAPUI5-Anwendung.
SAPUI5 stellt die folgenden zwei Arten von Komponenten bereit:
gesichtslose Komponente (Klasse:sap.ui.core.Component): Keine Schnittstellenkomponente bedeutet, dass keine vorhanden istBenutzeroberflächeVerwandte Elemente, die in Szenarien verwendet werden, die keine Codierung von UI-Elementen erfordern;
UI-Komponenten (Klasse:sap.ui.core.UICcomponent): UI-Komponenten werden verwendet, um UI-Elemente auf der Anwendungsoberfläche darzustellen, wie z. B. Schaltflächen, sowie entsprechende Einstellungen und Metadaten.
Hinweis: „Headless-Komponenten“ können nicht zum Komponentencontainer hinzugefügt werden
Component ContainerMitte;
sap.ui.core.UICcomponent erweitert sap.ui.core.Component und fügt eine Bildschirmwiedergabefunktion basierend auf sap.ui.core.Component hinzu.
Im Allgemeinen sollte eine vollständige Komponente in einer Anwendung zwei Teile enthalten: KomponenteReglerdokumentieren(component .js) und die Anwendungsbeschreibungsdeskriptordatei (manifest.json)。
Der größte Vorteil bei der Verwendung von Komponenten besteht darin, dass gekapselte Komponenten flexibel eingebettet werden könnenanders组件容器（Component Container） Mitte. Fiori Launchpad ist beispielsweise ein Komponentencontainer. Während des Anwendungstests erstellen wir normalerweise auch manuell einen Komponentencontainer.
Hinweis: Beim Instanziieren des Komponentencontainers wird der Namespace der Anwendung angegeben und der Komponentencontainer verwendet diesen Pfad, um die Komponentencontrollerdatei zu finden.
Das Folgende ist ein Beispiel für eine Komponenten-Controller-Datei Component.js:
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/model/json/JSONModel"
], function (UIComponent, JSONModel) {
"use strict";
return UIComponent.extend("my.namespace.demo.Component", {
metadata : {
manifest: "json"
},
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);
}
});
});
In diesem Beispiel definieren wir zunächst eine neue UI-Komponente und setzen dann das Manifest im Metadatenattribut auf json. Das bedeutet, dass wir die Manifestdatei im JSON-Format verwenden, um die Konfiguration der Komponente zu definieren.
Dann haben wir in der Init-Funktion zuerst die Init-Funktion der übergeordneten Klasse aufgerufen, dann das JSON-Modell festgelegt und es als Modell der Komponente festgelegt. Dieses Modell enthält ein Empfängerobjekt, das über ein Namensattribut mit dem Wert World verfügt.
Nachdem wir die Komponentendatei definiert haben, fügen wir sie der Anwendung hinzuindex.jsDatei, instanziieren Sie den Komponentencontainer, laden Sie die erstellte Komponente und laden Sie sie in die Seite.
Hier ist ein Beispiel einer index.js-Dateiladekomponente:
sap.ui.define([
"sap/ui/core/ComponentContainer"
], function (ComponentContainer) {
"use strict";
new ComponentContainer({
name: "my.namespace.demo",
settings : {
id : "demo"
},
async: true
}).placeAt("content");
});
In dieser Blog-Übung kapseln wir alle UI-Elemente in einer Komponente unabhängig von der Datei index.html.
Auf diese Weise erfolgt der Zugriff auf eine Ressource immer relativ zur Komponente (nicht relativ zu index.html).
Diese Architekturänderung macht das Laden von Anwendungen flexibler als die vorherige statische index.html-Seite. Sie kann beispielsweise direkt in einen Container wie das SAP Fiori Launchpad eingebettet werden.
Lassen Sie uns zunächst einmalwebappEine InitialeComponent.js Datei zum Speichern unserer Anwendungseinstellungen.Wenn die Komponente instanziiert wird, ruft SAPUI5 automatisch die Komponente aufinit Funktion.Unsere Komponente erbt von der Basisklassesap/ui/core/UICcomponent, im umgeschriebeneninitDie Methode sollte zunächst die Init-Funktion der Basisklasse aufrufen.
Die erstellte Projektdateistruktur sieht wie folgt aus:
Der Code von Component.js lautet wie folgt:
sap.ui.define([
"sap/ui/core/UIComponent"
], function (UIComponent) {
"use strict";
return UIComponent.extend("zsapui5.test.Component", {
init() {
// call the init function of the parent
UIComponent.prototype.init.apply(this, arguments);
}
});
});
Als Nächstes fügen wir der Datei Component.js die Anwendungskonfiguration hinzu.
Der geänderte Component.js-Code lautet wie folgt:
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("zsapui5.test.Component", {
metadata: {
"interfaces": ["sap.ui.core.IAsyncContentCreation"],
"rootView": {
"viewName": "zsapui5.test.view.App",
"type": "XML",
"id": "app"
}
},
init() {
//call the init function of the parent
UIComponent.prototype.init.apply(this, arguments);
//set data model
const oData = {
recipient : {
name: "World"
}
};
const oModel = new JSONModel(oData);
this.setModel(oModel);
//set i18n model
const i18nModel = new ResourceModel({
bundleName: "zsapui5.test.i18n.i18n"
});
this.setModel(i18nModel, "i18n");
}
});
});
Die geänderte .js-Komponentendatei besteht aus zwei Teilen:元数据部分und aufgerufen, wenn die Komponente initialisiert wird.init函数部分。
Der Metadatenabschnitt definiert die StammansichtApp.view.xmlDateireferenz, damit die Komponente die Anzeige der Anwendungsansicht statt direkt in der verwalten kannindex.js Erstellen und zeigen Sie die Stammansicht direkt in der Datei an.Der Metadatendefinitionsteil implementiert auchsap.ui.core.IAsyncContentCreationSchnittstelle, die es ermöglicht, Komponenten vollständig asynchron zu erstellen.
...
metadata: {
"interfaces": ["sap.ui.core.IAsyncContentCreation"],
"rootView": {
"viewName": "zsapui5.test.view.App",
"type": "XML",
"id": "app"
}
...
Bitte beachten Sie, dass die Schnittstelle sap.ui.core.IAsyncContentCreation implizit sowohl die RootView der Komponente als auch ihre Router-Konfiguration auf „async“ setzt: true; wir werden ihre Rolle in einem nachfolgenden Blog zum Thema „Routing und Navigation“ beschreiben.
Im Abschnitt „Init-Funktion“ machen wir dasselbe wie zuvorApp.controller.jsInstanziieren Sie das Datenmodell wie in der Controller-DateioModelund i18n-Modelli18nModel。
...
init() {
//call the init function of the parent
UIComponent.prototype.init.apply(this, arguments);
//set data model
const oData = {
recipient : {
name: "World"
}
};
const oModel = new JSONModel(oData);
this.setModel(oModel);
//set i18n model
const i18nModel = new ResourceModel({
bundleName: "zsapui5.test.i18n.i18n"
});
this.setModel(i18nModel, "i18n");
}
...
Beachten Sie, dass das Modell istDirekt an die Komponente binden , nicht in der Stammansicht der Komponente. Da verschachtelte Steuerelemente jedoch automatisch das Modell des übergeordneten Steuerelements erben, ist das Modell auch in der Ansicht verfügbar.
Da wir die Bindung von Datenobjekten und i18n-Modellobjekten bereits in der Datei Component.js implementiert haben, schreiben wir vorherApp.controller.jsLogisches Entfernen von Controller-Dateien, d. h. Löschen onInit 函数Und所需的模块引用。
Die Auswirkung des geänderten Codes ist wie folgt:
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/m/MessageToast"
], function (Controller, MessageToast) {
"use strict";
return Controller.extend("zsapui5.test.controller.App", {
onShowHello: function () {
// read msg from i18n model
const oBundle = this.getView().getModel("i18n").getResourceBundle();
const sRecipient = this.getView().getModel().getProperty("/recipient/name");
const sMsg = oBundle.getText("helloMsg", [sRecipient]);
// show message
MessageToast.show(sMsg);
}
});
});
In der vorherigen Datei index.js haben wir das Ansichtsobjekt der Anwendung direkt instanziiertXMLView . Lassen Sie uns nun die Ansicht über den Komponentencontainer instanziieren.
Dazu ersetzen wir die zuvor hinzugefügte View-Abhängigkeit durch die neuesap/ui/core/ComponentContainer Abhängigkeiten. Der Komponentencontainer fungiert als übergeordnete Komponente der Anwendungskomponente und verarbeitet deren Eigenschaften und Navigationsereignisse.
Beim Erstellen einer Instanz eines Komponentencontainers müssen Sie den Namensraum der Anwendung angeben, d. h.zsapui5.test(Es verweist auf den Webapp-Ordner des Projekts, in dem sich die .js-Dateien der Komponenten befinden.)
Der Effekt der angepassten index.js-Datei ist wie folgt:
sap.ui.define([
"sap/ui/core/ComponentContainer"
], function (ComponentContainer) {
"use strict";
new ComponentContainer({
name: "zsapui5.test",
settings : {
id : "test"
},
async: true
}).placeAt("content");
});
Beim Kapseln der Komponenten einer Anwendung sollten wir die folgenden Konventionen befolgen:
Component .jswebappOrdnerwebappim OrdnerFühren Sie das angepasste Programm aus und der Effekt ist wie folgt:
Die Anwendung läuft genauso wie vor der Anpassung.Aber wenn es vorbei istctrl + shift + alt + sÖffnen Sie das Diagnosefenster, um das Steuerungslayout anzuzeigen. Wir können die folgenden Unterschiede feststellen.
Der neu hinzugefügte ComponentContainer ist das übergeordnete Steuerelement von XMLView.
In diesem Artikel werden das Konzept und die Kapselungsmethode von Komponenten in SAPUI5 vorgestellt und deren Verwendung anhand eines Beispiels demonstriert.
Er widmet sich seit mehr als 30 Jahren der Technologieforschung und beherrscht verschiedene Sprachen wie Java, Linux, Javascript, PHP, CSS usw. Er hat viele Beiträge im Open-Source-Bereich geleistet Entwicklerdokumentationsstation, um einige Themen in der Technologieentwicklung als zukünftige Referenz zu teilen
