UI5_Walkthrough_Step 9: Component Configuration

一、Component 的基本概念

Component 是 UI5 应用的构建块 ，它是一个自包含、可重用、可配置的 UI5 模块。

二、Component 在 UI5 中的核心作用：

✅ 应用入口 - 应用的启动点和容器
✅ 配置中心 - 通过 manifest.json 集中管理配置
✅ 生命周期管理 - 管理初始化、运行、销毁过程
✅ 资源管理 - 管理模型、服务、路由等资源
✅ 模块化架构 - 支持组件化开发和重用
✅ 路由控制 - 管理应用导航和视图切换

Component 是现代 UI5 应用的推荐架构模式，特别适合构建复杂、可维护的企业级应用。

三、练习

新建文件夹09，直接复制ui5_Walkthrough_Step 8:Translatable Texts练习中08文件夹下除node_modules的所有内容，webapp下新建文件Component.js

如下：

Component.js代码如下：

javascript 复制代码

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("sap.ui5.walkthrough.Component", {
      metadata: {
        interfaces: ["sap.ui.core.IAsyncContentCreation"],
        rootView: {
          viewName: "sap.ui5.walkthrough.view.App",
          type: "XML",
          id: "app",
        },
      },
      init: function () {
        UIComponent.prototype.init.apply(this, arguments);

        var i18nModel = new ResourceModel({
          bundleName: "sap.ui5.walkthrough.i18n.i18n",
        });
        this.setModel(i18nModel, "i18n");
        var oBundle = this.getModel("i18n").getResourceBundle();
        var oData = {
          recipient: {
            name: oBundle.getText("inputText"),
          },
        };
        var oModel = new JSONModel(oData);
        this.setModel(oModel);
      },
    });
  }
);

自定义可重用组件

Component的实现需要导入sap ui5标准Component的实现，sap.ui.define中导入 "sap/ui/core/UIComponent"导入标准的Component的实现， function回调函数中传入UIComponent便可在回调函数中使用，UIComponent.extend的方法返回自定义的Component，UIComponent.extend方法的第一个传入参数sap.ui5.walkthrough.Component中sap.ui5.walkthrough为命名空间，Component即为webapp下的Component.js，第二个传入参数是一个json对象，包含metadata和init两部分

metadata定义Component的元数据

rootView的值，当Component.js被解析时，告诉ui5框架启动时首先加载和显示的主视图，即webapp下的App.view.xml

init: function ()执行组件初始化

✅ 组件初始化的入口点 - 组件创建后第一个执行的方法

✅ 设置应用状态 - 初始化模型、服务、配置

✅ 准备运行环境 - 设置路由、事件监听、全局对象

✅ 调用父类初始化 - 确保框架基础功能正常

✅ 错误处理 - 捕获和处理初始化阶段的错误

✅ 异步准备 - 处理需要异步加载的资源

UIComponent.prototype.init.apply(this, arguments);父类初始化

其余部分与step_8中08\webapp\controller\App.controller.js中一致，直接移动过来，包括标准依赖的导入

"sap/ui/model/json/JSONModel",

"sap/ui/model/resource/ResourceModel",

interfaces: ["sap.ui.core.IAsyncContentCreation"] 是启用 UI5 组件的异步内容创建模式的声明

作用：

✅ 性能优化 - 提升应用启动速度

✅ 非阻塞UI - 避免初始化时界面卡顿

✅ 更好的响应性 - 用户能更快与界面交互

✅ 现代架构 - 符合现代Web应用的最佳实践

09\webapp\controller\App.controller.js

javascript 复制代码

sap.ui.define(
  ["sap/ui/core/mvc/Controller", "sap/m/MessageToast"],
  function (Controller, MessageToast) {
    "use strict";
    return Controller.extend("sap.ui5.walkthrough.controller.App", {
      onPress: function () {
        var sRecipient = this.getView()
          .getModel()
          .getProperty("/recipient/name");
        var oBundle = this.getView().getModel("i18n").getResourceBundle();
        var sMsg = oBundle.getText("Msg", [sRecipient]);
        MessageToast.show(sMsg);
      },
    });
  }
);

index.js

javascript 复制代码

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

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

同Step_8相比，之前在index.js文件中，会直接调用XMLView.create方法实现xml视图

此练习中在Component.js中metadata部分已维护根视图rootView，这里通过创建组件实例的方式实现xml视图，这里组件容器加载的是sap.ui5.walkthrough命名空间下Component.js文件

运行结果同step_8