Jerry 從 2014 年加入 SAP成都研究院 CRM Fiori 開發團隊之後開始接觸 SAP UI5，曾經在 SAP 社群和“汪子熙”微信公衆号上發表過多篇關于 SAP UI5 工作原理和源碼解析的文章。
在 Jerry 這篇文章對 SAP UI5 一無所知的新手，從哪些材料開始學習比較好？ 曾經提到，Jerry 也是從 SAP UI5 菜鳥一路走過來，深知隻有 ABAP 開發背景的開發者，向 SAP UI5 開發領域轉型的不易，是以我在業餘時間設計了這份适合 SAP UI5 初學者的學習教程，把開發一個完整的 SAP UI5 應用的流程，拆分成若幹個步驟，力求每個步驟裡，把涉及到的知識點都涵蓋到。這些知識點可能不像我的 UI5 源碼分析系列文章那麼深入，但力求淺顯易懂，便于 SAP UI5 初學者了解。
本教程每一個步驟的源代碼，都存放在我的 Github 上，分别用檔案夾 01，02，03 等等來辨別。
每一個步驟均是前一步驟的基礎上，添加了若幹新特性。建議零基礎或者對 SAP UI5 知之甚少的初學者，按照順序從第一個步驟開始循序漸進地學習，把這些代碼下載下傳到本地，配合教程的文字講解，自己動手，以加深了解。
大家如果對教程的每個步驟有任何疑問，歡迎在教程對應的步驟文章裡給我評論，進行留言。
本教程的前兩篇文章，我們的 SAP UI5 應用界面裡顯示的 Hello World，一直都是通過 div 标簽實作的。
本文作為這個教程的第三個步驟，我們會真正開始接觸 SAP UI5 提供的控件之一：Text.
本步驟使用的源代碼在下面這個連結處下載下傳:
https://github.com/wangzixi-diablo/ui5-tutorial
同本教程的前一步驟相比，本步驟的 index.html 和 index.js 檔案都增添了一些新的内容。
首先看這個步驟完成後的效果。
浏覽器打開 index.html, 能看到 Hello world 的字元串，同時滑鼠放上去，能看到一個 tooltip：
下面是具體的修改細節。
index.html
步驟1和2裡，我們都使用 body 标簽裡的 div 标簽，來顯示 Hello world.
但是本步驟裡，大家看，body 标簽裡包含的 div 标簽内容是空的。同時，該 div 标簽多了一個 id 屬性，内容為 content. 并且有一個 CSS class，名為 sapUiBody. 這個 class 是 SAP UI5 标準的 CSS 庫提供的，稍後我們會檢視這個 class 實作了什麼樣的視覺效果。
這個 id 為 content 的 div 标簽，我們又稱其為占位符 place holder，稍後我們建立的第一個 SAP UI5 控件，即 Text 控件，會放置在這個占位符裡。也就是說，這個占位符 div 标簽，扮演的是一個容器的角色，容納其他通過 JavaScript 代碼在運作時建立的 SAP UI5 控件。
這裡的 id 值 content，可以任意起，隻需要和下面即将介紹的 index.js 裡調用的 placeAt 方法裡傳入的 id 保持一緻即可。
index.js
這段代碼有4處關鍵點，如下圖示注所示：
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 庫之後傳遞給回調函數的參數。