前面我们的示例都是在 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 设置比较简单，直接贴上代码。
<!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 主题：
Blue crystal Theme
Platium 主题：
Platium Theme
Gold reflection 主题：
Gold reflection theme
High contrast black 主题：
High contrast black Theme
