Jerry的系列 通過最簡(jiǎn)單的button控件，深入學(xué)習(xí)SAP UI5框架代碼系列之零 里面曾經(jīng)提到，我們會(huì)使用單步調(diào)試的方式，來學(xué)習(xí)SAP UI5框架的部分源代碼實(shí)現(xiàn)。

如果找一個(gè)現(xiàn)成的SAP UI5應(yīng)用來調(diào)試，勢(shì)必會(huì)增加我們調(diào)試的復(fù)雜度，所以對(duì)于這類調(diào)試任務(wù)，Jerry最喜歡的方式就是首先搭建一個(gè)小的腳手架應(yīng)用(即很多英文的前端開發(fā)博客里提到的scaffold)，隔離所有不必要的依賴，只包含了待調(diào)試的最小范圍的特性(mini scope).

以本系列為例，自始至終我們使用的SAP UI5應(yīng)用，只包含一個(gè)最簡(jiǎn)單的button控件。

Jerry已經(jīng)準(zhǔn)備好了這樣一個(gè)應(yīng)用，放在我的github上，大家可以下載或者clone到本地。

進(jìn)入項(xiàng)目文件夾下，首先運(yùn)行命令行npm install, 然后執(zhí)行node local.js(當(dāng)然，你需要首先安裝npm和nodejs).

看到Example app listens on port 3000后，瀏覽器輸入localhost:3000/wt即可看到僅包含了一個(gè)button控件的SAP UI5頁面：

可以用任何文本編輯器打開這個(gè)文件夾，該頁面的源代碼在walkthrough子文件夾的index.html里：

上圖高亮部分的源代碼，即SAP UI5 button控件的創(chuàng)建代碼，可以直接從下面SAP UI5官網(wǎng)上拷貝獲得：

https://sapui5.hana.ondemand.com/1.32.11/#test-resources/sap/ui/commons/demokit/Button.html

(Jerry寫這個(gè)英文系列時(shí)用的button來自sap.ui.commons命名空間，在最新版本的UI5里面已經(jīng)depreciated了，SAP推薦使用sap.m命名空間下的新button控件)

瀏覽器里輸入另一個(gè)url：

http://localhost:3000/ui5/

能看到一個(gè)典型的Fiori Master-Detail風(fēng)格的應(yīng)用，左邊的Master List里顯示服務(wù)訂單列表，任意點(diǎn)擊一個(gè)，在屏幕右邊能看到該訂單的明細(xì)頁面。

該應(yīng)用也展示了Master List里的搜索，以及根據(jù)選中的服務(wù)訂單字段(Amount,State)進(jìn)行聚合的功能，以及SAP UI5的頁面跳轉(zhuǎn)功能實(shí)現(xiàn)。

最重要的是，這個(gè)腳手架應(yīng)用沒有引入任何后臺(tái)API的依賴。

這個(gè)Master-Detail的應(yīng)用實(shí)現(xiàn)在webapp文件夾下。在webapp文件夾下的Component.js里，能看到直接使用了本地存儲(chǔ)的json文件作為model的數(shù)據(jù)源：

這個(gè)腳手架應(yīng)用基于nodejs，可以用命令cf push上傳到SAP云平臺(tái)的CloudFoundry環(huán)境，或者直接將整個(gè)文件夾拷貝到阿里云/騰訊云這類虛擬主機(jī)上，然后直接執(zhí)行命令行node local.js啟動(dòng)應(yīng)用。

具體步驟在我之前的文章如何在阿里云上運(yùn)行SAP UI5應(yīng)用里有介紹。

本系列的所有文章，都會(huì)使用本文介紹的腳手架應(yīng)用來調(diào)試SAP UI5的框架代碼。感謝閱讀。

系列目錄

• SAP UI5應(yīng)用開發(fā)人員了解UI5框架代碼的意義
• UI5 module懶加載機(jī)制
• UI5 控件渲染機(jī)制
• HTML原生事件 VS SAP UI5 Semantic事件
• UI5控件元數(shù)據(jù)實(shí)現(xiàn)細(xì)節(jié)
• UI5控件的實(shí)例數(shù)據(jù)實(shí)現(xiàn)細(xì)節(jié)
• UI5控件數(shù)據(jù)綁定的實(shí)現(xiàn)原理
• UI5控件數(shù)據(jù)綁定的三種模式：One Way，Two Way和OneTime實(shí)現(xiàn)原理比較
• UI5控件ID的生成邏輯
• UI5控件的多語言(國(guó)際化,Internationalization,i18n)支持的實(shí)現(xiàn)原理
• XML視圖里的button控件
• button控件和它背后的DOM元素

要獲取更多Jerry的原創(chuàng)文章，請(qǐng)關(guān)注公眾號(hào)"汪子熙":

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的一个用于SAP UI5学习的脚手架应用，没有任何后台API的依赖的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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