Jerry 從 2014 年加入 SAP成都研究院 CRM Fiori 開發團隊之後開始接觸 SAP UI5，曾經在 SAP 社群和“汪子熙”微信公眾號上發表過多篇關於 SAP UI5 工作原理和原始碼解析的文章。

在 Jerry 這篇文章[對 SAP UI5 一無所知的新手，從哪些材料開始學習比較好？](https://blog.csdn.net/i042416/article/details/116347763) 曾經提到，Jerry 也是從 SAP UI5 菜鳥一路走過來，深知只有 ABAP 開發背景的開發者，向 SAP UI5 開發領域轉型的不易，因此我在業餘時間設計了這份適合 SAP UI5 初學者的學習教程，把開發一個完整的 SAP UI5 應用的流程，拆分成若干個步驟，力求每個步驟裡，把涉及到的知識點都涵蓋到。這些知識點可能不像我的 UI5 原始碼分析系列文章那麼深入，但力求淺顯易懂，便於 SAP UI5 初學者理解。

本教程每一個步驟的原始碼，都存放在我的 [Github](https://github.com/wangzixi-diablo/ui5-tutorial) 上，分別用資料夾 01，02，03 等等來標識。

![](https://img-blog.csdnimg.cn/img_convert/c7bad3447ae1849d56da2f9ae2f4a6e8.png)

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

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

本教程的前兩篇文章，我們的 SAP UI5 應用介面裡顯示的 Hello World，一直都是透過 div 標籤實現的。

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

本步驟使用的原始碼在下面這個連結處下載:

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

![](https://img-blog.csdnimg.cn/img_convert/22f568be4749d011e6f81dea8327131c.png)

同本教程的前一步驟相比，本步驟的 index.html 和 index.js 檔案都增添了一些新的內容。

首先看這個步驟完成後的效果。

瀏覽器開啟 index.html, 能看到 Hello world 的字串，同時滑鼠放上去，能看到一個 tooltip：

![](https://img-blog.csdnimg.cn/img_convert/6ccded846f5478b0df0db3ceaca62289.png)

下面是具體的修改細節。

# index.html

步驟1和2裡，我們都使用 body 標籤裡的 div 標籤，來顯示 Hello world.

但是本步驟裡，大家看，body 標籤裡包含的 div 標籤內容是空的。同時，該 div 標籤多了一個 id 屬性，內容為 content. 並且有一個 CSS class，名為 sapUiBody. 這個 class 是 SAP UI5 標準的 CSS 庫提供的，稍後我們會檢視這個 class 實現了什麼樣的視覺效果。

![](https://img-blog.csdnimg.cn/img_convert/38c40878b79be14b8a4904dfe3f40f4f.png)

這個 id 為 content 的 div 標籤，我們又稱其為佔位符 place holder，稍後我們建立的第一個 SAP UI5 控制元件，即 Text 控制元件，會放置在這個佔位符裡。也就是說，這個佔位符 div 標籤，扮演的是一個容器的角色，容納其他透過 JavaScript 程式碼在執行時建立的 SAP UI5 控制元件。

這裡的 id 值 content，可以任意起，只需要和下面即將介紹的 index.js 裡呼叫的 placeAt 方法裡傳入的 id 保持一致即可。

# index.js

這段程式碼有4處關鍵點，如下圖示註所示：

![](https://img-blog.csdnimg.cn/img_convert/d2708c9927636f75185c60572c17abae.png)

## sap.ui.define 方法

因為我們在本步驟需要使用到 SAP UI5 提供的 Text 控制元件，該控制元件位於名稱空間 sap.m 內，故需要先使用 sap.ui.define 方法，載入 sap.m.Text 控制元件的實現。

sap.ui.define 方法接收兩個引數，第一個引數的型別是陣列，裡面存放需要載入的 SAP UI5 庫的 url 集合，本例為 sap/m/Text.

第二個引數是一個回撥函式，當 sap.ui.define 成功載入所需的庫檔案之後，會自動呼叫這個回撥函式，並將載入成功的庫檔案的實現，作為輸入引數，傳遞給回撥函式。在我們這個例子裡，回撥函式即程式碼第三行指定的 function 函式，輸入引數 Text，即是 sap.ui.define 成功載入 sap.m.Text 庫之後傳遞給回撥函式的引數。

關於其他關鍵點的詳細介紹，請參考我的文章：[SAP UI5 初學者教程之三：開始接觸第一個 SAP UI5 控制元件](https://jerry.blog.csdn.net/article/details/120619615)

SAP UI5 初學者教程之三：開始接觸第一個 SAP UI5 控制元件試讀版

相關文章

SAP UI5 初學者教程之三：開始接觸第一個 SAP UI5 控制元件 試讀版

相關文章

SAP UI5 初學者教程之三：開始接觸第一個 SAP UI5 控制元件試讀版