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

教程目錄

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

• SAP UI5 初學(xué)者教程之一：Hello World

• SAP UI5 初學(xué)者教程之二：SAP UI5 的引導(dǎo)過(guò)程 Bootstrap

• SAP UI5 初學(xué)者教程之三：開(kāi)始接觸第一個(gè) SAP UI5 控件

• SAP UI5 初學(xué)者教程之四：XML 視圖初探

• SAP UI5 初學(xué)者教程之五：視圖控制器初探

• SAP UI5 初學(xué)者教程之六 - 了解 SAP UI5 的模塊(Module)概念

• SAP UI5 初學(xué)者教程之七 - JSON 模型初探

• SAP UI5 初學(xué)者教程之八 - 多語(yǔ)言的支持

• SAP UI5 初學(xué)者教程之九 - 創(chuàng)建第一個(gè) Component

• SAP UI5 初學(xué)者教程之十 - 什么是 SAP UI5 應(yīng)用的描述符 Descriptor

• SAP UI5 初學(xué)者教程之十一 ：SAP UI5 容器類控件 Page 和 Panel

• SAP UI5 初學(xué)者教程之十二 - 使用 CSS 類對(duì) UI 進(jìn)行進(jìn)一步美化

• SAP UI5 初學(xué)者教程之十三 - 如何添加自定義 CSS 類

• SAP UI5 初學(xué)者教程之十四 - 嵌入視圖的使用方式

• SAP UI5 初學(xué)者教程之十五 - 對(duì)話框和 Fragments 的使用方式

• SAP UI5 初學(xué)者教程之十六 - 圖標(biāo) icon 的使用

• SAP UI5 初學(xué)者教程之十七 - 聚合綁定在 UI5 復(fù)合控件中的使用

• SAP UI5 初學(xué)者教程之十八 - SAP UI5 數(shù)據(jù)綁定語(yǔ)法里的特殊符號(hào)，以及絕對(duì)綁定和相對(duì)綁定概念詳解

• SAP UI5 初學(xué)者教程之十九 - SAP UI5 數(shù)據(jù)類型和復(fù)雜的數(shù)據(jù)綁定

說(shuō)明

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

在 Jerry 這篇文章 對(duì) SAP UI5 一無(wú)所知的新手，從哪些材料開(kāi)始學(xué)習(xí)比較好？ 曾經(jīng)提到，Jerry 也是從 SAP UI5 菜鳥(niǎo)一路走過(guò)來(lái)，深知只有 ABAP 開(kāi)發(fā)背景的開(kāi)發(fā)者，向 SAP UI5 開(kāi)發(fā)領(lǐng)域轉(zhuǎn)型的不易，因此我在業(yè)余時(shí)間設(shè)計(jì)了這份適合 SAP UI5 初學(xué)者的學(xué)習(xí)教程，把開(kāi)發(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í)。

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-p3HBHU4S-1644928831781)(https://upload-images.jianshu.io/upload_images/2085791-a01ba5546ea44e31.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]

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

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

通過(guò)本教程前面的步驟SAP UI5 初學(xué)者教程之十七 - 聚合綁定在 UI5 復(fù)合控件中的使用的介紹，我們已經(jīng)學(xué)會(huì)了如何在 SAP UI5 里顯示列表，如下圖所示：

本步驟我們給該列表添加更多的業(yè)務(wù)數(shù)據(jù)，比如每張發(fā)票的金額。

按照本文的步驟完成的 SAP UI5 應(yīng)用，列表如下圖所示：

可以看到，同前一個(gè)步驟相比，現(xiàn)在 Invoices 表格里，每張發(fā)票的金額和貨幣單位已經(jīng)顯示出來(lái)了。

如果我們想對(duì)于發(fā)票的金額，不采取四舍五入，而是采取小數(shù)點(diǎn)后有多少位，就顯示多少位的策略，當(dāng)然也是可以的，效果如下：

具體實(shí)現(xiàn)參考這篇文章。

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

以上是生活随笔為你收集整理的SAP UI5 初学者教程之十九 - SAP UI5 数据类型和复杂的数据绑定的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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