SAP UI5 應用 index.html 裡各個屬性賦值邏輯的講解
<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 實現的,因此要從客戶端上的 SAP HANA 儲存庫資料夾 /sap/ui5/1/resources/ 載入 SAPUI5 執行時庫 sapui-core.js,您需要使用 script 標記包含其載入程式。
data-sap-ui-theme 屬性指定要應用的視覺設計,data-sap-ui-libs 屬性指定要使用的 UI 控制元件庫。
Application 指令碼:SAPUI5 基於模型-檢視-控制器正規化。 要建立檢視和控制器,SAPUI5 執行時需要知道從哪裡載入相關資源(sap.ui.localResources); 在這種情況下,來自相關子資料夾 /odatabasic。 在上述的 HTML 檔案中,您將 odatabasic 子資料夾中新建立的 odataBasic 檢視例項放置在具有 ID 內容的 HTML 元素中。
關於 data-sap-ui-resourceroots:
resourceroot 是根應用程式的名稱空間。
data-sap-ui-frameOptions
frameOptions 用於防止點選劫持(clickjacking)等安全漏洞。使用 frameOptions 配置,您可以定義 SAPUI5 是否允許嵌入到框架中執行,或者僅從受信任的來源執行,或者根本不允許執行。
SAPUI5 為 frameOptions 提供了以下配置選項:
其實 allow 是預設選項。
trusted:允許根據同源策略從可信源嵌入,並允許嵌入白名單服務允許的源。
data-sap-ui-oninit: Using the ComponentSupport Module
使用宣告性 sap/ui/core/ComponentSupport API,可以直接在 HTML 標記中定義最初啟動的元件,而不是使用 JavaScript 的命令式方式。 預設情況下,宣告性 ComponentSupport 未啟用,但必須通過載入程式啟用:
此模組掃描 DOM 以查詢包含名為 data-sap-ui-component 的特殊資料屬性的 HTML 元素。 所有標有此 data 屬性的 DOM 元素都將被視為容器元素,其中插入了 sap/ui/core/ComponentContainer。 然後使用其他資料屬性來定義建立的 ComponentContainer 例項的建構函式引數,例如 應例項化的元件名稱的資料名稱:
<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 不區分大小寫,為了使用大寫字元定義屬性,您必須使用連字元“轉義”它們。 這類似於 CSS 屬性。 在以下示例中,使用了 ComponentContainer 建構函式的 handleValidation 引數:
<div data-sap-ui-component ... data-handle-validation="true" ...></div>
更多說明參考這個連結。
最後生成的 dom 元素:
更多Jerry的原創文章,盡在:"汪子熙":