一套適合 SAP UI5 初學(xué)者循序漸進(jìn)的學(xué)習(xí)教程

教程目錄

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

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

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

• SAP UI5 應(yīng)用開發(fā)教程之三：開始接觸第一個(gè) 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ā)教程之八 - 多語(yǔ)言的支持

• SAP UI5 應(yīng)用開發(fā)教程之九 - 創(chuàng)建第一個(gè) 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 類對(duì) UI 進(jìn)行進(jìn)一步美化

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

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

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

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

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

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

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

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

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

• SAP UI5 應(yīng)用開發(fā)教程之二十二 - 過(guò)濾器 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)用訪問(wèn)遠(yuǎn)端 OData 服務(wù)的跨域問(wèn)題

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• SAP UI5 應(yīng)用開發(fā)教程之四十一 - Chrome 擴(kuò)展 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 控件文本沒(méi)有水平對(duì)齊的原因分析和解決方案

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

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

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

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

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

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

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

說(shuō)明

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

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

本教程每一個(gè)步驟的源代碼，都存放在我的 Github 上，分別用文件夾 01，02，03 等等來(lái)標(biāo)識(shí)。

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

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

本教程的前一步驟，我們介紹了如何使用 Cordova 將已經(jīng)開發(fā)好的，能夠在 PC 端運(yùn)行的 SAP UI5 應(yīng)用，構(gòu)建并打包成 apk 文件，以便像 Android 原生應(yīng)用一樣，安裝到安卓移動(dòng)設(shè)備上運(yùn)行：

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

我們把通過(guò) SAP UI5 經(jīng)過(guò) Cordova 打包之后生成的應(yīng)用稱為 Hybrid Application 即混合應(yīng)用。

當(dāng)混合應(yīng)用運(yùn)行在移動(dòng)設(shè)備上時(shí)，如果遇到不能按照我們期望工作的情形，如何進(jìn)行調(diào)試呢？我們不需要使用重型的 Android Studio 進(jìn)行調(diào)試，這是因?yàn)槿缟蠄D所示，Cordova 混合應(yīng)用從本質(zhì)上說(shuō)，仍然是一個(gè)運(yùn)行在 HTML Rendering Engine 即 WebView 容器中的 Web 應(yīng)用，因此我們?nèi)匀豢梢圆捎帽窘坛痰?49 步驟介紹的調(diào)試方式，通過(guò) PC 端 Chrome 開發(fā)者工具連接手機(jī)上的 Cordova 混合應(yīng)用進(jìn)行調(diào)試。

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

下面是詳細(xì)的調(diào)試步驟。

我選擇了將第 48 個(gè)步驟開發(fā)完成的代碼，制作成 Cordova 應(yīng)用，試圖在手機(jī)上運(yùn)行，條用手機(jī)攝像頭 camera，進(jìn)行條形碼的掃描：

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

但是運(yùn)行這個(gè)應(yīng)用時(shí)，沒(méi)有看到期望的攝像頭掃描場(chǎng)景，而是顯示了一個(gè) 掃描器不可用的提示：

我希望通過(guò)調(diào)試的方式，找到這個(gè)行為的原因。

按照這篇教程里的步驟，將教程第 48 個(gè)步驟開發(fā)成的 SAP UI5 應(yīng)用，制作成 Cordova 應(yīng)用，通過(guò)數(shù)據(jù)線 + apk 的方式，安裝到手機(jī)上運(yùn)行。

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

下面是詳細(xì)的調(diào)試步驟和 SAP UI5 sap.ndc.BarcodeScanner 控件的工作原理分析。

總結(jié)

以上是生活随笔為你收集整理的SAP UI5 应用开发教程之五十一 - 如何使用 Chrome 调试运行在手机上的 SAP UI5 Cordova 混合应用试读版的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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