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)的步驟文章里給我評論，進行留言。

本步驟介紹的大部分內(nèi)容，其實在本教程前一步驟 SAP UI5 初學(xué)者教程之五：視圖控制器初探已經(jīng)涉及到了。

下圖是本教程第五步驟里控制器的實現(xiàn)源代碼，其中我們使用第一行的 sap.ui.define, 異步加載 SAP UI5 標(biāo)準(zhǔn)的控制器實現(xiàn)模塊，即第二行的 sap/ui/core/mvc/Controller.

前一步驟我們點擊 Button 控件，彈出的對話框采取瀏覽器原生的 alert API 實現(xiàn)。

本步驟我們更進一步，將彈出對話框采取 SAP UI5 的 Toast 控件實現(xiàn)。為此，我們需要異步加載 Toast 控件的實現(xiàn)模塊。

先看本步驟的 SAP UI5 應(yīng)用實現(xiàn)效果：

點擊了 Say Hello 按鈕后，我們可以在屏幕底部看到一個通過 SAP UI5 Toast 控件顯示的 Hello World，而不是前一步驟通過 alert 顯示的對話框。

本步驟的完整源代碼：

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

同前一步驟相比，本步驟除了 App.controller.js 之外，下列文件均未發(fā)生變化：

• index.html
• App.view.xml
• index.js

App.controller.js 的關(guān)鍵點：

關(guān)于這些關(guān)鍵點的詳細介紹，請參考我的文章：SAP UI5 初學(xué)者教程之六 - 了解 SAP UI5 的模塊(Module)概念。

總結(jié)

以上是生活随笔為你收集整理的SAP UI5 初学者教程之六 - 了解 SAP UI5 的模块(Module)概念试读版的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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