一套適合 SAP UI5 初學者循序漸進的學習教程

教程目錄

• SAP UI5 本地開發(fā)環(huán)境的搭建

• SAP UI5 應(yīng)用開發(fā)教程之一：Hello World

• SAP UI5 應(yīng)用開發(fā)教程之二：SAP UI5 的引導過程 Bootstrap

• SAP UI5 應(yīng)用開發(fā)教程之三：開始接觸第一個 SAP UI5 控件

• SAP UI5 應(yīng)用開發(fā)教程之四：XML 視圖初探

• SAP UI5 應(yīng)用開發(fā)教程之五：視圖控制器初探

• SAP UI5 應(yīng)用開發(fā)教程之六 - 了解 SAP UI5 的模塊(Module)概念

• SAP UI5 應(yīng)用開發(fā)教程之七 - JSON 模型初探

• SAP UI5 應(yīng)用開發(fā)教程之八 - 多語言的支持

• SAP UI5 應(yīng)用開發(fā)教程之九 - 創(chuàng)建第一個 Component

• SAP UI5 應(yīng)用開發(fā)教程之十 - 什么是 SAP UI5 應(yīng)用的描述符 Descriptor

• SAP UI5 應(yīng)用開發(fā)教程之十一 ：SAP UI5 容器類控件 Page 和 Panel

• SAP UI5 應(yīng)用開發(fā)教程之十二 - 使用 CSS 類對 UI 進行進一步美化

• SAP UI5 應(yīng)用開發(fā)教程之十三 - 如何添加自定義 CSS 類

• SAP UI5 應(yīng)用開發(fā)教程之十四 - 嵌入視圖的使用方式

• SAP UI5 應(yīng)用開發(fā)教程之十五 - 對話框和 Fragments 的使用方式

• SAP UI5 應(yīng)用開發(fā)教程之十六 - 圖標 icon 的使用

• SAP UI5 應(yīng)用開發(fā)教程之十七 - 聚合綁定在 UI5 復合控件中的使用

• SAP UI5 應(yīng)用開發(fā)教程之十八 - SAP UI5 數(shù)據(jù)綁定語法里的特殊符號，以及絕對綁定和相對綁定概念詳解

• SAP UI5 應(yīng)用開發(fā)教程之十九 - SAP UI5 數(shù)據(jù)類型和復雜的數(shù)據(jù)綁定

• SAP UI5 應(yīng)用開發(fā)教程之二十 - SAP UI5 的表達式綁定用法講解

• SAP UI5 應(yīng)用開發(fā)教程之二十一 - SAP UI5 的自定義格式器 Custom Formatter

• SAP UI5 應(yīng)用開發(fā)教程之二十二 - 過濾器 filter 的開發(fā)和使用

• SAP UI5 應(yīng)用開發(fā)教程之二十三 - 列表控件的排序 Sort 和分組 Group

• SAP UI5 應(yīng)用開發(fā)教程之二十四 - 如何使用 OData 數(shù)據(jù)模型

• SAP UI5 應(yīng)用開發(fā)教程之二十五 - 使用代理服務(wù)器解決 SAP UI5 應(yīng)用訪問遠端 OData 服務(wù)的跨域問題

• SAP UI5 應(yīng)用開發(fā)教程之二十六 - OData 服務(wù)配合 Mock 服務(wù)器的使用步驟詳解

• SAP UI5 應(yīng)用開發(fā)教程之二十七 - SAP UI5 應(yīng)用的單元測試工具 QUnit 介紹

• SAP UI5 應(yīng)用開發(fā)教程之二十八 - SAP UI5 應(yīng)用的集成測試工具 OPA 介紹

• SAP UI5 應(yīng)用開發(fā)教程之二十九 - SAP UI5 的路由和導航功能介紹

• SAP UI5 應(yīng)用開發(fā)教程之三十 - SAP UI5 的路由過程中進行參數(shù)傳遞

• SAP UI5 應(yīng)用開發(fā)教程之三十一 - SAP UI5 的路由歷史和路由回退(Routing back and history)

• SAP UI5 應(yīng)用開發(fā)教程之三十二 - 如何創(chuàng)建一個自定義 SAP UI5 控件

