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 等等來標識。

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

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

本教程的第四個步驟，我們學(xué)習(xí)了 SAP UI5 MVC 架構(gòu)中的 V：XML 視圖：

• SAP UI5 初學(xué)者教程之四：XML 視圖初探

第五個教程，我們學(xué)習(xí)了 MVC 中的 C：Controller 即控制器：

• SAP UI5 初學(xué)者教程之五：視圖控制器初探

本步驟，我們將以 JSON 模型為例，學(xué)習(xí) SAP UI5 MVC 剩下的 M - Model，模型層的設(shè)計。

先看按照這個步驟完成的 SAP UI5 應(yīng)用的效果：

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

這個應(yīng)用里我們看見了兩個控件，分別是：

• Say Hello 按鈕控件
• 值為 World，描述信息為 Hello World 的 Input 控件

本步驟的全部源代碼，位于我 Github 這個代碼倉庫的 07 文件夾之下：

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

其中 index.js 和 index.html, 與前一步驟相比并無變化。

controller 和 view 文件夾下的 App.controller.js 以及 App.view.xml 這兩個文件，分別作了增強，以支持新引入的 JSON model.

下面是本步驟針對 App.controller.js 和 App.view.xml 所做的增強的關(guān)鍵點詳細介紹。

App.view.xml

兩處關(guān)鍵點：

(1) 使用 View 標簽頁的 controllerName 屬性，給該視圖指定其綁定的控制器名稱為 App. 按照 SAP UI5 的規(guī)定，該控制器的實現(xiàn)文件名稱遵循下列格式：

<控制器名稱>.controller.js,

故最后文件名應(yīng)為 App.controller.js

這個文件位于文件夾 controller 內(nèi)。

關(guān)于剩下關(guān)鍵點的詳細介紹，請參考我的文章：SAP UI5 初學(xué)者教程之七 - JSON 模型初探

總結(jié)

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

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