當(dāng)前位置:首頁(yè) > IT技術(shù) > Web編程 > 正文

SAP UI5 應(yīng)用 index.html 里各個(gè)屬性賦值邏輯的講解
2021-09-29 14:43:19

<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 實(shí)現(xiàn)的,因此要從客戶(hù)端上的 SAP HANA 存儲(chǔ)庫(kù)文件夾 /sap/ui5/1/resources/ 加載 SAPUI5 運(yùn)行時(shí)庫(kù) sapui-core.js,您需要使用 script 標(biāo)記包含其引導(dǎo)程序。

data-sap-ui-theme 屬性指定要應(yīng)用的視覺(jué)設(shè)計(jì),data-sap-ui-libs 屬性指定要使用的 UI 控件庫(kù)。

Application 腳本:SAPUI5 基于模型-視圖-控制器范式。 要?jiǎng)?chuàng)建視圖和控制器,SAPUI5 運(yùn)行時(shí)需要知道從哪里加載相關(guān)資源(sap.ui.localResources); 在這種情況下,來(lái)自相關(guān)子文件夾 /odatabasic。 在上述的 HTML 文件中,您將 odatabasic 子文件夾中新創(chuàng)建的 odataBasic 視圖實(shí)例放置在具有 ID 內(nèi)容的 HTML 元素中。

關(guān)于 data-sap-ui-resourceroots:

SAP UI5 應(yīng)用 index.html 里各個(gè)屬性賦值邏輯的講解_mvc

SAP UI5 應(yīng)用 index.html 里各個(gè)屬性賦值邏輯的講解_mvc_02

resourceroot 是根應(yīng)用程序的命名空間。

data-sap-ui-frameOptions

SAP UI5 應(yīng)用 index.html 里各個(gè)屬性賦值邏輯的講解_javascript_03

frameOptions 用于防止點(diǎn)擊劫持(clickjacking)等安全漏洞。使用 frameOptions 配置,您可以定義 SAPUI5 是否允許嵌入到框架中運(yùn)行,或者僅從受信任的來(lái)源運(yùn)行,或者根本不允許運(yùn)行。

SAPUI5 為 frameOptions 提供了以下配置選項(xiàng):

SAP UI5 應(yīng)用 index.html 里各個(gè)屬性賦值邏輯的講解_html_04

其實(shí) allow 是默認(rèn)選項(xiàng)。

trusted:允許根據(jù)同源策略從可信源嵌入,并允許嵌入白名單服務(wù)允許的源。

data-sap-ui-oninit: Using the ComponentSupport Module

使用聲明性 sap/ui/core/ComponentSupport API,可以直接在 HTML 標(biāo)記中定義最初啟動(dòng)的組件,而不是使用 JavaScript 的命令式方式。 默認(rèn)情況下,聲明性 ComponentSupport 未激活,但必須通過(guò)引導(dǎo)程序啟用:

SAP UI5 應(yīng)用 index.html 里各個(gè)屬性賦值邏輯的講解_javascript_05

此模塊掃描 DOM 以查找包含名為 data-sap-ui-component 的特殊數(shù)據(jù)屬性的 HTML 元素。 所有標(biāo)有此 data 屬性的 DOM 元素都將被視為容器元素,其中插入了 sap/ui/core/ComponentContainer。 然后使用其他數(shù)據(jù)屬性來(lái)定義創(chuàng)建的 ComponentContainer 實(shí)例的構(gòu)造函數(shù)參數(shù),例如 應(yīng)實(shí)例化的組件名稱(chēng)的數(shù)據(jù)名稱(chēng):

<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ū)分大小寫(xiě),為了使用大寫(xiě)字符定義屬性,您必須使用連字符“轉(zhuǎn)義”它們。 這類(lèi)似于 CSS 屬性。 在以下示例中,使用了 ComponentContainer 構(gòu)造函數(shù)的 handleValidation 參數(shù):

<div data-sap-ui-component ... data-handle-validation="true" ...></div>

更多說(shuō)明參考這個(gè)??鏈接??。

最后生成的 dom 元素:

SAP UI5 應(yīng)用 index.html 里各個(gè)屬性賦值邏輯的講解_引導(dǎo)程序_06

本文摘自 :https://blog.51cto.com/j

開(kāi)通會(huì)員,享受整站包年服務(wù)立即開(kāi)通 >