• SAP UI5 應(yīng)用開發(fā)教程之三十三 - SAP UI5 應(yīng)用的響應(yīng)式布局特性(Responsiveness)

• SAP UI5 應(yīng)用開發(fā)教程之三十四 - SAP UI5 應(yīng)用基于設(shè)備類型的頁面適配功能(Device Adaptation)

• SAP UI5 應(yīng)用開發(fā)教程之三十五 - 如何把本地開發(fā)的 SAP UI5 應(yīng)用部署到 ABAP 服務(wù)器上

• SAP UI5 應(yīng)用開發(fā)教程之三十六 - 使用 Chrome 開發(fā)者工具 Elements 標簽動態(tài)修改 CSS 類

• SAP UI5 應(yīng)用開發(fā)教程之三十七 - 使用 Chrome 開發(fā)者工具 Console 面板進行元素審查

• SAP UI5 應(yīng)用開發(fā)教程之三十八 - 使用 Chrome 開發(fā)者工具查看程序執(zhí)行出錯時的上下文信息

• SAP UI5 應(yīng)用開發(fā)教程之三十九 - SAP UI5 應(yīng)用出現(xiàn)白屏的一些常見錯誤和分析方法分享

• SAP UI5 應(yīng)用開發(fā)教程之四十 - 如何制作包含了 component-preload.js 在內(nèi)的 SAP UI5 發(fā)布版本

• SAP UI5 應(yīng)用開發(fā)教程之四十一 - Chrome 擴展 UI5 Inspector 的離線安裝和使用方法

• SAP UI5 應(yīng)用開發(fā)教程之四十二 - SAP UI5 自帶的 Diagnostics 診斷工具使用方法介紹

• SAP UI5 應(yīng)用開發(fā)教程之四十三 - SAP UI5 自帶的 Support Assistant 工具使用方法介紹

• SAP UI5 應(yīng)用開發(fā)教程之四十四 - Label 和 Input 控件文本沒有水平對齊的原因分析和解決方案

• SAP UI5 應(yīng)用開發(fā)教程之四十五 - 如何在 SAP UI5 應(yīng)用里使用 jQuery 和原生的 DOM API

• SAP UI5 應(yīng)用開發(fā)教程之四十六 - 使用 Message Manager 實現(xiàn)開箱即用的驗證(Validation)信息拋出

• SAP UI5 應(yīng)用開發(fā)教程之四十七 - 如何自定義 SAP UI5 字符串類型輸入字段的校驗邏輯

• SAP UI5 應(yīng)用開發(fā)教程之四十八 - 如何在 SAP UI5 應(yīng)用里開發(fā)條形碼掃描功能

• SAP UI5 應(yīng)用開發(fā)教程之四十九 - 如何在桌面電腦端調(diào)試運行在手機上的 SAP UI5 應(yīng)用

• SAP UI5 應(yīng)用開發(fā)教程之五十 - 如何使用 Cordova 將 SAP UI5 應(yīng)用生成一個能在 Android 手機上安裝的混合應(yīng)用

• SAP UI5 應(yīng)用開發(fā)教程之五十一 - 如何使用 Chrome 調(diào)試運行在手機上的 SAP UI5 Cordova 混合應(yīng)用

• SAP UI5 應(yīng)用開發(fā)教程之五十二 - 如何使用 SAP UI5 的標準控件結(jié)合 Cordova 插件調(diào)用手機攝像頭進行條形碼掃描

• SAP UI5 應(yīng)用開發(fā)教程之五十三 - 如何自定義 SAP UI5 數(shù)據(jù)類型(Data Type)

• SAP UI5 應(yīng)用開發(fā)教程之五十四 - 如何將本地 SAP UI5 應(yīng)用配置到本地 Fiori Launchpad 中

• SAP UI5 應(yīng)用開發(fā)教程之五十五 - 如何將本地 SAP UI5 應(yīng)用通過 Node.js Express 部署到公網(wǎng)上

• SAP UI5 應(yīng)用開發(fā)教程之五十六 - SAP UI5 樹控件(tree)的開發(fā)

