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 等等來標識。

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

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

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

本步驟介紹的大部分內容，其實在本教程前一步驟 [SAP UI5 初學者教程之五：檢視控制器初探](https://jerry.blog.csdn.net/article/details/120669241)已經涉及到了。

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

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

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

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

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

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

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

本步驟的完整原始碼：

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

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

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

* index.html
* App.view.xml
* index.js

App.controller.js 的關鍵點：

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

關於這些關鍵點的詳細介紹，請參考我的文章：[SAP UI5 初學者教程之六 - 瞭解 SAP UI5 的模組(Module)概念](https://jerry.blog.csdn.net/article/details/120680451)。

SAP UI5 初學者教程之六 - 瞭解 SAP UI5 的模組(Module)概念試讀版

相關文章