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é)者，按照順序從第一個步驟開始循序漸進地學(xué)習(xí)，把這些代碼下載到本地，配合教程的文字講解，自己動手，以加深理解。

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

本教程的前一個步驟也就是第四個步驟，我們了解了 SAP UI5 XML 視圖的使用方法。在該步驟里，我們在 XML 視圖里聲明了一個 Text 控件實例，該控件位于 sap.m 這個命名空間內(nèi)。

本步驟會繼續(xù)接觸 SAP UI5 MVC 框架中三大基石的另一塊：C - Controller，即控制器。

先看看本步驟完成之后，我們得到的 SAP UI5 應(yīng)用能實現(xiàn)一個什么樣的效果。

訪問如下 url：

http://localhost:8080/webapp/index.html

能看到一個 Say Hello 的按鈕：

點擊之后，看到一個 Hello World 的對話框：

這也是我們學(xué)習(xí) SAP UI5 開發(fā)的場景里，第一次響應(yīng)用戶的交互操作。點擊按鈕后的事件處理邏輯，就編寫在我們本步驟要學(xué)習(xí)的視圖控制器內(nèi)部。

本步驟的全部源代碼，照例在我的 Github 上提供下載：

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

下面是具體的實現(xiàn)步驟。

index.html

這個文件和前兩個步驟的實現(xiàn)相比沒有任何變化，請參閱本教程前一步驟的介紹：SAP UI5 初學(xué)者教程之三：開始接觸第一個 SAP UI5 控件

上圖第13行 data-sap-ui-oninit 屬性，指定了 SAP UI5 框架初始化完成之后，執(zhí)行我們自定義的名為 index 的 module. 這個用法，在我們教程的第二個步驟有詳細(xì)介紹：

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

index.js

本 module 的實現(xiàn)代碼和前一步驟相比也沒有任何變化。
下圖第6行代碼，我們新建一個名為 App 的 XML 視圖，再通過第8行的 placeAt 代碼，將其放置到 id 為 content 的占位符 div 標(biāo)簽內(nèi)。

關(guān)于 XMLView.create 的方法詳解，請參考本教程前一步驟的文章：SAP UI5 初學(xué)者教程之四：XML 視圖初探

余下的關(guān)鍵點介紹，請參考我的文章：SAP UI5 初學(xué)者教程之五：視圖控制器初探。

總結(jié)

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

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