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

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

要加载外部自定义主题,开发人员可以通过在页面中静态声明或使用 Core.setThemeRoot() 方法来设置此主题。


这非常类似于对位于不同位置的 SAP UI5 库使用 registerModulePath()。


下面是具体的操作步骤:


(1) 使用下面的代码告诉 SAP UI5 框架,我们自定义 theme 的地址。


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

1

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 字符串相同的对象结构:



         




(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 指令。不支持允许子域的通配符。




相关文章
|
5月前
|
搜索推荐 BI 开发者
sap.ui.comp.smarttable.SmartTable 组件 beforeRebindTable 事件的用法
sap.ui.comp.smarttable.SmartTable 组件 beforeRebindTable 事件的用法
|
存储 前端开发 安全
SAP UI5 应用的标准 Theme 和自定义 Theme 的加载讨论
SAP UI5 应用的标准 Theme 和自定义 Theme 的加载讨论
|
XML 前端开发 JavaScript
使用代码给 SAP UI5 XML 视图添加自定义 CSS
使用代码给 SAP UI5 XML 视图添加自定义 CSS
使用代码给 SAP UI5 XML 视图添加自定义 CSS
|
JSON 安全 前端开发
SAP UI5 应用如何加载自定义 Theme
SAP UI5 应用如何加载自定义 Theme
|
前端开发 UED
关于使用 SAP UI5 代码设置应用 theme 的技巧
关于使用 SAP UI5 代码设置应用 theme 的技巧
|
12月前
|
开发框架 UED 容器
SAP UI5 sap.ui.layout 命名空间的作用介绍
SAP UI5 sap.ui.layout 命名空间的作用介绍
|
前端开发 测试技术 API
SAP UI5 Theme Library 的解析逻辑和 SAP UI5 配置元数据的默认值
SAP UI5 Theme Library 的解析逻辑和 SAP UI5 配置元数据的默认值
|
XML 数据格式 容器
SAP UI5 SimpleForm 控件实例的初始化调试
SAP UI5 SimpleForm 控件实例的初始化调试
|
JavaScript 前端开发
Web Components 系列(八)—— 自定义组件的样式设置
通过前面的学习,对自定义组件的相关概念和知识点也有了一定了解,今天我们就来学习一下给自定义元素及其子元素设置样式的几种方法。
323 0
Web Components 系列(八)—— 自定义组件的样式设置
|
测试技术
SAP UI5 的 sap-ui-bootstrap script 脚本标签各属性解析
SAP UI5 的 sap-ui-bootstrap script 脚本标签各属性解析
122 0
SAP UI5 的 sap-ui-bootstrap script 脚本标签各属性解析