SAP UI5 应用的标准 Theme 和自定义 Theme 的加载讨论

简介: SAP UI5 应用的标准 Theme 和自定义 Theme 的加载讨论

SAP UI5 应用的初始主题可以硬编码在应用程序中(在加载 SAPUI5 的引导程序的脚本标签中)或在加载 SAPUI5 之前定义的 JS 配置对象中,例如下面的例子:

<script id="sap-ui-bootstrap" 
  type="text/javascript"
  src="resources/sap-ui-core.js"
  data-sap-ui-theme="sap_belize">
</script>


这种硬编码的设置具有最低的优先级。


我们可以使用 url parameter,html?sap-ui-theme=sap_belize,来覆盖这个硬编码配置。


如果使用 UI 主题设计器来定义您自己的自定义主题,可以将自定义主题的位置作为服务器相对路径附加到 sap-ui-theme 参数,由 @ 符号分http://myserver.com/sap/myapp/?sap-ui-theme=my-theme@/sap/public/bc/themes/~client-111


尽管可以指定完整的 URL,但该框架将仅使用 URL 的路径信息来防止基于 CSS 的攻击,否则可能会通过从恶意服务器引用 CSS 进行攻击。 在更复杂的情况下,例如,如果 UI 主题设计器的基础结构在单独的服务器上运行,则可以使用 Web dispatcher 将两个服务器组合在一个命名空间中,或者使用方sap.ui.getCore.applyTheme , 为自定义应用设置完整的 URL。


UI theme designer 的基础结构将多种技术的主题存储在同一位置,每个技术都在其自己的子目录中(UI5/ SAPUI5)。


其他 SAP 产品(如 SAP Enterprise Portal)仅将公共根 URL 附加到 sap-theme 参数。 因此,SAPUI5 将文件夹 UI5/ 附加到 sap-theme 参数中定义的任何给定路径。


可以使用方法 sap.ui.getCore.applyTheme 即时切换主题。


应用程序状态不会丢失,并且没有服务器 network 往返(加载 CSS 文件除外,如果未缓存到浏览器中)。


要加载外部自定义主题,可以通过在页面中静态声明或使用 Core.setThemeRoot() 方法来设置此主题。 这非常类似于对位于不同位置的库使用 registerModulePath()。


通过 sap-ui-theme/sap-theme URL 参数配置带有 themeRoot URL 的主题时,存在一些安全方面的限制。 默认情况下,与当前页面不同来源的绝对 URL 被 stripped off.


Path segment 将相对于当前页面的 origin 进行解析。

相关文章
|
27天前
|
前端开发 编解码 数据格式
浅谈响应式编程在企业级前端应用 UI 开发中的实践
浅谈响应式编程在企业级前端应用 UI 开发中的实践
22 0
浅谈响应式编程在企业级前端应用 UI 开发中的实践
|
2月前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
15 0
|
2月前
|
XML 存储 数据格式
SAP UI5 控件 customData 属性的应用介绍
SAP UI5 控件 customData 属性的应用介绍
33 0
|
3月前
|
Web App开发 前端开发 JavaScript
乱花渐欲迷人眼 - 让 SAP UI5 应用的日志输出不再素面朝天
乱花渐欲迷人眼 - 让 SAP UI5 应用的日志输出不再素面朝天
48 0
|
3月前
让 SAP UI5 应用的日志打印变得五彩缤纷试读版
让 SAP UI5 应用的日志打印变得五彩缤纷试读版
97 2
|
7天前
|
机器学习/深度学习 人工智能 自然语言处理
【AI大模型应用开发】3.2 RAG实战 - RAG应用+UI实现加载本地文件并对话
【AI大模型应用开发】3.2 RAG实战 - RAG应用+UI实现加载本地文件并对话
24 0
|
23天前
element-ui中Form表单使用自定义验证规则
element-ui中Form表单使用自定义验证规则
10 0
|
23天前
关于 SAP ABAP OData 服务如何实现 Deep Insert 场景 - SAP 应用的标准行为试读版
关于 SAP ABAP OData 服务如何实现 Deep Insert 场景 - SAP 应用的标准行为试读版
16 1
|
2月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
29 0
|
2月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
17 0

热门文章

最新文章