一個用於SAP UI5學習的腳手架應用，沒有任何後臺API的依賴

Jerry的系列  通過最簡單的button控制元件，深入學習SAP UI5框架程式碼系列之零 裡面曾經提到，我們會使用單步除錯的方式，來學習SAP UI5框架的部分原始碼實現。

如果找一個現成的SAP UI5應用來除錯，勢必會增加我們除錯的複雜度，所以對於這類除錯任務，Jerry最喜歡的方式就是首先搭建一個小的腳手架應用(即很多英文的前端開發部落格裡提到的scaffold)，隔離所有不必要的依賴，只包含了待除錯的最小範圍的特性(mini scope).

以本系列為例，自始至終我們使用的SAP UI5應用，只包含一個最簡單的button控制元件。

Jerry已經準備好了這樣一個應用，放在我的 github上，大家可以下載或者clone到本地。

進入專案資料夾下，首先執行命令列npm install, 然後執行node local.js(當然，你需要首先安裝npm和nodejs).

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

可以用任何文字編輯器開啟這個資料夾，該頁面的原始碼在walkthrough子資料夾的index.html裡：

上圖高亮部分的原始碼，即SAP UI5 button控制元件的建立程式碼，可以直接從下面SAP UI5官網上拷貝獲得：

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

(Jerry寫這個英文系列時用的button來自sap.ui.commons名稱空間，在最新版本的UI5裡面已經depreciated了，SAP推薦使用sap.m名稱空間下的新button控制元件)

瀏覽器裡輸入另一個url：

http://localhost:3000/ui5/

能看到一個典型的Fiori Master-Detail風格的應用，左邊的Master List裡顯示服務訂單列表，任意點選一個，在螢幕右邊能看到該訂單的明細頁面。

該應用也展示了Master List裡的搜尋，以及根據選中的服務訂單欄位(Amount,State)進行聚合的功能，以及SAP UI5的頁面跳轉功能實現。

最重要的是，這個腳手架應用沒有引入任何後臺API的依賴。

這個Master-Detail的應用實現在webapp資料夾下。在webapp資料夾下的Component.js裡，能看到直接使用了本地儲存的json檔案作為model的資料來源：

這個腳手架應用基於nodejs，可以用命令cf push上傳到SAP雲平臺的CloudFoundry環境，或者直接將整個資料夾拷貝到阿里雲/騰訊雲這類虛擬主機上，然後直接執行命令列node local.js啟動應用。

具體步驟在我之前的文章 如何在阿里雲上執行SAP UI5應用裡有介紹。

本系列的所有文章，都會使用本文介紹的腳手架應用來除錯SAP UI5的框架程式碼。感謝閱讀。

系列目錄

• SAP UI5應用開發人員瞭解UI5框架程式碼的意義
• UI5 module懶載入機制
• UI5 控制元件渲染機制
• HTML原生事件 VS SAP UI5 Semantic事件
• UI5控制元件後設資料實現細節
• UI5控制元件的例項資料實現細節
• UI5控制元件資料繫結的實現原理
• UI5控制元件資料繫結的三種模式：One Way，Two Way和OneTime實現原理比較
• UI5控制元件ID的生成邏輯
• UI5控制元件的多語言(國際化,Internationalization,i18n)支援的實現原理
• XML檢視裡的button控制元件
• button控制元件和它背後的DOM元素

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":