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 初學者教程之五：檢視控制器初探已經涉及到了。

下圖是本教程第五步驟裡控制器的實現原始碼，其中我們使用第一行的 sap.ui.define, 非同步載入 SAP UI5 標準的控制器實現模組，即第二行的 sap/ui/core/mvc/Controller.

前一步驟我們點選 Button 控制元件，彈出的對話方塊採取瀏覽器原生的 alert API 實現。

本步驟我們更進一步，將彈出對話方塊採取 SAP UI5 的 Toast 控制元件實現。為此，我們需要非同步載入 Toast 控制元件的實現模組。

先看本步驟的 SAP UI5 應用實現效果：

點選了 Say Hello 按鈕後，我們可以在螢幕底部看到一個通過 SAP UI5 Toast 控制元件顯示的 Hello World，而不是前一步驟通過 alert 顯示的對話方塊。

本步驟的完整原始碼：

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

同前一步驟相比，本步驟除了 App.controller.js 之外，下列檔案均未發生變化：

• index.html
• App.view.xml
• index.js

App.controller.js 的關鍵點：

關於這些關鍵點的詳細介紹，請參考我的文章：SAP UI5 初學者教程之六 - 瞭解 SAP UI5 的模組(Module)概念。