一套適合 SAP UI5 初學者循序漸進的學習教程
作者簡介
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 本地開發環境的搭建
- 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 類
- SAP UI5 應用開發教程之十四 - 嵌入檢視的使用方式
- SAP UI5 應用開發教程之十五 - 對話方塊和 Fragments 的使用方式
- SAP UI5 應用開發教程之十六 - 圖示 icon 的使用
- SAP UI5 應用開發教程之十七 - 聚合繫結在 UI5 複合控制元件中的使用
- SAP UI5 應用開發教程之十八 - SAP UI5 資料繫結語法裡的特殊符號，以及絕對繫結和相對繫結概念詳解
- SAP UI5 應用開發教程之十九 - SAP UI5 資料型別和複雜的資料繫結
- SAP UI5 應用開發教程之二十 - SAP UI5 的表示式繫結用法講解
- SAP UI5 應用開發教程之二十一 - SAP UI5 的自定義格式器 Custom Formatter
- SAP UI5 應用開發教程之二十二 - 過濾器 filter 的開發和使用
- SAP UI5 應用開發教程之二十三 - 列表控制元件的排序 Sort 和分組 Group
- SAP UI5 應用開發教程之二十四 - 如何使用 OData 資料模型
- SAP UI5 應用開發教程之二十五 - 使用代理伺服器解決 SAP UI5 應用訪問遠端 OData 服務的跨域問題
- SAP UI5 應用開發教程之二十六 - OData 服務配合 Mock 伺服器的使用步驟詳解
- SAP UI5 應用開發教程之二十七 - SAP UI5 應用的單元測試工具 QUnit 介紹
- SAP UI5 應用開發教程之二十八 - SAP UI5 應用的整合測試工具 OPA 介紹
- SAP UI5 應用開發教程之二十九 - SAP UI5 的路由和導航功能介紹
- SAP UI5 應用開發教程之三十 - SAP UI5 的路由過程中進行引數傳遞
- SAP UI5 應用開發教程之三十一 - SAP UI5 的路由歷史和路由回退(Routing back and history)
- SAP UI5 應用開發教程之三十二 - 如何建立一個自定義 SAP UI5 控制元件
- SAP UI5 應用開發教程之三十三 - SAP UI5 應用的響應式佈局特性(Responsiveness)
- SAP UI5 應用開發教程之三十四 - SAP UI5 應用基於裝置型別的頁面適配功能(Device Adaptation)
- SAP UI5 應用開發教程之三十五 - 如何把本地開發的 SAP UI5 應用部署到 ABAP 伺服器上
- SAP UI5 應用開發教程之三十六 - 使用 Chrome 開發者工具 Elements 標籤動態修改 CSS 類
- SAP UI5 應用開發教程之三十七 - 使用 Chrome 開發者工具 Console 皮膚進行元素審查
- SAP UI5 應用開發教程之三十八 - 使用 Chrome 開發者工具檢視程式執行出錯時的上下文資訊
- SAP UI5 應用開發教程之三十九 - SAP UI5 應用出現白屏的一些常見錯誤和分析方法分享
- SAP UI5 應用開發教程之四十 - 如何製作包含了 component-preload.js 在內的 SAP UI5 釋出版本
- SAP UI5 應用開發教程之四十一 - Chrome 擴充套件 UI5 Inspector 的離線安裝和使用方法
- SAP UI5 應用開發教程之四十二 - SAP UI5 自帶的 Diagnostics 診斷工具使用方法介紹
- SAP UI5 應用開發教程之四十三 - SAP UI5 自帶的 Support Assistant 工具使用方法介紹
- SAP UI5 應用開發教程之四十四 - Label 和 Input 控制元件文字沒有水平對齊的原因分析和解決方案
- SAP UI5 應用開發教程之四十五 - 如何在 SAP UI5 應用裡使用 jQuery 和原生的 DOM API
- SAP UI5 應用開發教程之四十六 - 使用 Message Manager 實現開箱即用的驗證(Validation)資訊丟擲
- SAP UI5 應用開發教程之四十七 - 如何自定義 SAP UI5 字串型別輸入欄位的校驗邏輯
- SAP UI5 應用開發教程之四十八 - 如何在 SAP UI5 應用裡開發條形碼掃描功能
- SAP UI5 應用開發教程之四十九 - 如何在桌面電腦端除錯執行在手機上的 SAP UI5 應用
- SAP UI5 應用開發教程之五十 - 如何使用 Cordova 將 SAP UI5 應用生成一個能在 Android 手機上安裝的混合應用
- SAP UI5 應用開發教程之五十一 - 如何使用 Chrome 除錯執行在手機上的 SAP UI5 Cordova 混合應用
- SAP UI5 應用開發教程之五十二 - 如何使用 SAP UI5 的標準控制元件結合 Cordova 外掛呼叫手機攝像頭進行條形碼掃描
- SAP UI5 應用開發教程之五十三 - 如何自定義 SAP UI5 資料型別(Data Type)
- SAP UI5 應用開發教程之五十四 - 如何將本地 SAP UI5 應用配置到本地 Fiori Launchpad 中
- SAP UI5 應用開發教程之五十五 - 如何將本地 SAP UI5 應用通過 Node.js Express 部署到公網上
- SAP UI5 應用開發教程之五十六 - SAP UI5 樹控制元件(tree)的開發
- SAP UI5 應用開發教程之五十七 - 基於 OData 註解的 Smart Field 使用方法學習
- SAP UI5 應用開發教程之五十八 - 使用工廠方法在執行時動態建立不同型別的列表行專案控制元件
- SAP UI5 應用開發教程之五十九 - 如何在 SAP UI5 應用裡顯示世界地圖
- SAP UI5 應用開發教程之六十 - SAP UI5 地圖控制元件的一些高階用法
- SAP UI5 應用開發教程之六十一 - 在 SAP UI5 應用裡繪製甘特圖 Gantt Chart
- SAP UI5 應用開發教程之六十二 - 基於 OData V4 的 SAP UI5 表格控制元件使用方法介紹
- SAP UI5 應用開發教程之六十三 - 基於 OData V4 的本地 Mock Server 實現的深入介紹
- SAP UI5 應用開發教程之六十四 - 基於 OData V4 的 SAP UI5 表格控制元件如何實現 filter(過濾) 和 sort(排序)功能
- SAP UI5 應用開發教程之六十五 - 基於 OData V4 的 SAP UI5 表格控制元件如何實現建立，編輯和儲存功能
- SAP UI5 應用開發教程之六十六 - 基於 OData V4 的 SAP UI5 表格控制元件如何實現刪除功能
- SAP UI5 應用開發教程之六十七 - 基於 OData V4 的 SAP UI5 List-Detail(列表-明細)佈局的實現方式
- SAP UI5 應用開發教程之六十八 - 如何實現 SAP UI5 路由失敗時顯示自定義的 NOT Found 頁面
- SAP UI5 應用開發教程之六十九 - 如何從 SAP UI5 Not Found 頁面跳轉回到正常的應用頁面
- SAP UI5 應用開發教程之七十 - 如何使用按鈕控制元件觸發頁面路由跳轉
- SAP UI5 應用開發教程之七十一 - SAP UI5 頁面的巢狀路由
- SAP UI5 應用開發教程之七十二 - SAP UI5 頁面路由的動畫效果設定
- SAP UI5 應用開發教程之七十三 - 使用自定義 Query 實現 SAP UI5 頁面路由的書籤功能
- SAP UI5 應用開發教程之七十四 - SAP UI5 應用使用 OData V4 顯示 Table 表格資料的一個陷阱
- SAP UI5 應用開發教程之七十五 - 如何採用SAP UI5 主從表格的聯動技術顯示覆雜表格內容
- SAP UI5 應用開發教程之七十六 - 如何實現 SAP UI5 的 Lazy Loading(延遲載入，懶載入)
- SAP UI5 應用開發教程之七十七 - SAP UI5 動態頁面路由的高階用法：路由記錄 routes 和 target 的一對多關係
- SAP UI5 應用開發教程之七十八 - 如何通過 url 保持 SAP UI5 搜尋的狀態，讓其支援書籤功能
- SAP UI5 應用開發教程之七十九 - 採用測試驅動開發理念(Test Driven Development)進行 SAP UI5 應用的功能開發(一)
- SAP UI5 應用開發教程之八十 - 採用測試驅動開發理念(Test Driven Development)進行 SAP UI5 應用的功能開發(二)
- SAP UI5 應用開發教程之八十一 - 採用 OPA5 進行 SAP UI5 整合測試(Integration Test)的一個例子
- SAP UI5 應用開發教程之八十二 - 採用 OPA5 開發支援頁面跳轉的 SAP UI5 整合測試用例
- SAP UI5 應用開發教程之八十三 - SAP UI5 的自動化測試套件頁面的開發步驟介紹
- SAP UI5 應用開發教程之八十四 - 如何指定 SAP UI5 應用程式基於某個特定的版本執行
- SAP UI5 應用開發教程之八十五 - 如何用 OPA5 編寫測試用例來測試使用者輸入文字的功能
- SAP UI5 應用開發教程之八十六 - 動手開發一個最簡單的本地 Mock 資料伺服器
- SAP UI5 應用開發教程之八十七 - 如何讓 SAP UI5 Mock 伺服器支援自定義 url 引數
- SAP UI5 應用開發教程之八十八 - SAP UI5 Mock 伺服器如何實現自定義 Function Import
- SAP UI5 應用開發教程之八十九 - 如何給 SAP UI5 列表控制元件增添多個圖形介面的過濾器
- SAP UI5 應用開發教程之九十 - 基於 OData V2 的 SAP UI5 List-Detail(列表-明細)佈局的實現方式
- SAP UI5 應用開發教程之九十一 - 如何使用客戶端 JSON 模型構建一個 Master-Detail-Detail 佈局中的列表頁面
- SAP UI5 應用開發教程之九十二 - 基於 SAP UI5 JSONModel 客戶端模型的列表分頁顯示(Table Pagination)前提
說明
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 等等來標識，例如步驟 1 的原始碼在這裡。
每一個步驟均是前一步驟的基礎上，新增了若干新特性。建議零基礎或者對 SAP UI5 知之甚少的初學者，按照順序從第一個步驟開始循序漸進地學習，把這些程式碼下載到本地，配合教程的文字講解，自己動手，以加深理解。
大家如果對教程的每個步驟有任何疑問，歡迎在教程對應的步驟文章裡給我評論，進行留言。
之前 Jerry 收到不少朋友的私信，詢問 SAP UI5 表格控制元件(Table Control)，如何實現分頁顯示效果。本教程就來介紹這個很多朋友都問過的常見需求。
SAP UI5 表格控制元件並不支援開銷即用的分頁顯示效果。如果 SAP UI5 列表控制元件基於 OData 這種伺服器端模型來實現，列表預設顯示 20 條資料。更多的資料，通過點選列表底部的 More 按鈕動態載入，這就是所謂的 Growing 即動態增長特性。
每次點選 More 按鈕，SAP UI5 列表控制元件都會向 OData 伺服器發起新的資料請求，前提是伺服器端的 OData 服務，實現了分頁功能(Pagination)，即通過 OData 協議的引數 $skip 和 $top, 來返回客戶端(即 SAP UI5 列表控制元件)請求的某一頁內容。
假設每頁顯示 10 條資料，則 SAP UI5 列表控制元件通過下列的 OData 請求，分別讀取每一頁的資料：
$skip=0&$top=10: 請求第一頁的資料，即伺服器上第 1 條到第 10 條資料$skip=10&$top=20: 請求第二頁的資料，即伺服器上第 11 條到第 20 條資料- 依次類推
本教程後續會介紹使用 OData 伺服器端模型的 SAP UI5 列表分頁顯示的步驟。
如果使用 JSONModel 這種客戶端模型，即列表待顯示的資料，全部位於本地(比如某個 JSON 檔案中)，則分頁顯示又該如何實現呢？
具體步驟如下。