关于sap:SAP-UI5-应用-indexhtml-里各个属性赋值逻辑的讲解

<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 是根应用程序的命名空间。

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 的原创文章，尽在：” 汪子熙 ”:

data-sap-ui-frameOptions