Create an Application Project for SAPUI5
打開 Eclipse 并轉到菜單選項，檔案 -> 建立 -> 其他…。 在 New 視窗中，打開節點 SAPUI5 Application Development 并選擇 Application Project 選項。 單擊下一步按鈕.
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 浏覽器）并打開開發者工具：
現在，單擊退出并終止控制器按鈕。這将調用視圖上的 destroy() 方法。destroy() 方法清除與視圖及其子元素關聯的所有資源。是以，與視圖關聯的控制器也被銷毀，是以它的 onExit() 方法被調用。