Jerry 從 2014 年加入 SAP成都研究院 CRM Fiori 開發團隊之後開始接觸 SAP UI5，曾經在 SAP 社群和“汪子熙”微信公衆号上發表過多篇關于 SAP UI5 工作原理和源碼解析的文章。
在 Jerry 這篇文章對 SAP UI5 一無所知的新手，從哪些材料開始學習比較好？ 曾經提到，Jerry 也是從 SAP UI5 菜鳥一路走過來，深知隻有 ABAP 開發背景的開發者，向 SAP UI5 開發領域轉型的不易，是以我在業餘時間設計了這份适合 SAP UI5 初學者的學習教程，把開發一個完整的 SAP UI5 應用的流程，拆分成若幹個步驟，力求每個步驟裡，把涉及到的知識點都涵蓋到。這些知識點可能不像我的 UI5 源碼分析系列文章那麼深入，但力求淺顯易懂，便于 SAP UI5 初學者了解。
本教程每一個步驟的源代碼，都存放在我的 Github 上，分别用檔案夾 01，02，03 等等來辨別。
每一個步驟均是前一步驟的基礎上，添加了若幹新特性。建議零基礎或者對 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 的按鈕：
點選之後，看到一個 Hello World 的對話框：
這也是我們學習 SAP UI5 開發的場景裡，第一次響應使用者的互動操作。點選按鈕後的事件處理邏輯，就編寫在我們本步驟要學習的視圖控制器内部。
本步驟的全部源代碼，照例在我的 Github 上提供下載下傳：
https://github.com/wangzixi-diablo/ui5-tutorial/tree/main/05 下面是具體的實作步驟。
index.html
這個檔案和前兩個步驟的實作相比沒有任何變化，請參閱本教程前一步驟的介紹：SAP UI5 初學者教程之三：開始接觸第一個 SAP UI5 控件
上圖第13行 data-sap-ui-oninit 屬性，指定了 SAP UI5 架構初始化完成之後，執行我們自定義的名為 index 的 module. 這個用法，在我們教程的第二個步驟有詳細介紹：
SAP UI5 初學者教程之二：SAP UI5 的引導過程 Bootstrap
index.js
本 module 的實作代碼和前一步驟相比也沒有任何變化。
下圖第6行代碼，我們建立一個名為 App 的 XML 視圖，再通過第8行的 placeAt 代碼，将其放置到 id 為 content 的占位符 div 标簽内。
關于 XMLView.create 的方法詳解，請參考本教程前一步驟的文章：SAP UI5 初學者教程之四：XML 視圖初探
餘下的關鍵點介紹，請參考我的文章：SAP UI5 初學者教程之五：視圖控制器初探。