[SAPUI5 View Controller lifecycle methods](https://www.planetofbits.com/sap-ui5/sapui5-view-controller-lifecycle-methods/)

# Create an Application Project for SAPUI5

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

![](https://img-blog.csdnimg.cn/img_convert/d58a6c27992e0e9322238cac92ae09dd.png)

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

![](https://img-blog.csdnimg.cn/img_convert/cfa7635478136cf80ad6bda236799e22.png)

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

![](https://img-blog.csdnimg.cn/img_convert/bf664999327f50515dcae8e295d23c93.png)

建立好的 SAP UI5 專案層級結構如下：
![](https://img-blog.csdnimg.cn/img_convert/abdc517383d39feda9e28041b6e25f8c.png)

# Write View Logic

main.view.js 的內容：

```javascript
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 並將以下程式碼寫入所有方法的主體中。

```javascript
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 瀏覽器）並開啟開發者工具：

![](https://img-blog.csdnimg.cn/img_convert/a3681aca601144047cbc4009b3401da8.png)

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

![](https://img-blog.csdnimg.cn/img_convert/5fe4589443c3dd1f1992f5b558d13d06.png)

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

![](https://img-blog.csdnimg.cn/img_convert/c19b336cd4e2ab062447daec31f07675.png)

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

![](https://img-blog.csdnimg.cn/img_convert/e52c75bbf65facd08a5b69dc655c8029.png)

SAP UI5 檢視控制器 View Controller 的生命週期方法 - Lifecycle methods

相關文章