1. 程式人生 > 其它 >SAP UI5 應用 index.html 裡各個屬性賦值邏輯的講解

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的原創文章,盡在:"汪子熙":