• SAP UI5 應(yīng)用開發(fā)教程之五十七 - 基于 OData 注解的 Smart Field 使用方法學習

• SAP UI5 應(yīng)用開發(fā)教程之五十八 - 使用工廠方法在運行時動態(tài)創(chuàng)建不同類型的列表行項目控件

• SAP UI5 應(yīng)用開發(fā)教程之五十九 - 如何在 SAP UI5 應(yīng)用里顯示世界地圖

• SAP UI5 應(yīng)用開發(fā)教程之六十 - SAP UI5 地圖控件的一些高級用法

• SAP UI5 應(yīng)用開發(fā)教程之六十一 - 在 SAP UI5 應(yīng)用里繪制甘特圖 Gantt Chart

• SAP UI5 應(yīng)用開發(fā)教程之六十二 - 基于 OData V4 的 SAP UI5 表格控件使用方法介紹

說明

Jerry 從 2014 年加入 SAP成都研究院 CRM Fiori 開發(fā)團隊之后開始接觸 SAP UI5，曾經(jīng)在 SAP 社區(qū)和“汪子熙”微信公眾號上發(fā)表過多篇關(guān)于 SAP UI5 工作原理和源碼解析的文章。

在 Jerry 這篇文章 對 SAP UI5 一無所知的新手，從哪些材料開始學習比較好？ 曾經(jīng)提到，Jerry 也是從 SAP UI5 菜鳥一路走過來，深知只有 ABAP 開發(fā)背景的開發(fā)者，向 SAP UI5 開發(fā)領(lǐng)域轉(zhuǎn)型的不易，因此我在業(yè)余時間設(shè)計了這份適合 SAP UI5 初學者的學習教程，把開發(fā)一個完整的 SAP UI5 應(yīng)用的流程，拆分成若干個步驟，力求每個步驟里，把涉及到的知識點都涵蓋到。這些知識點可能不像我的 UI5 源碼分析系列文章那么深入，但力求淺顯易懂，便于 SAP UI5 初學者理解。

本教程每一個步驟的源代碼，都存放在我的 Github 上，分別用文件夾 01，02，03 等等來標識。

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

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

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

• SAP UI5 應(yīng)用開發(fā)教程之二十四 - 如何使用 OData 數(shù)據(jù)模型

SAP UI5 + OData 模型這對技術(shù)組合，幾乎是 SAP 很多產(chǎn)品比如 SAP S/4HANA Fiori 應(yīng)用里的技術(shù)標配，所以從本步驟開始，我們繼續(xù)深入學習 OData 數(shù)據(jù)模型的使用。

出于簡單起見，我并沒有開發(fā)一個真實的 OData 服務(wù)部署在遠端，而是沿用了本教程第 26 個步驟介紹的 OData Mock 服務(wù)器，在 SAP UI5 應(yīng)用里啟動一個 Mock 服務(wù)器。當 SAP UI5 應(yīng)用啟動，向配置好的 OData 服務(wù) endpoint 發(fā)起請求時，這個本地 Mock 服務(wù)器會攔截該請求，并將本地準備好的 OData 數(shù)據(jù)響應(yīng)返回給 SAP UI5 應(yīng)用。

對于 SAP UI5 應(yīng)用本身，它對這些細節(jié)一無所知，無法分辨自己接收到的數(shù)據(jù)，到底是從遠端真實的 OData 服務(wù)器上返回的，還是來自本地 Mock 服務(wù)器的響應(yīng)結(jié)果。

關(guān)于 OData Mock 服務(wù)器的更多介紹，請復習本教程之前的步驟。

SAP UI5 應(yīng)用開發(fā)教程之二十六 - OData 服務(wù)配合 Mock 服務(wù)器的使用步驟詳解

同 SAP OData V2 版本的模型相比，OData V4 對 API 層面進行了精簡(simplification)和清理(cleanup)，讓其更便于使用。關(guān)于 OData V2 和 V4 的詳細差異，請參閱 SAP 官網(wǎng)。

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

下面是具體的步驟。

總結(jié)

以上是生活随笔為你收集整理的SAP UI5 应用开发教程之六十二 - 基于 OData V4 的 SAP UI5 表格控件使用方法介绍试读版的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。