SAP UI5 应用如何加载自定义 Theme

要加载外部自定义主题，开发人员可以通过在页面中静态声明或使用 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 指令。不支持允许子域的通配符。

SAP UI5 应用如何加载自定义 Theme

猜你喜欢