SAPUI5 View Controller lifecycle methods

Create an Application Project for SAPUI5

開啟 Eclipse 並轉到選單選項，檔案 -> 新建 -> 其他...。 在 New 視窗中，開啟節點 SAPUI5 Application Development 並選擇 Application Project 選項。 單擊下一步按鈕。

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

在下一個視窗中，為檢視提供一個名稱。 我們稱其為主要的。 選擇開發正規化作為 JavaScript。 這將在 JavaScript 中建立一個檢視。 單擊完成按鈕。

建立好的 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 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 瀏覽器）並開啟開發者工具：

然後在瀏覽器中開啟如下網址 http://localhost:8088/UI5LifecycleDemo/index.html
請根據您的伺服器配置使用埠號。

載入 index.html 將在開發者工具控制檯中列印日誌。 可以看到首先呼叫檢視的createContent()方法，然後是onInit()、onBeforeRendering()，最後是控制器的onAfterRendering()方法。 這些方法的目的在它們上面的註釋中有很好的記錄。 因此，我不詳細討論它們的目的。

現在，單擊退出並終止控制器按鈕。這將呼叫檢視上的 destroy() 方法。destroy() 方法清除與檢視及其子元素關聯的所有資源。因此，與檢視關聯的控制器也被銷燬，因此它的 onExit() 方法被呼叫。

更多Jerry的原創文章，盡在："汪子熙":