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 应用中的 sap.ui.require 使用场景
- SAP UI5 应用中的 sap.ui.require.toUrl 使用场景
- 使用 SAP UI5 sap.ui.export.Spreadsheet API 进行 Excel 导出的一些限制
- Angular 里 HTTP 请求和响应结构的拦截器(interceptors)在 SAP Spartacus 中的应用
- SAP Gateway 在开发系统和生产系统上的缓存控制
- SAP UI5 Smart Table 和 Smart Filter Bar 的联合使用方法介绍
- SAP UI5 应用 manifest.json 文件里 Routes 数组元素的相对顺序,不可忽视的试读版
- SAP QM不常用功能之Automatic Usage Decision
- SAP Fiori Belize 主题应用在 SAPGUI 里的一些要点
- SAP UI5 应用如何加载自定义 Theme
- SAP UI5 本地开发如何实现 XML 和 JavaScript 代码的自动完成和嵌入式 API 文档自动显示
- 一个真实的 SAP 标准 UI5 应用的扩展开发项目(Extension Project)分享 - UI5 界面上新增订单创建者字段
- SAP Fiori 应用 url 中的 DraftUUID 参数的含义
- 如何用 SAP Commerce Cloud CMS API 批量返回多个 CMS Component 数据
- SAP 录屏BDC使用—实例详解编程语言
- sap MM移动类型配置科目问题详解编程语言
- SAP发布REST/HTTP接口详解编程语言
- 对比SAP VS Oracle: 哪个更适合你?(sap与oracle)
- SAP与Oracle比较:优缺点及应用案例(saporacle对比)
- 跨界合作新模式 Oracle与SAP实现合并(oracle与sap合并)
- 比拼Oracle与SAP的优劣对比(oracle与sap优劣)