# [一套適合 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)

## 說明

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

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

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

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

在本文前一步驟 [SAP UI5 初學者教程之九 - 建立第一個 Component](https://jerry.blog.csdn.net/article/details/121042479) 裡，我們把 SAP UI5 Component 的後設資料，放在了 Component.js 的 metadata 欄位裡，如下圖所示：

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

為了將 SAP UI5 應用配置到 Fiori Launchpad 裡，我們必須遵循一些最佳實踐。除了前一步驟介紹的引入 Component.js 支援之外，我們還需引入本文將要討論的應用描述符 - Application descriptor.

所有特定於 SAP UI5 應用程式的配置設定現在將進一步放在名為 manifest.json 的單獨描述符檔案中。這種做法的好處是清楚地將應用程式編碼(coding)與配置(Configuration)分開，使我們的應用程式在應對將來可能發生的更改時靈活和從容。

# SAP UI5 應用開發最佳實踐之一

所有 SAP Fiori 應用程式的內容都實現為元件(Component)，並帶有描述符檔案 manifest.json，以便配置在 SAP Fiori Launchpad 中。

SAP Fiori Launchpad 能夠扮演 SAP UI5 應用程式容器的角色，負責例項化 SAP UI5 應用程式中的 Component 實現，而無需藉助 SAP UI5 應用中的 index.html 檔案。

SAP UI5 應用的描述符 manifest.json 檔案會被 Fiori Launchpad 解析，描述符檔案裡定義的內容會自動被載入。

manifest.json 檔案位於 webapp 目錄下，內容是一個 json 格式的配置物件，這些內容會指引 SAP UI5 框架，執行時如何載入這個描述符檔案描述的 SAP UI5 應用。

manifest.json 的內容分三大部分：

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

關於它們的逐一介紹，以及應用程式需要做哪些修改，才能支援啟用該 manifest.json 檔案，請參考我的專欄文章：[SAP UI5 初學者教程之十 - 什麼是 SAP UI5 應用的描述符 Descriptor](https://jerry.blog.csdn.net/article/details/121049973)

SAP UI5 初學者教程之十 - 什麼是 SAP UI5 應用的描述符 Descriptor 試讀版

相關文章