# [一套適合 SAP UI5 初學者循序漸進的學習教程](https://blog.csdn.net/i042416/category_11395500.html)

## 作者簡介

Jerry Wang，2007 年從電子科技大學計算機專業碩士畢業後加入 SAP 成都研究院工作至今。Jerry 是 SAP 社群導師，SAP 中國技術大使。在長達 15 年的 SAP 標準產品開發生涯裡，Jerry 曾經先後參與 SAP Business ByDesign, SAP CRM, SAP Cloud for Customer, SAP S/4HANA, SAP Commerce Cloud(電商雲)等標準產品的研發工作。

Jerry 工作中使用 ABAP, Java, JavaScript 和 TypeScript 進行開發, 對包括 SAP UI5 在內的多款 SAP 自研框架有深入的研究。

## 教程目錄

* [SAP UI5 本地開發環境的搭建](https://jerry.blog.csdn.net/article/details/120611706)

* [SAP UI5 應用開發教程之一：Hello World](https://jerry.blog.csdn.net/article/details/120612455)

* [SAP UI5 應用開發教程之二：SAP UI5 的引導過程 Bootstrap](https://jerry.blog.csdn.net/article/details/120614665)

* [SAP UI5 應用開發教程之三：開始接觸第一個 SAP UI5 控制元件](https://jerry.blog.csdn.net/article/details/120619615)

* [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 的模組(Module)概念](https://jerry.blog.csdn.net/article/details/120680451)

* [SAP UI5 應用開發教程之七 - JSON 模型初探](https://jerry.blog.csdn.net/article/details/120693394)

* [SAP UI5 應用開發教程之八 - 多語言的支援](https://jerry.blog.csdn.net/article/details/121039416)

* [SAP UI5 應用開發教程之九 - 建立第一個 Component](https://jerry.blog.csdn.net/article/details/121042479)

* [SAP UI5 應用開發教程之十 - 什麼是 SAP UI5 應用的描述符 Descriptor](https://jerry.blog.csdn.net/article/details/121049973)

* [SAP UI5 應用開發教程之十一 ：SAP UI5 容器類控制元件 Page 和 Panel](https://jerry.blog.csdn.net/article/details/121060759)

* [SAP UI5 應用開發教程之十二 - 使用 CSS 類對 UI 進行進一步美化](https://jerry.blog.csdn.net/article/details/121063066)

* [SAP UI5 應用開發教程之十三 - 如何新增自定義 CSS 類](https://jerry.blog.csdn.net/article/details/121180115)

* [SAP UI5 應用開發教程之十四 - 嵌入檢視的使用方式](https://jerry.blog.csdn.net/article/details/122420230)

* [SAP UI5 應用開發教程之十五 - 對話方塊和 Fragments 的使用方式](https://blog.csdn.net/i042416/article/details/122450382)

* [SAP UI5 應用開發教程之十六 - 圖示 icon 的使用](https://jerry.blog.csdn.net/article/details/122453835)

* [SAP UI5 應用開發教程之十七 - 聚合繫結在 UI5 複合控制元件中的使用](https://blog.csdn.net/i042416/article/details/122458023)

* [SAP UI5 應用開發教程之十八 - SAP UI5 資料繫結語法裡的特殊符號，以及絕對繫結和相對繫結概念詳解](https://jerry.blog.csdn.net/article/details/122691944)

* [SAP UI5 應用開發教程之十九 - SAP UI5 資料型別和複雜的資料繫結](https://jerry.blog.csdn.net/article/details/122709248)

* [SAP UI5 應用開發教程之二十 - SAP UI5 的表示式繫結用法講解](https://jerry.blog.csdn.net/article/details/122719005)

* [SAP UI5 應用開發教程之二十一 - SAP UI5 的自定義格式器 Custom Formatter](https://jerry.blog.csdn.net/article/details/122727543)

* [SAP UI5 應用開發教程之二十二 - 過濾器 filter 的開發和使用](https://jerry.blog.csdn.net/article/details/122733097)

* [SAP UI5 應用開發教程之二十三 - 列表控制元件的排序 Sort 和分組 Group](https://jerry.blog.csdn.net/article/details/122736505)

* [SAP UI5 應用開發教程之二十四 - 如何使用 OData 資料模型](https://jerry.blog.csdn.net/article/details/122750501)

* [SAP UI5 應用開發教程之二十五 - 使用代理伺服器解決 SAP UI5 應用訪問遠端 OData 服務的跨域問題](https://jerry.blog.csdn.net/article/details/122766435)

* [SAP UI5 應用開發教程之二十六 - OData 服務配合 Mock 伺服器的使用步驟詳解](https://jerry.blog.csdn.net/article/details/122770273)

* [SAP UI5 應用開發教程之二十七 - SAP UI5 應用的單元測試工具 QUnit 介紹](https://jerry.blog.csdn.net/article/details/122774349)

* [SAP UI5 應用開發教程之二十八 - SAP UI5 應用的整合測試工具 OPA 介紹](https://jerry.blog.csdn.net/article/details/122777665)

* [SAP UI5 應用開發教程之二十九 - SAP UI5 的路由和導航功能介紹](https://jerry.blog.csdn.net/article/details/122782266)

* [SAP UI5 應用開發教程之三十 - SAP UI5 的路由過程中進行引數傳遞](https://jerry.blog.csdn.net/article/details/122782834)

* [SAP UI5 應用開發教程之三十一 - SAP UI5 的路由歷史和路由回退(Routing back and history)](https://jerry.blog.csdn.net/article/details/122784284)

* [SAP UI5 應用開發教程之三十二 - 如何建立一個自定義 SAP UI5 控制元件](https://jerry.blog.csdn.net/article/details/122789898)

* [SAP UI5 應用開發教程之三十三 - SAP UI5 應用的響應式佈局特性(Responsiveness)](https://jerry.blog.csdn.net/article/details/122792549)

* [SAP UI5 應用開發教程之三十四 - SAP UI5 應用基於裝置型別的頁面適配功能(Device Adaptation)](https://jerry.blog.csdn.net/article/details/122799506)

* [SAP UI5 應用開發教程之三十五 - 如何把本地開發的 SAP UI5 應用部署到 ABAP 伺服器上](https://jerry.blog.csdn.net/article/details/122828129)

* [SAP UI5 應用開發教程之三十六 - 使用 Chrome 開發者工具 Elements 標籤動態修改 CSS 類](https://jerry.blog.csdn.net/article/details/122973315)

* [SAP UI5 應用開發教程之三十七 - 使用 Chrome 開發者工具 Console 皮膚進行元素審查](https://blog.csdn.net/i042416/article/details/122997824)

* [SAP UI5 應用開發教程之三十八 - 使用 Chrome 開發者工具檢視程式執行出錯時的上下文資訊](https://jerry.blog.csdn.net/article/details/122999869)

* [SAP UI5 應用開發教程之三十九 - SAP UI5 應用出現白屏的一些常見錯誤和分析方法分享](https://jerry.blog.csdn.net/article/details/123024694)

* [SAP UI5 應用開發教程之四十 - 如何製作包含了 component-preload.js 在內的 SAP UI5 釋出版本](https://jerry.blog.csdn.net/article/details/123071595)

* [SAP UI5 應用開發教程之四十一 - Chrome 擴充套件 UI5 Inspector 的離線安裝和使用方法](https://jerry.blog.csdn.net/article/details/123077473)

* [SAP UI5 應用開發教程之四十二 - SAP UI5 自帶的 Diagnostics 診斷工具使用方法介紹](https://jerry.blog.csdn.net/article/details/123094151)

* [SAP UI5 應用開發教程之四十三 - SAP UI5 自帶的 Support Assistant 工具使用方法介紹](https://jerry.blog.csdn.net/article/details/123101329)

* [SAP UI5 應用開發教程之四十四 - Label 和 Input 控制元件文字沒有水平對齊的原因分析和解決方案](https://blog.csdn.net/i042416/article/details/123122839)

* [SAP UI5 應用開發教程之四十五 - 如何在 SAP UI5 應用裡使用 jQuery 和原生的 DOM API](https://jerry.blog.csdn.net/article/details/123136635)

* [SAP UI5 應用開發教程之四十六 - 使用 Message Manager 實現開箱即用的驗證(Validation)資訊丟擲](https://jerry.blog.csdn.net/article/details/123142913)

* [SAP UI5 應用開發教程之四十七 - 如何自定義 SAP UI5 字串型別輸入欄位的校驗邏輯](https://jerry.blog.csdn.net/article/details/123410743)

* [SAP UI5 應用開發教程之四十八 - 如何在 SAP UI5 應用裡開發條形碼掃描功能](https://jerry.blog.csdn.net/article/details/123420376)

* [SAP UI5 應用開發教程之四十九 - 如何在桌面電腦端除錯執行在手機上的 SAP UI5 應用](https://jerry.blog.csdn.net/article/details/123433404)

* [SAP UI5 應用開發教程之五十 - 如何使用 Cordova 將 SAP UI5 應用生成一個能在 Android 手機上安裝的混合應用](https://jerry.blog.csdn.net/article/details/123475735)

* [SAP UI5 應用開發教程之五十一 - 如何使用 Chrome 除錯執行在手機上的 SAP UI5 Cordova 混合應用](https://jerry.blog.csdn.net/article/details/123489082)

* [SAP UI5 應用開發教程之五十二 - 如何使用 SAP UI5 的標準控制元件結合 Cordova 外掛呼叫手機攝像頭進行條形碼掃描](https://blog.csdn.net/i042416/article/details/123501147)

* [SAP UI5 應用開發教程之五十三 - 如何自定義 SAP UI5 資料型別(Data Type)](https://jerry.blog.csdn.net/article/details/123684449)

* [SAP UI5 應用開發教程之五十四 - 如何將本地 SAP UI5 應用配置到本地 Fiori Launchpad 中](https://jerry.blog.csdn.net/article/details/123690190)

* [SAP UI5 應用開發教程之五十五 - 如何將本地 SAP UI5 應用透過 Node.js Express 部署到公網上](https://jerry.blog.csdn.net/article/details/123715732)

* [SAP UI5 應用開發教程之五十六 - SAP UI5 樹控制元件(tree)的開發](https://jerry.blog.csdn.net/article/details/123727571)

* [SAP UI5 應用開發教程之五十七 - 基於 OData 註解的 Smart Field 使用方法學習](https://jerry.blog.csdn.net/article/details/123739311)

* [SAP UI5 應用開發教程之五十八 - 使用工廠方法在執行時動態建立不同型別的列表行專案控制元件](https://blog.csdn.net/i042416/article/details/123886385)

* [SAP UI5 應用開發教程之五十九 - 如何在 SAP UI5 應用裡顯示世界地圖](https://blog.csdn.net/i042416/article/details/123899041)

* [SAP UI5 應用開發教程之六十 - SAP UI5 地圖控制元件的一些高階用法](https://jerry.blog.csdn.net/article/details/123905284)

* [SAP UI5 應用開發教程之六十一 - 在 SAP UI5 應用裡繪製甘特圖 Gantt Chart](https://jerry.blog.csdn.net/article/details/123918417)

* [SAP UI5 應用開發教程之六十二 - 基於 OData V4 的 SAP UI5 表格控制元件使用方法介紹](https://jerry.blog.csdn.net/article/details/123928235)

* [SAP UI5 應用開發教程之六十三 - 基於 OData V4 的本地 Mock Server 實現的深入介紹](https://jerry.blog.csdn.net/article/details/123932828)

* [SAP UI5 應用開發教程之六十四 - 基於 OData V4 的 SAP UI5 表格控制元件如何實現 filter(過濾) 和 sort(排序)功能](https://jerry.blog.csdn.net/article/details/123946231)

* [SAP UI5 應用開發教程之六十五 - 基於 OData V4 的 SAP UI5 表格控制元件如何實現建立，編輯和儲存功能](https://jerry.blog.csdn.net/article/details/123951024)

* [SAP UI5 應用開發教程之六十六 - 基於 OData V4 的 SAP UI5 表格控制元件如何實現刪除功能](https://blog.csdn.net/i042416/article/details/123965854)

* [SAP UI5 應用開發教程之六十七 - 基於 OData V4 的 SAP UI5 List-Detail(列表-明細)佈局的實現方式](https://jerry.blog.csdn.net/article/details/123969146)

* [SAP UI5 應用開發教程之六十八 - 如何實現 SAP UI5 路由失敗時顯示自定義的 NOT Found 頁面](https://jerry.blog.csdn.net/article/details/124155362)

* [SAP UI5 應用開發教程之六十九 - 如何從 SAP UI5 Not Found 頁面跳轉回到正常的應用頁面](https://jerry.blog.csdn.net/article/details/124171307)

* [SAP UI5 應用開發教程之七十 - 如何使用按鈕控制元件觸發頁面路由跳轉](https://blog.csdn.net/i042416/article/details/124318650)

* [SAP UI5 應用開發教程之七十一 - SAP UI5 頁面的巢狀路由](https://jerry.blog.csdn.net/article/details/124340688)

* [SAP UI5 應用開發教程之七十二 - SAP UI5 頁面路由的動畫效果設定](https://blog.csdn.net/i042416/article/details/124361471)

* [SAP UI5 應用開發教程之七十三 - 使用自定義 Query 實現 SAP UI5 頁面路由的書籤功能](https://blog.csdn.net/i042416/article/details/124372674)

* [SAP UI5 應用開發教程之七十四 - SAP UI5 應用使用 OData V4 顯示 Table 表格資料的一個陷阱](https://blog.csdn.net/i042416/article/details/124458638)

* [SAP UI5 應用開發教程之七十五 - 如何採用SAP UI5 主從表格的聯動技術顯示覆雜表格內容](https://blog.csdn.net/i042416/article/details/124501745)

* [SAP UI5 應用開發教程之七十六 - 如何實現 SAP UI5 的 Lazy Loading(延遲載入，懶載入)](https://blog.csdn.net/i042416/article/details/124545027)

* [SAP UI5 應用開發教程之七十七 - SAP UI5 動態頁面路由的高階用法：路由記錄 routes 和 target 的一對多關係](https://blog.csdn.net/i042416/article/details/124548400)

* [SAP UI5 應用開發教程之七十八 - 如何透過 url 保持 SAP UI5 搜尋的狀態，讓其支援書籤功能](https://blog.csdn.net/i042416/article/details/124554155)

* [SAP UI5 應用開發教程之七十九 - 採用測試驅動開發理念(Test Driven Development)進行 SAP UI5 應用的功能開發(一)](https://blog.csdn.net/i042416/article/details/124563162)

* [SAP UI5 應用開發教程之八十 - 採用測試驅動開發理念(Test Driven Development)進行 SAP UI5 應用的功能開發(二)](https://blog.csdn.net/i042416/article/details/124567472)

* [SAP UI5 應用開發教程之八十一 - 採用 OPA5 進行 SAP UI5 整合測試(Integration Test)的一個例子](https://blog.csdn.net/i042416/article/details/124584580)

* [SAP UI5 應用開發教程之八十二 - 採用 OPA5 開發支援頁面跳轉的 SAP UI5 整合測試用例](https://jerry.blog.csdn.net/article/details/124624593)

* [SAP UI5 應用開發教程之八十三 - SAP UI5 的自動化測試套件頁面的開發步驟介紹](https://blog.csdn.net/i042416/article/details/124643848)

* [SAP UI5 應用開發教程之八十四 - 如何指定 SAP UI5 應用程式基於某個特定的版本執行](https://blog.csdn.net/i042416/article/details/124698789)

* [SAP UI5 應用開發教程之八十五 - 如何用 OPA5 編寫測試用例來測試使用者輸入文字的功能](https://blog.csdn.net/i042416/article/details/124709547)

* [SAP UI5 應用開發教程之八十六 - 動手開發一個最簡單的本地 Mock 資料伺服器](https://jerry.blog.csdn.net/article/details/124715670)

## 說明

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 等等來標識，例如步驟 1 的原始碼在[這裡](https://github.com/wangzixi-diablo/ui5-tutorial/tree/main/01)。

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

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

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

本教程的第 26 和第 63 步驟，我們分別接觸了 Mock 伺服器的本地配置和使用步驟，以及對適用於 OData V4 的 Mock 伺服器的實現原始碼，進行了一些探索工作。

* [SAP UI5 應用開發教程之二十六 - OData 服務配合 Mock 伺服器的使用步驟詳解](https://jerry.blog.csdn.net/article/details/122770273)

* [SAP UI5 應用開發教程之六十三 - 基於 OData V4 的本地 Mock Server 實現的深入介紹](https://jerry.blog.csdn.net/article/details/123932828)

從本步驟開始，我們對之前學到的知識進行復習，同時介紹如何對 Mock 伺服器進行定製開發，以滿足我們專案中一些特殊需求的辦法。

本地 Mock 伺服器在開發過程中帶來的便利不言而喻。在現實專案中的 SAP UI5 應用，通常都需要連線後臺的 OData 服務，從而顯示伺服器端的業務資料。在後臺 OData 服務尚且處於開發狀態時，負責前端開發的 SAP UI5 開發者，可以將自己的 SAP UI5 應用直接連線到 Mock 伺服器，從而解除與後臺 OData 服務的依賴關係——即使沒有網路連線，也不影響 SAP UI5 的前臺開發。這樣能夠真正做到前後臺開發完全並行。

之前的步驟已經介紹過，SAP UI5 應用的 MVC，即模型層，檢視層和控制器層，都是完全感知不到 Mock 伺服器的執行。SAP UI5 應用像往常一樣，向 manifest.json 檔案裡配置的 OData url 發起請求。如果本地執行了 Mock 伺服器，SAP UI5 發起的這些 OData 請求，會被 Mock 伺服器`自動攔截`，並將早已準備好的測試資料(內容通常來自本地專案的檔案，比如 metadata.xml 或者是 json 資料檔案等等) 返回給 SAP UI5 應用。SAP UI5 應用的控制器和 XML 檢視對這個攔截行為一無所知，只是簡單地將請求的響應顯示在 UI 上。

訪問如下 url：

http://localhost:8080/webapp/test/mockServer.html

能看到表格控制元件裡顯示了下列五條資料：

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

具體的實現步驟[如下](https://jerry.blog.csdn.net/article/details/124715670)。

SAP UI5 應用開發教程之八十六 - 動手開發一個最簡單的本地 Mock 資料伺服器試讀版

相關文章