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

教程目錄

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• SAP UI5 應用開發(fā)教程之六十三 - 基于 OData V4 的本地 Mock Server 實現(xiàn)的深入介紹

• SAP UI5 應用開發(fā)教程之六十四 - 基于 OData V4 的 SAP UI5 表格控件如何實現(xiàn) filter(過濾) 和 sort(排序)功能

• SAP UI5 應用開發(fā)教程之六十五 - 基于 OData V4 的 SAP UI5 表格控件如何實現(xiàn)創(chuàng)建，編輯和保存功能

• SAP UI5 應用開發(fā)教程之六十六 - 基于 OData V4 的 SAP UI5 表格控件如何實現(xiàn)刪除功能

• SAP UI5 應用開發(fā)教程之六十七 - 基于 OData V4 的 SAP UI5 List-Detail(列表-明細)布局的實現(xiàn)方式

說明

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

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

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

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

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

本教程前幾個步驟，我們已經用 SAP UI5 table 控件開發(fā)了一個包含 User 列表的應用，并且已經支持了下列操作：

• 根據 LastName 字段進行查詢，以及排序的操作。

• 創(chuàng)建新的 User 數據，并能夠持久化到 Mock Server 中。

• 支持對已有 User 數據的修改和刪除。

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

• SAP UI5 應用開發(fā)教程之六十三 - 基于 OData V4 的本地 Mock Server 實現(xiàn)的深入介紹

• SAP UI5 應用開發(fā)教程之六十四 - 基于 OData V4 的 SAP UI5 表格控件如何實現(xiàn) filter(過濾) 和 sort(排序)功能

• SAP UI5 應用開發(fā)教程之六十五 - 基于 OData V4 的 SAP UI5 表格控件如何實現(xiàn)創(chuàng)建，編輯和保存功能

• SAP UI5 應用開發(fā)教程之六十六 - 基于 OData V4 的 SAP UI5 表格控件如何實現(xiàn)刪除功能

本步驟繼續(xù)在此基礎上添加新功能。點擊任意行項目之后，能看到該行項目的明細頁面，顯示在屏幕右側區(qū)域：

下面是詳細的實現(xiàn)細節(jié)。

總結

以上是生活随笔為你收集整理的SAP UI5 应用开发教程之六十七 - 基于 OData V4 的 SAP UI5 List-Detail(列表-明细)布局的实现方式试读版的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。