SAP UI5 中,sap.ui.core.UIComponent 和 sap.ui.core.Component 是两个不同的概念,但它们之间有分割。
sap.ui.core.Component 是 SAP UI5 框架中的一个基类,用于封装应用程序或控件。它是应用程序或控件的根级别对象,并负责管理和加载应用程序或控件中的所有资源,包含模型、视图和控制器。sap.ui.core.Component 能够通过在 manifest.json 文件中进行配置来实现。
sap.ui.core.UIComponent 是 sap.ui.core.Component 的子类,是 SAP UI5 应用程序中的外围组件。它蕴含应用程序中所有其余组件的定义,例如视图、控制器、模型和服务。它还提供了一个生命周期来治理这些组件,从而使开发人员可能更好地控制应用程序的初始化、销毁和更新。在 SAP UI5 应用程序中,通常只有一个 UIComponent 实例。
因而,UIComponent 是一个非凡的 Component,它定义了整个 SAP UI5 应用程序的根本构造和生命周期。UIComponent 实例化并管理应用程序中所有其余组件,同时提供了一些特定于应用程序的性能,例如路由、事件总线等。
总之,sap.ui.core.Component 是 SAP UI5 框架中所有组件的基类,而 sap.ui.core.UIComponent 是非凡的基于 sap.ui.core.Component 的组件,它定义了 SAP UI5 应用程序的根本构造和生命周期。
而 sap.ui.core.UIComponent.createContent 是用于创立此组件的内容(UI 控件树)的挂钩办法。
此类中的默认实现从该组件的描述符(门路 /sap.ui5/rootView)中读取根视图的名称(和可选类型),或者为了向后兼容,仅从动态组件元数据(属性 rootView)中读取名称 . 如果未指定类型,则默认为 XML。而后该办法调用视图工厂来实例化根视图并返回后果。
当没有根视图配置时,返回 null。
如果默认实现不合乎须要,这个办法能够被子类笼罩。子类不限于作为返回类型的视图,而是能够返回任何控件,但只能返回一个控件(然而能够是更大的控件树的根)。
sap.ui.core.UIComponent 子类还能够实现 sap.ui.core.IAsyncContentCreation 接口。
实现此接口时,异步 rootView 的加载和解决将链接到 Component.create 工厂的后果 Promise 中。能够省略额定的异步标记。请参见上面的示例 1:
sap.ui.define(["sap/ui/core/UIComponent", "sap/ui/core/Fragment"], function(UIComponent, Fragment) {
return UIComponent.extend("my.sample", {
metadata: {
rootView: {
viewName: "my.sample.views.Main",
type: "XML",
id: "sampleMainView"
},
interfaces: ["sap.ui.core.IAsyncContentCreation"]
}
});
});
下面这个例子展现了 异步
创立 XML root view 定义的办法。
示例 2 和 3 显示了子类如何笼罩 createContent 函数以异步运行。要异步创立根控件,子类必须在元数据中定义 sap.ui.core.IAsyncContentCreation 接口。
上面的代码展现了 异步
创立 XML root 视图实例的具体步骤:
sap.ui.define(["sap/ui/core/UIComponent", "sap/ui/core/mvc/XMLView"], function(UIComponent, XMLView) {
return UIComponent.extend("my.sample", {
metadata: {
// ...
interfaces: ["sap.ui.core.IAsyncContentCreation"]
},
createContent: function() {
// Dynamically create a root view
return XMLView.create({...});
}
});
});
上面代码展现了异步创立 XML fragment 的办法:
sap.ui.define(["sap/ui/core/UIComponent", "sap/ui/core/Fragment"], function(UIComponent, Fragment) {
return UIComponent.extend("my.sample", {
metadata: {
// ...
interfaces: ["sap.ui.core.IAsyncContentCreation"]
},
createContent: function() {
// In this use case, a Fragment must only have one single root control.
// The root control can contain several controls in turn.
return Fragment.load({...});
}
});
});