SAPUI5 (05) - 主题 (Theming)

前面我们的示例都是在 Bootstrap 中通过申明 data-sap-ui-theme="sap_bluecrystal" 设置页面的主题为 Blue crystal，翻译为中文叫蓝色水晶，听起来还是不错的名称。那么，SAPUI5 提供了哪些预设的主题呢？

本篇就通过一个小例子，了解这些主题，顺便复习一下 控件如何共用 Event handler，复习下 Grid layout。开发人员也可以自定义主题，这个在企业真实的开发中用的到，因为每个企业都会追求独特性。

SAPUI5 主题和设置方法

SAPUI5 默认提供了以下主题：

• Blue crystal
• Platium
• Gold Reflection
• High Contast Black
• Belize: 这个是最新的
• ...

applyTheme 方法

设置主题的方法一是在 Bootstrap 中声明，方法二是通过 core 的 applyTheme()方法设置：

sap.ui.getCore().applyTheme(sThemeName, sThemeBaseUrl?)

applyTheme() 的参数是一个字符串，比如 sap_bluecrystal 代表 Blue Crystal 主题。Theme 设置比较简单，直接贴上代码。

我们看看界面效果，个人觉得还是跟着 SAP 的潮流。最新的是 Belize，是 SAP 主打的界面主题。

Blue crystal 主题：

Blue crystal Theme

Platium 主题：

Platium Theme

Gold reflection 主题：

Gold reflection theme

High contrast black 主题：

High contrast black Theme

参考资料

Belize will be the new BlueCrystal