一套适合 SAP UI5 初學者循序漸進的學習教程
教程目錄
SAP UI5 本地開發環境的搭建
SAP UI5 初學者教程之一:Hello World
SAP UI5 初學者教程之二:SAP UI5 的引導過程 Bootstrap
SAP UI5 初學者教程之三:開始接觸第一個 SAP UI5 控件
SAP UI5 初學者教程之四:XML 視圖初探
SAP UI5 初學者教程之五:視圖控制器初探
SAP UI5 初學者教程之六 - 了解 SAP UI5 的子產品(Module)概念
SAP UI5 初學者教程之七 - JSON 模型初探
SAP UI5 初學者教程之八 - 多語言的支援
SAP UI5 初學者教程之九 - 建立第一個 Component
SAP UI5 初學者教程之十 - 什麼是 SAP UI5 應用的描述符 Descriptor
SAP UI5 初學者教程之十一 :SAP UI5 容器類控件 Page 和 Panel
SAP UI5 初學者教程之十二 - 使用 CSS 類對 UI 進行進一步美化
SAP UI5 初學者教程之十三 - 如何添加自定義 CSS 類
說明
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 等等來辨別。
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLicmbw5CNwYjZzIDZwEWNzcDM0UWYiFmY0EjYwUmZjNmZxImZ28CX5d2bs92Yl1iclB3bsVmdlR2LcNWaw9CXt92Yu4GZjlGbh5yYjV3Lc9CX6MHc0RHaiojIsJye.png)
每一個步驟均是前一步驟的基礎上,添加了若幹新特性。建議零基礎或者對 SAP UI5 知之甚少的初學者,按照順序從第一個步驟開始循序漸進地學習,把這些代碼下載下傳到本地,配合教程的文字講解,自己動手,以加深了解。
大家如果對教程的每個步驟有任何疑問,歡迎在教程對應的步驟文章裡給我評論,進行留言。
本教程的上一篇文章:SAP UI5 初學者教程之十二 - 使用 CSS 類對 UI 進行進一步美化,我們介紹了如何使用 SAP UI5 标準定義的 CSS 類來美化自己的應用程式。
本文我們繼續 CSS 類這個主題,介紹如何自定義 CSS 類并施加到自己的應用程式裡。
首先看一下按照本步驟完成的 UI 效果如下:
具體的實作步驟,參考我的文章:SAP UI5 初學者教程之十三 - 如何添加自定義 CSS 類