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
Working with Controls
API Reference:sap.m.Text
Samples:sap.m.Text
API Reference:sap.ui.core.Control
API Reference:sap.ui.core.Element
API Reference:sap.ui.base.ManagedObject
UI5-文檔-4.3-Controls