天天看點

SAP UI5 初學者教程之十二 - 使用 CSS 類對 UI 進行進一步美化試讀版

教程目錄

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 進行進一步美化

說明

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 等等來辨別。

SAP UI5 初學者教程之十二 - 使用 CSS 類對 UI 進行進一步美化試讀版

可以看到 Say Hello 這個按鈕和它右邊的 Input 控件,中間沒有任何間隙,看起來不甚美觀。

經過本步驟美化後的效果:

SAP UI5 初學者教程之十二 - 使用 CSS 類對 UI 進行進一步美化試讀版

具體實作步驟,參考我的文章:SAP UI5 初學者教程之十二 - 使用 CSS 類對 UI 進行進一步美化