APP
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="/sap/ui5/1/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.ui.commons,sap.ui.table" data-sap-ui-theme="sap_bluecrystal">
</script>
<script>
sap.ui.localResources("odatabasic");
var view = sap.ui.view({
id: "idodataBasic",
viewName: "odatabasic.odataBasic",
type: sap.ui.core.mvc.ViewType.JS
});
view.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
bootstrap 腳本：SAPUI5 是用 JavaScript 實現(xiàn)的，因此要從客戶端上的 SAP HANA 存儲庫文件夾 /sap/ui5/1/resources/ 加載 SAPUI5 運(yùn)行時庫 sapui-core.js，您需要使用 script 標(biāo)記包含其引導(dǎo)程序。
data-sap-ui-theme 屬性指定要應(yīng)用的視覺設(shè)計，data-sap-ui-libs 屬性指定要使用的 UI 控件庫。
Application 腳本：SAPUI5 基于模型-視圖-控制器范式。 要創(chuàng)建視圖和控制器，SAPUI5 運(yùn)行時需要知道從哪里加載相關(guān)資源（sap.ui.localResources）； 在這種情況下，來自相關(guān)子文件夾 /odatabasic。 在上述的 HTML 文件中，您將 odatabasic 子文件夾中新創(chuàng)建的 odataBasic 視圖實例放置在具有 ID 內(nèi)容的 HTML 元素中。
關(guān)于 data-sap-ui-resourceroots：
resourceroot 是根應(yīng)用程序的命名空間。
data-sap-ui-frameOptions
frameOptions 用于防止點(diǎn)擊劫持(clickjacking)等安全漏洞。使用 frameOptions 配置，您可以定義 SAPUI5 是否允許嵌入到框架中運(yùn)行，或者僅從受信任的來源運(yùn)行，或者根本不允許運(yùn)行。
SAPUI5 為 frameOptions 提供了以下配置選項：
其實 allow 是默認(rèn)選項。
trusted：允許根據(jù)同源策略從可信源嵌入，并允許嵌入白名單服務(wù)允許的源。
data-sap-ui-oninit: Using the ComponentSupport Module
使用聲明性 sap/ui/core/ComponentSupport API，可以直接在 HTML 標(biāo)記中定義最初啟動的組件，而不是使用 JavaScript 的命令式方式。 默認(rèn)情況下，聲明性 ComponentSupport 未激活，但必須通過引導(dǎo)程序啟用：
此模塊掃描 DOM 以查找包含名為 data-sap-ui-component 的特殊數(shù)據(jù)屬性的 HTML 元素。 所有標(biāo)有此 data 屬性的 DOM 元素都將被視為容器元素，其中插入了 sap/ui/core/ComponentContainer。 然后使用其他數(shù)據(jù)屬性來定義創(chuàng)建的 ComponentContainer 實例的構(gòu)造函數(shù)參數(shù)，例如 應(yīng)實例化的組件名稱的數(shù)據(jù)名稱：
<div data-sap-ui-component
data-name="sap.viz.sample.Line"
data-height="100%"
data-id="container"
data-settings='{"id" : "sap.viz.sample.Line"}'
style="height: 100%">
</div>
由于 HTML 不區(qū)分大小寫，為了使用大寫字符定義屬性，您必須使用連字符“轉(zhuǎn)義”它們。 這類似于 CSS 屬性。 在以下示例中，使用了 ComponentContainer 構(gòu)造函數(shù)的 handleValidation 參數(shù)：
<div data-sap-ui-component ... data-handle-validation="true" ...></div>
更多說明參考這個??鏈接??。
最后生成的 dom 元素：
本文摘自 ：https://blog.51cto.com/j
