乐趣区

关于javascript:SAP-UI5-应用如何加载自定义-Theme

jiezi

要加载内部自定义主题，开发人员能够通过在页面中动态申明或应用 Core.setThemeRoot() 办法来设置此主题。

这十分相似于对位于不同地位的 SAP UI5 库应用 registerModulePath()。

上面是具体的操作步骤：

(1) 应用上面的代码通知 SAP UI5 框架，咱们自定义 theme 的地址。

sap.ui.getCore().setThemeRoot("my_theme", "http://url.to/the/root/dir");

SAPUI5 而后从该 URL 加载所有主题资源。比方 sap.ui.core 库的 library.css 文件，在上述代码执行之后，就变成：

http://url.to/the/root/dir/sap/ui/core/themes/my_theme/library.css

base directory 也能够通过 core.applyTheme(...) 办法的第二个参数指定。

如果 theme 的某些局部位于不同的地位，能够应用下面的调用来设置默认值，但通过在数组中将它们指定为第二个参数来笼罩特定库的主题地位：

sap.ui.getCore().setThemeRoot("my_theme", ["my.lib.one","my.lib.two"], "http://url.to/the/other/root/dir");

上面是不同的设置 theme 的实现办法：

(1) 在 SAPUI5 bootstrap script 的属性中应用与 JSON 字符串雷同的对象构造:

<script id="sap-ui-bootstrap" 
    type="text/javascript"
    src="resources/sap-ui-core.js"
    data-sap-ui-theme-roots='{"my_theme":"http://themes.org/ui5"}'>
</script>

(2) 通过 URL parameter 指定:

http://myserver.com/sap/myapp/?sap-ui-theme=my-theme@/sap/public/bc/themes/~client-111

(3) 通过全局配置对象指定。

将下列代码插入到 bootstrap 脚本之前：

<script type="text/javascript">
window["sap-ui-config"] = {
    themeRoots : {
        "my_preconfigured_theme" : "http://preconfig.com/ui5-themes",
        
        "my_second_preconfigured_theme" : {"":"http://preconfig.com/ui5-themes","sap.ui.core":"http://core.com/ui5"}
    }
}
</script>

下面的代码达到的成果：

  • 从指定地位为所有库加载第一个主题。
  • 从指定地位为 sap.ui.core 库加载第二个主题。对于所有其余库，主题从默认地位加载。

通过 sap-ui-theme/sap-theme URL 参数配置带有 themeRoot URL 的主题时，存在一些出于平安方面思考的限度。

默认状况下，与以后页面不同起源的相对 URL 被禁止拜访。门路段将绝对于以后页面 origin 值进行解析。

依据 RFC 6454，为了容许通过 URL 参数应用某些 origin 起源，能够将 <meta> 标记增加到页面的 <head> 中：

<meta name="sap-allowedThemeOrigins" content="https://example.com">

有了下面的语句之后，咱们就能够在 SAP UI5 url parameter 里，加载部署在另一个 url 上的 theme：

https://myserver.com/sap/myapp/?sap-theme=my_theme@https://example.com/custom-themes/

<meta> 标记中提供的起源必须蕴含与 URL 参数中提供的起源雷同的协定、主机和端口。多个容许的起源能够用逗号分隔。

通用通配符 * 也可用于容许所有起源。然而，这应该只与其余平安机制联合应用，例如 CSP style-src 指令。不反对容许子域的通配符。

退出移动版