Jerry 從 2014 年加入 SAP成都研究院 CRM Fiori 開發團隊之後開始接觸 SAP UI5，曾經在 SAP 社群和“汪子熙”微信公眾號上發表過多篇關於 SAP UI5 工作原理和原始碼解析的文章。

在 Jerry 這篇文章[對 SAP UI5 一無所知的新手，從哪些材料開始學習比較好？](https://blog.csdn.net/i042416/article/details/116347763) 曾經提到，Jerry 也是從 SAP UI5 菜鳥一路走過來，深知只有 ABAP 開發背景的開發者，向 SAP UI5 開發領域轉型的不易，因此我在業餘時間設計了這份適合 SAP UI5 初學者的學習教程，把開發一個完整的 SAP UI5 應用的流程，拆分成若干個步驟，力求每個步驟裡，把涉及到的知識點都涵蓋到。這些知識點可能不像我的 UI5 原始碼分析系列文章那麼深入，但力求淺顯易懂，便於 SAP UI5 初學者理解。

本教程每一個步驟的原始碼，都存放在我的 [Github](https://github.com/wangzixi-diablo/ui5-tutorial) 上，分別用資料夾 01，02，03 等等來標識。

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

每一個步驟均是前一步驟的基礎上，新增了若干新特性。建議零基礎或者對 SAP UI5 知之甚少的初學者，按照順序從第一個步驟開始循序漸進地學習，把這些程式碼下載到本地，配合教程的文字講解，自己動手，以加深理解。

大家如果對教程的每個步驟有任何疑問，歡迎在教程對應的步驟文章裡給我評論，進行留言。

本教程的前一個步驟也就是第四個步驟，我們瞭解了 SAP UI5 XML 檢視的使用方法。在該步驟裡，我們在 XML 檢視裡宣告瞭一個 Text 控制元件例項，該控制元件位於 sap.m 這個名稱空間內。

本步驟會繼續接觸 SAP UI5 MVC 框架中三大基石的另一塊：C - Controller，即控制器。

先看看本步驟完成之後，我們得到的 SAP UI5 應用能實現一個什麼樣的效果。

訪問如下 url：

http://localhost:8080/webapp/index.html

能看到一個 Say Hello 的按鈕：

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

點選之後，看到一個 Hello World 的對話方塊：

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

這也是我們學習 SAP UI5 開發的場景裡，第一次響應使用者的互動操作。點選按鈕後的事件處理邏輯，就編寫在我們本步驟要學習的檢視控制器內部。

本步驟的全部原始碼，照例在我的 Github 上提供下載：

https://github.com/wangzixi-diablo/ui5-tutorial/tree/main/05

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

下面是具體的實現步驟。

# index.html

這個檔案和前兩個步驟的實現相比沒有任何變化，請參閱本教程前一步驟的介紹：[SAP UI5 初學者教程之三：開始接觸第一個 SAP UI5 控制元件](https://jerry.blog.csdn.net/article/details/120619615)

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

上圖第13行 data-sap-ui-oninit 屬性，指定了 SAP UI5 框架初始化完成之後，執行我們自定義的名為 index 的 module. 這個用法，在我們教程的第二個步驟有詳細介紹：

[SAP UI5 初學者教程之二：SAP UI5 的引導過程 Bootstrap](https://jerry.blog.csdn.net/article/details/120614665)
 
# index.js

本 module 的實現程式碼和前一步驟相比也沒有任何變化。
下圖第6行程式碼，我們新建一個名為 App 的 XML 檢視，再透過第8行的 placeAt 程式碼，將其放置到 id 為 content 的佔位符 div 標籤內。

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

關於 XMLView.create 的方法詳解，請參考本教程前一步驟的文章：[SAP UI5 初學者教程之四：XML 檢視初探](https://jerry.blog.csdn.net/article/details/120642096)

餘下的關鍵點介紹，請參考我的文章：[SAP UI5 初學者教程之五：檢視控制器初探](https://jerry.blog.csdn.net/article/details/120669241)。

SAP UI5 初學者教程之五：檢視控制器初探試讀版

相關文章

SAP UI5 初學者教程之五：檢視控制器初探 試讀版

相關文章

SAP UI5 初學者教程之五：檢視控制器初探試讀版