SAPUI5 (05) - 主题 (Theming)

最新推荐文章于 2024-06-26 16:35:44 发布

stone0823

最新推荐文章于 2024-06-26 16:35:44 发布

阅读量5.5k

点赞数

分类专栏： # SAPUI5

本文链接：https://blog.csdn.net/stone0823/article/details/53890377

版权

SAPUI5 专栏收录该内容

41 篇文章 133 订阅

订阅专栏

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