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: 这个是最新的
…

设置主题：

方法一是在 Bootstrap 中声明，方法二是通过下面的方法进行设置：

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

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

<!DOCTYPE HTML>
<html><head><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/><script src="resources/sap-ui-core.js"id="sap-ui-bootstrap"data-sap-ui-libs="sap.m, sap.ui.layout"data-sap-ui-theme="sap_bluecrystal"></script>       <!-- Application area --><script>function onButtonPressed(oEvent) {var sId = oEvent.getSource().getId();var oCore = sap.ui.getCore();if (sId == "btn1") {oCore.applyTheme("sap_bluecrystal");} else if (sId == "btn2"){oCore.applyTheme("sap_platium");} else if (sId == "btn3") {oCore.applyTheme("sap_goldreflection");} else if (sId == "btn4") {oCore.applyTheme("sap_hcb");}}function display() {var oButton1 = new sap.m.Button("btn1", {text: "Blue Crystal",press: onButtonPressed});var oButton2 = new sap.m.Button("btn2", {text: "Platium",press: onButtonPressed});var oButton3 = new sap.m.Button("btn3", {text: "Gold Reflection",press: onButtonPressed});var oButton4 = new sap.m.Button("btn4", {text: "High Contrast Black",press: onButtonPressed});// Grid layout占页面60%，居中new sap.ui.layout.Grid({width: "60%",position: sap.ui.layout.GridPosition.Center,content: [oButton1, oButton2, oButton3, oButton4]}).placeAt("content");}sap.ui.getCore().attachInit(display);</script></head><body class="sapUiBody sapUiResponsiveMargin" role="application"><div id="content"></div></body>
</html>

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

Blue crystal 主题：

Platium 主题：

Gold reflection 主题：

High contrast black 主题：

参考资料

Belize will be the new BlueCrystal