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

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

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

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

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

本教程的前三個步驟，我們要么直接在 index.html 里，利用原生的標(biāo)簽 div 顯示文本，要么創(chuàng)建 SAP UI5 Text 控件實例，再將其放置于 HTML 占位符 div 標(biāo)簽里。

從本步驟開始，我們會接觸 SAP UI5 非常重要的概念：XML 視圖，這個概念也是 SAP UI5 MVC 三大支柱之一：View 即視圖層。

本步驟的代碼：

https://github.com/wangzixi-diablo/ui5-tutorial/tree/main/04

同前一步驟相比，本步驟的 index.html 沒有任何修改。

在 SAP UI5 框架完成初始化之后，執(zhí)行通過 data-sap-ui-oninit 指定的我們自定義的 module，即位于 webapp 文件夾下面的 index.js 實現(xiàn)的同名 module.

在本教程第三步驟 SAP UI5 初學(xué)者教程之三：開始接觸第一個 SAP UI5 控件里，我們在 index 模塊里，新建了一個 Text 控件實例，并將其放置到 id 為 content 的占位符 div 標(biāo)簽里。

本步驟我們更進(jìn)一步，新建一個 XML 視圖實例，將該視圖實例放置到占位符 div 標(biāo)簽頁里。

index.js 代碼如下：

代碼的四處關(guān)鍵點

(1) XMLView.create:該方法創(chuàng)建一個視圖實例

(2) create 方法需要一個輸入?yún)?shù)，該輸入?yún)?shù)需要包含待創(chuàng)建的 xml 視圖的名稱和路徑。

注意：代碼第6行 viewName 的值，其中 sap.ui5.walkthrough 代表命名空間，view 代表我們 webapp 文件夾下的同名文件夾 view，而 App，對應(yīng)了 view 文件夾里的 App.view.xml. 也就是說，命名空間后面的 view.App, 必須要和 SAP UI5 工程里對應(yīng)的文件夾和視圖文件名稱匹配，否則運行時會報錯。

(3) XMLView.create 的創(chuàng)建，并不會像步驟三創(chuàng)建一個簡單的 Text 控件一樣，調(diào)用 new Text 之后會立即返回創(chuàng)建好的控件實例，而是一個異步執(zhí)行過程。

XMLView.create 返回的是一個 Promise 對象，待 XML 視圖實例真正創(chuàng)建完畢之后，這個 Promise 對象的then 方法里傳進(jìn)去的回調(diào)函數(shù)會被執(zhí)行。該回調(diào)函數(shù)的輸入?yún)?shù)，即上圖第7行的 oView，正是創(chuàng)建成功的 XML 視圖實例。

(4) 調(diào)用 XML 視圖實例的 placeAt 方法，將 XML 視圖放到 id 為 content 的占位符 div 標(biāo)簽里。

下面我們再來看 App.view.xml 里的內(nèi)容。

這個代碼有上圖標(biāo)注的四處關(guān)鍵點。

關(guān)于這些關(guān)鍵點的詳細(xì)介紹，請參考我的文章：SAP UI5 初學(xué)者教程之四：XML 視圖初探

總結(jié)

以上是生活随笔為你收集整理的SAP UI5 初学者教程之四：XML 视图初探试读版的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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