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

## 教程目錄

* [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)

## 說明

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 知之甚少的初學者，按照順序從第一個步驟開始循序漸進地學習，把這些程式碼下載到本地，配合教程的文字講解，自己動手，以加深理解。

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

本教程前面的第 24 步驟，我們學習了 SAP UI5 OData 模型的基本使用方法：

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

SAP UI5 + OData 模型這對技術組合，幾乎是 SAP 很多產品比如 SAP S/4HANA Fiori 應用裡的技術標配，所以從本步驟開始，我們繼續深入學習 OData 資料模型的使用。

出於簡單起見，我並沒有開發一個真實的 OData 服務部署在遠端，而是沿用了本教程第 26 個步驟介紹的 OData Mock 伺服器，在 SAP UI5 應用裡啟動一個 Mock 伺服器。當 SAP UI5 應用啟動，向配置好的 OData 服務 endpoint 發起請求時，這個本地 Mock 伺服器會攔截該請求，並將本地準備好的 OData 資料響應返回給 SAP UI5 應用。

對於 SAP UI5 應用本身，它對這些細節一無所知，無法分辨自己接收到的資料，到底是從遠端真實的 OData 伺服器上返回的，還是來自本地 Mock 伺服器的響應結果。

關於 OData Mock 伺服器的更多介紹，請複習本教程之前的步驟。

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

同 SAP OData V2 版本的模型相比，OData V4 對 API 層面進行了精簡(`simplification`)和清理(`cleanup`)，讓其更便於使用。關於 OData V2 和 V4 的詳細差異，請參閱 SAP [官網](https://sapui5.hana.ondemand.com/#/topic/abd4d7c7548d4c29ab8364d3904a6d74.html)。

本步驟完成之後，效果如下：

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

[下面](https://jerry.blog.csdn.net/article/details/123928235)是具體的步驟。

SAP UI5 應用開發教程之六十二 - 基於 OData V4 的 SAP UI5 表格控制元件使用方法介紹

相關文章