步骤9:Components组件配置

1.练习效果

步骤9:Components组件配置 - 第1张  | 优通SAP

在前面的MVC练习中,我们把程序中用的的很我全局变量参考,基础设置值都都写在MVC的文件中的,其实SAPUI5,是可以把这些东西配置封装到Component.js文件中的,每当我们访问资源时,我们现在都将相对于组件(而不是相对于组件)进行操作。这种架构上的变化使我们的应用程序可以在比静态应用程序更灵活的环境中使用index.html 页面,例如SAP Fiori启动板之类的周围容器中。

2.源码

您可以在演练-步骤9中查看和下载所有文件。

程序目录结构如图,

步骤9:Components组件配置 - 第2张  | 优通SAP

webapp / Component.js(新)

我们创建 Component.js 文件在 WEBAPP文件夹下,将保存我们的应用程序设置。实例化组件时,组件的初始化函数由SAPUI5自动调用。我们的组件继承自基类 sap.ui.core.UIComponent 并且必须对  init 基类在重写,

所以得新改写为如下:

webapp/Component.js

现在Component.js 文件现在由两部分组成:新 metadata 该部分仅定义了对根视图的引用以及先前介绍的内容。 init初始化组件时调用的函数。而不是直接在根目录中显示根视图index.html 就像我们之前所做的那样,该组件现在将管理应用程序视图的显示。

init 函数里,我们实例化数据模型, i18n模型,就像我们之前在应用程序控制器中所做的一样 请注意,模型是直接在组件上设置的,而不是在组件的根视图上设置的。但是,由于嵌套控件会自动从其父控件继承模型,因此模型也将在视图中可用。

webapp/controller/App.controller.js

在这里,删除 onInit功能和所需的模块;该操作已在前面的component.js中完成。

webapp\index.js

从这个APP中,创建一个组件容器,而不是在我们的视图 index.js 中实现视图的实例化,而是根据组件配置来实例化视图。

3.约定

  • 该组件名为 Component.js.
  • 连同该应用程序的所有UI文件一起,该组件位于 WEBAPP文件夹下。
  •  index.html 文件位于webapp 文件夹下,是主文件。

留下一个回复

你的email不会被公开。

nine − 6 =