SAPUI5 View Controller lifecycle methods

Create an Application Project for SAPUI5

打開 Eclipse 并轉到菜單選項，文件 -> 新建 -> 其他…。 在 New 窗口中，打開節(jié)點 SAPUI5 Application Development 并選擇 Application Project 選項。 單擊下一步按鈕。

為項目提供一個名稱。 我們稱之為 UI5LifecycleDemo。 選擇庫 sap.ui.commons 并選中 Create an Initial View 選項。 單擊下一步按鈕。

在下一個窗口中，為視圖提供一個名稱。 我們稱其為主要的。 選擇開發(fā)范式作為 JavaScript。 這將在 JavaScript 中創(chuàng)建一個視圖。 單擊完成按鈕。

創(chuàng)建好的 SAP UI5 項目層級結構如下：

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 objectvar exitButton = new sap.ui.commons.Button({id : "exitButton", // sap.ui.core.IDtext : 'Exit and kill controller', // stringpress : [ function(oEvent) {// Commit suicidethis.destroy();// Let the world know about italert("View and Controller destroyed...");}, this ]});// Add the button to the main panelmainPanel.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 瀏覽器）并打開開發(fā)者工具：

然后在瀏覽器中打開如下網址 http://localhost:8088/UI5LifecycleDemo/index.html
請根據(jù)您的服務器配置使用端口號。

加載 index.html 將在開發(fā)者工具控制臺中打印日志。 可以看到首先調用視圖的createContent()方法，然后是onInit()、onBeforeRendering()，最后是控制器的onAfterRendering()方法。 這些方法的目的在它們上面的注釋中有很好的記錄。 因此，我不詳細討論它們的目的。

現(xiàn)在，單擊退出并終止控制器按鈕。這將調用視圖上的 destroy() 方法。destroy() 方法清除與視圖及其子元素關聯(lián)的所有資源。因此，與視圖關聯(lián)的控制器也被銷毀，因此它的 onExit() 方法被調用。

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的SAP UI5 视图控制器 View Controller 的生命周期方法 - Lifecycle methods的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。