SAPUI5 (05) - 主题 (Theming)

阅读原文时间：2021年04月20日阅读：1

前面我们的示例都是在 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 主题：