UI5-文件-4.3-Controls
現在是時候構建我們的第一個小UI了，將HTML主體中的“Hello World”文字替換為SAPUI5控制元件sap.m.Text。首先，我們將使用JavaScript控制元件介面來設定UI，然後將控制元件例項放入HTML體中。
Preview
The "Hello World" text is now displayed by a SAPUI5 control
Coding
你可以在此檢視和下載所有檔案Walkthrough - Step 3.
webapp/index.html
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8"> <title>Walkthrough</title> <script id="sap-ui-bootstrap" src="/resources/sap-ui-core.js" data-sap-ui-theme="sap_belize"data-sap-ui-libs="sap.m" data-sap-ui-compatVersion="edge" data-sap-ui-preload="async" > </script> <script> sap.ui.getCore().attachInit(function () { new sap.m.Text({ text : "Hello World"}).placeAt("content"); }); </script> </head> <body class="sapUiBody" id="content"> </body> </html>
在上面的例子中，init事件的回撥是我們例項化SAPUI5文字控制元件的地方。控制元件的名稱以其控制元件庫sap.m的名稱空間為字首，選項被傳遞給帶有JavaScript物件的建構函式。對於控制元件，我們將文字屬性設定為值“Hello World”。我們想要使用一個簡單的SAPUI5控制元件，而不是使用原生JavaScript來顯示對話方塊。控制元件用於定義螢幕部分的外觀和行為。
我們將控制元件的建構函式呼叫連結到標準方法placeAt，該方法用於將SAPUI5控制元件放置在文件物件模型(DOM)或任何其他SAPUI5控制元件例項的節點內。我們將DOM節點的ID作為引數傳遞。作為目標節點，我們使用HTML文件的body標記併為其提供ID content。類sapUiBody添加了額外的主題相關樣式來顯示SAPUI5應用程式。
SAPUI5的所有控制元件都有一組用於配置的固定屬性、聚合和關聯。您可以在演示工具包中找到它們的描述。此外，每個控制元件都附帶一組公共函式，您可以在API引用中查詢這些公共函式。
不要忘記刪除“Hello World”p。
請注意：只有sap.ui.core的例項。控制元件或其子類可以獨立呈現並具有placeAt函式。每個控制元件擴充套件sap.ui.core。只能在控制元件內部呈現的元素。檢視API參考以瞭解更多關於控制元件繼承層次結構的資訊。每個控制元件的API文件引用直接已知的子類。
Parent topic: Walkthrough
Previous: Step 2: Bootstrap
Next: Step 4: XML Views
Related Information
API Reference:sap.ui.core.Control