且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

SAP UI5 视图控制器 View Controller 的生命周期方法 - Lifecycle methods

更新时间:2022-09-11 16:45:09

Create an Application Project for SAPUI5

打开 Eclipse 并转到菜单选项,文件 -> 新建 -> 其他…。 在 New 窗口中,打开节点 SAPUI5 Application Development 并选择 Application Project 选项。 单击下一步按钮。


SAP UI5 视图控制器 View Controller 的生命周期方法 - Lifecycle methods


为项目提供一个名称。 我们称之为 UI5LifecycleDemo。 选择库 sap.ui.commons 并选中 Create an Initial View 选项。 单击下一步按钮。


SAP UI5 视图控制器 View Controller 的生命周期方法 - Lifecycle methods


在下一个窗口中,为视图提供一个名称。 我们称其为主要的。 选择开发范式作为 JavaScript。 这将在 JavaScript 中创建一个视图。 单击完成按钮。


SAP UI5 视图控制器 View Controller 的生命周期方法 - Lifecycle methods


创建好的 SAP UI5 项目层级结构如下:

SAP UI5 视图控制器 View Controller 的生命周期方法 - Lifecycle methods


Write View Logic

main.view.js 的内容:

SAP UI5 视图控制器 View Controller 的生命周期方法 - Lifecycle methodsSAP UI5 视图控制器 View Controller 的生命周期方法 - Lifecycle methods

Write Controller Logic

打开 main.controller.js 文件。 取消所有钩子方法的注释; 控制器的 onInit、onBeforeRendering、onAfterRendering 和 onExit 并将以下代码写入所有方法的主体中。SAP UI5 视图控制器 View Controller 的生命周期方法 - Lifecycle methodsSAP UI5 视图控制器 View Controller 的生命周期方法 - Lifecycle methods

Deploy and Run Application

启动服务器并部署应用程序。 打开一个新的浏览器窗口(本示例使用 Chrome 浏览器)并打开开发者工具:


SAP UI5 视图控制器 View Controller 的生命周期方法 - Lifecycle methods


然后在浏览器中打开如下网址 http://localhost:8088/UI5LifecycleDemo/index.html

请根据您的服务器配置使用端口号。


SAP UI5 视图控制器 View Controller 的生命周期方法 - Lifecycle methods


加载 index.html 将在开发者工具控制台中打印日志。 可以看到首先调用视图的createContent()方法,然后是onInit()、onBeforeRendering(),最后是控制器的onAfterRendering()方法。 这些方法的目的在它们上面的注释中有很好的记录。 因此,我不详细讨论它们的目的。


SAP UI5 视图控制器 View Controller 的生命周期方法 - Lifecycle methods


现在,单击退出并终止控制器按钮。这将调用视图上的 destroy() 方法。destroy() 方法清除与视图及其子元素关联的所有资源。因此,与视图关联的控制器也被销毁,因此它的 onExit() 方法被调用。

SAP UI5 视图控制器 View Controller 的生命周期方法 - Lifecycle methods


SAP UI5 视图控制器 View Controller 的生命周期方法 - Lifecycle methods