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

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

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

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

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

本教程的前兩篇文章，我們的 SAP UI5 應(yīng)用界面里顯示的 Hello World，一直都是通過 div 標(biāo)簽實(shí)現(xiàn)的。

本文作為這個(gè)教程的第三個(gè)步驟，我們會(huì)真正開始接觸 SAP UI5 提供的控件之一：Text.

本步驟使用的源代碼在下面這個(gè)鏈接處下載:

https://github.com/wangzixi-diablo/ui5-tutorial

同本教程的前一步驟相比，本步驟的 index.html 和 index.js 文件都增添了一些新的內(nèi)容。

首先看這個(gè)步驟完成后的效果。

瀏覽器打開 index.html, 能看到 Hello world 的字符串，同時(shí)鼠標(biāo)放上去，能看到一個(gè) tooltip：

下面是具體的修改細(xì)節(jié)。

index.html

步驟1和2里，我們都使用 body 標(biāo)簽里的 div 標(biāo)簽，來顯示 Hello world.

但是本步驟里，大家看，body 標(biāo)簽里包含的 div 標(biāo)簽內(nèi)容是空的。同時(shí)，該 div 標(biāo)簽多了一個(gè) id 屬性，內(nèi)容為 content. 并且有一個(gè) CSS class，名為 sapUiBody. 這個(gè) class 是 SAP UI5 標(biāo)準(zhǔn)的 CSS 庫(kù)提供的，稍后我們會(huì)查看這個(gè) class 實(shí)現(xiàn)了什么樣的視覺效果。

這個(gè) id 為 content 的 div 標(biāo)簽，我們又稱其為占位符 place holder，稍后我們創(chuàng)建的第一個(gè) SAP UI5 控件，即 Text 控件，會(huì)放置在這個(gè)占位符里。也就是說，這個(gè)占位符 div 標(biāo)簽，扮演的是一個(gè)容器的角色，容納其他通過 JavaScript 代碼在運(yùn)行時(shí)創(chuàng)建的 SAP UI5 控件。

這里的 id 值 content，可以任意起，只需要和下面即將介紹的 index.js 里調(diào)用的 placeAt 方法里傳入的 id 保持一致即可。

index.js

這段代碼有4處關(guān)鍵點(diǎn)，如下圖標(biāo)注所示：

sap.ui.define 方法

因?yàn)槲覀冊(cè)诒静襟E需要使用到 SAP UI5 提供的 Text 控件，該控件位于命名空間 sap.m 內(nèi)，故需要先使用 sap.ui.define 方法，加載 sap.m.Text 控件的實(shí)現(xiàn)。

sap.ui.define 方法接收兩個(gè)參數(shù)，第一個(gè)參數(shù)的類型是數(shù)組，里面存放需要加載的 SAP UI5 庫(kù)的 url 集合，本例為 sap/m/Text.

第二個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)，當(dāng) sap.ui.define 成功加載所需的庫(kù)文件之后，會(huì)自動(dòng)調(diào)用這個(gè)回調(diào)函數(shù)，并將加載成功的庫(kù)文件的實(shí)現(xiàn)，作為輸入?yún)?shù)，傳遞給回調(diào)函數(shù)。在我們這個(gè)例子里，回調(diào)函數(shù)即代碼第三行指定的 function 函數(shù)，輸入?yún)?shù) Text，即是 sap.ui.define 成功加載 sap.m.Text 庫(kù)之后傳遞給回調(diào)函數(shù)的參數(shù)。

關(guān)于其他關(guān)鍵點(diǎn)的詳細(xì)介紹，請(qǐng)參考我的文章：SAP UI5 初學(xué)者教程之三：開始接觸第一個(gè) SAP UI5 控件

總結(jié)

以上是生活随笔為你收集整理的SAP UI5 初学者教程之三：开始接触第一个 SAP UI5 控件 试读版的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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