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

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

SAPUI5 View Controller lifecycle methods


Create an Application Project for SAPUI5

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


image.png


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


image.png


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


image.png


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

image.png


Write View Logic

main.view.js 的内容:

sap.ui.jsview("ui5lifecycledemo.main", {
  /** Specifies the Controller belonging to this View. 
  * In the case that it is not implemented, or that "null" is returned,
        * this View does not have a Controller.
  * @memberOf ui5lifecycledemo.main
  */ 
  getControllerName : function() {
    return "ui5lifecycledemo.main";
  },
  /** Is initially called once after the Controller has been instantiated. 
        * It is the place where the UI is constructed. 
  * Since the Controller is given to this method, its event handlers can 
        * be attached right away. 
  * @memberOf ui5lifecycledemo.main
  */ 
  createContent : function(oController) {
    console.log("createContent() of main view called...");
    // Create a Panel object 
    var mainPanel = new sap.ui.commons.Panel("mainPanel");
    // Create a Button object
    var exitButton = new sap.ui.commons.Button({
      id : "exitButton", // sap.ui.core.ID
      text : 'Exit and kill controller', // string
      press : [ function(oEvent) {
        // Commit suicide
        this.destroy();
        // Let the world know about it
        alert("View and Controller destroyed...");
      }, this ]
    });
    // Add the button to the main panel
    mainPanel.addContent(exitButton);
    return mainPanel;   
  }
});

Write Controller Logic

打开 main.controller.js 文件。 取消所有钩子方法的注释; 控制器的 onInit、onBeforeRendering、onAfterRendering 和 onExit 并将以下代码写入所有方法的主体中。

sap.ui.controller("ui5lifecycledemo.main", {
/**
* Called when a controller is instantiated and its View controls (if available) 
* are already created.
* Can be used to modify the View before it is displayed, to bind event handlers 
* and do other one-time initialization.
* @memberOf ui5lifecycledemo.main
*/
  onInit: function() {
    console.log("onInit() of controller called...");
  },
/**
* Similar to onAfterRendering, but this hook is invoked before the controller's 
* View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* @memberOf ui5lifecycledemo.main
*/
  onBeforeRendering: function() {
    console.log("onBeforeRendering() of controller called...");
  },
/**
* Called when the View has been rendered (so its HTML is part of the document). 
* Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* @memberOf ui5lifecycledemo.main
*/
  onAfterRendering: function() {
    console.log("onAfterRendering() of controller called...");
  },
/**
* Called when the Controller is destroyed. Use this one to free resources 
* and finalize activities.
* @memberOf ui5lifecycledemo.main
*/
  onExit: function() {
    console.log("onExit() of controller called...");
  }
});

Deploy and Run Application

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


image.png


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

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

image.png



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

image.png



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

image.png


相关文章
|
6月前
|
人工智能 搜索推荐 Serverless
使用金庸的著作,来测试阿里通义千问最新开放的长文档处理功能
使用金庸的著作,来测试阿里通义千问最新开放的长文档处理功能
使用金庸的著作,来测试阿里通义千问最新开放的长文档处理功能
|
6月前
|
算法 API C++
【Qt UI】QT 窗口/控件置顶方法详解
【Qt UI】QT 窗口/控件置顶方法详解
439 0
|
6月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
6月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
|
6月前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
|
5月前
|
存储 开发框架 JavaScript
深入探讨Flutter中动态UI构建的原理、方法以及数据驱动视图的实现技巧
【6月更文挑战第11天】Flutter是高效的跨平台移动开发框架,以其热重载、高性能渲染和丰富组件库著称。本文探讨了Flutter中动态UI构建原理与数据驱动视图的实现。动态UI基于Widget树模型,状态变化触发UI更新。状态管理是关键,Flutter提供StatefulWidget、Provider、Redux等方式。使用ListView等可滚动组件和StreamBuilder等流式组件实现数据驱动视图的自动更新。响应式布局确保UI在不同设备上的适应性。Flutter为开发者构建动态、用户友好的界面提供了强大支持。
90 2
|
6月前
|
存储 安全 测试技术
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
|
3月前
|
前端开发 图形学
Unity精华☀️UI和物体可见性的判断方法
Unity精华☀️UI和物体可见性的判断方法
|
6月前
|
开发者 UED
SAP UI5 SmartFilterBar 中 ControlConfiguration Aggregation 的作用介绍
SAP UI5 SmartFilterBar 中 ControlConfiguration Aggregation 的作用介绍
|
6月前
|
存储 供应链 安全
SAP S4HANA 数据归档的实施方法
SAP S4HANA 数据归档的实施方法