关于使用 SAP UI5 代码设置应用 theme 的技巧

简介: 关于使用 SAP UI5 代码设置应用 theme 的技巧

我们可以使用下图高亮的这行代码来设置应用的 theme:




sap.ui.getCore().applyTheme("sap_fiori_3");


这个方法使用给定名称应用主题,其具体实现方式是通过加载相应的样式表,这不会中断应用程序的正常执行。


默认情况下,主题文件应位于相对于相应控件库的路径:


[libraryLocation]/themes/[themeName]


可以使用 setThemePath() 方法或 applyTheme() 的第二个参数 sThemeBaseUrl 来配置不同的位置。第二个参数的用法是 setThemePath 的简写,并在内部调用 setThemePath,因此主题位置是已知的。


sThemeBaseUrl 是一个 URL,用于指定所有主题文件的默认位置。此 URL 是控制库文件夹所在的基本文件夹。例如。如果 CSS 文件不是相对于 UI5 的根位置,而是位于类似 http://my.server/myapp/resources/sap/ui/core/themes/my_theme/library.css 的位置,那么 URL需要给出的是:


http://my.server/myapp/resources


然后从该文件夹下面加载所有主题资源 - 除非已注册某个库的不同位置。


如果主题资源不是全部位于此基本位置或它们各自的库中,则必须使用 setThemePath 来配置各个位置。



设置不同 theme 的重要性


如果对比度不足,有视力障碍的人和在不太理想的情况下使用应用程序的人(显示器故障、阳光照射屏幕、窗户反射)可能无法轻松阅读文本。


实施新控件时,请考虑添加对不同主题的支持并检查元素之间的颜色对比。 UI 上显示的不同颜色需要相互之间具有良好的对比度,以便于区分。


SAPUI5 在创建和使用不同的视觉设计(称为主题)时为开发人员提供支持,这些设计可以交替使用和动态切换。 这样,同一个应用程序的外观可能会大不相同,具体取决于用户的设计偏好或可访问性要求。 现有主题可以作为新主题的基础,并且在出现新设计趋势的情况下,可以为所有现有应用程序创建匹配的主题,而无需修改应用程序。 主题处理与应用程序开发分离,并在单独的层中完成。 SAPUI5 库加载所需的 CSS 文件并提供切换主题的方法。



相关文章
|
27天前
|
前端开发 编解码 数据格式
浅谈响应式编程在企业级前端应用 UI 开发中的实践
浅谈响应式编程在企业级前端应用 UI 开发中的实践
22 0
浅谈响应式编程在企业级前端应用 UI 开发中的实践
|
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
|
2月前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
15 0
|
2月前
|
安全 开发者
什么是 SAP ABAP 调试器里的 TRFC Block Sending 设置
什么是 SAP ABAP 调试器里的 TRFC Block Sending 设置
22 0
|
2月前
|
XML 存储 数据格式
SAP UI5 控件 customData 属性的应用介绍
SAP UI5 控件 customData 属性的应用介绍
33 0
|
2月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍
31 0
|
2月前
|
搜索推荐
如何让 SAP UI5 Smart Table 支持多项选择(Multiple-Selection)试读版
如何让 SAP UI5 Smart Table 支持多项选择(Multiple-Selection)试读版
19 0
|
23天前
|
存储
使用 ABAP 代码打印出 SAP CRM 系统里所有维护了 Sales Area 的 business partner id
使用 ABAP 代码打印出 SAP CRM 系统里所有维护了 Sales Area 的 business partner id
21 0
|
2月前
|
开发者 UED
SAP UI5 SmartFilterBar 中 ControlConfiguration Aggregation 的作用介绍
SAP UI5 SmartFilterBar 中 ControlConfiguration Aggregation 的作用介绍
15 0