SAP UI5 应用指定主题 theme 的几种方式和其优先级

简介: 您可以在引导程序中、使用 URL 参数或使用方法 sap.ui.getCore.applyTheme 等多种方式,来定义 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>

这种方式的优先级最低。


启动 SAPUI5 应用程序时可以使用 URL 参数(例如: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 调度程序将两个服务器合并到一个命名空间中,或者您应该使用 sap 方法设置完整的 URL。 ui.getCore.applyTheme 用于自定义应用程序,如下所述。


第三种方式是,您可以使用 sap.ui.getCore.applyTheme 方法动态切换主题。 应用程序状态不会丢失,并且没有服务器往返(除了加载 CSS,如果没有缓存)。仅交换样式表

相关文章
|
2月前
|
前端开发 编解码 数据格式
浅谈响应式编程在企业级前端应用 UI 开发中的实践
浅谈响应式编程在企业级前端应用 UI 开发中的实践
浅谈响应式编程在企业级前端应用 UI 开发中的实践
|
2月前
|
算法 数据可视化 程序员
【Qt UI】调色板QPalette类在Qt编程中的应用
【Qt UI】调色板QPalette类在Qt编程中的应用
50 0
|
2月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
2月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
|
2月前
|
存储 安全 测试技术
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
|
6天前
|
Android开发 开发者
Android UI设计中,Theme定义了Activity的视觉风格,包括颜色、字体、窗口样式等,定义在`styles.xml`。
【6月更文挑战第26天】Android UI设计中,Theme定义了Activity的视觉风格,包括颜色、字体、窗口样式等,定义在`styles.xml`。要更改主题,首先在该文件中创建新主题,如`MyAppTheme`,覆盖所需属性。然后,在`AndroidManifest.xml`中应用主题至应用或特定Activity。运行时切换主题可通过重新设置并重启Activity实现,或使用`setTheme`和`recreate()`方法。这允许开发者定制界面并与品牌指南匹配,或提供多主题选项。
17 6
|
7天前
|
Android开发 开发者
Android UI中的Theme定义了Activity的视觉风格,包括颜色、字体、窗口样式等。要更改主题
【6月更文挑战第25天】Android UI中的Theme定义了Activity的视觉风格,包括颜色、字体、窗口样式等。要更改主题,首先在`styles.xml`中定义新主题,如`MyAppTheme`,然后在`AndroidManifest.xml`中设置`android:theme`。可应用于全局或特定Activity。运行时切换主题需重置Activity,如通过`setTheme()`和`recreate()`方法。这允许开发者定制界面以匹配品牌或用户偏好。
13 2
|
27天前
IDEA 插件 Material Theme UI收费后 免费的办法
IDEA 插件 Material Theme UI收费后 免费的办法
61 2
|
2月前
|
前端开发 搜索推荐 UED
【Flutter前端技术开发专栏】Flutter中的高级UI组件应用
【4月更文挑战第30天】探索Flutter的高级UI组件,如`TabBar`、`Drawer`、`BottomSheet`,提升应用体验和美观度。使用高级组件能节省开发时间,提供内置交互逻辑和优秀视觉效果。示例代码展示了如何实现底部导航栏、侧边导航和底部弹出菜单。同时,自定义组件允许个性化设计和功能扩展,但也带来性能优化和维护挑战。参考Flutter官方文档和教程,深入学习并有效利用这些组件。
【Flutter前端技术开发专栏】Flutter中的高级UI组件应用
|
2月前
|
JavaScript 前端开发
试读版:如何找出 SAP 标准 Fiori 应用某个按钮点击后执行的 JavaScript 源代码
试读版:如何找出 SAP 标准 Fiori 应用某个按钮点击后执行的 JavaScript 源代码