SAPUI5开发01_04-Controls

最新推荐文章于 2025-05-23 07:31:20 发布

SAP扫地僧

最新推荐文章于 2025-05-23 07:31:20 发布

阅读量418

点赞数 1

分类专栏： SAPUI5 文章标签： ui javascript 前端

本文链接：https://blog.csdn.net/wtxhai/article/details/129613667

版权

SAPUI5 专栏收录该内容

4 篇文章

订阅专栏

本文档介绍了SAPUI5中开发自定义控件的准则，包括API设计、性能优化和一致性考虑。强调了API的不可逆性、命名规范以及默认值的重要性，还提到了如何合理利用已有控件以避免性能损失。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

SAPUI5控制开发指南

开发SAPUI5控件的内容开发人员应遵循概述的指导方针(大纲) 下面是关于API、行为和主题/CSS的。

一般备注

保持简单！将为新控件创建的实体数量保持在最低限度。
重用是好的，但要仔细比较重用控件需要多少功能，以及对性能的影响有多大。例如，如果控件需要一个可点击的区域，你可以简单地实现onclick并检查点击来自哪里-这对性能没有影响。只有当您需要更多功能时，才应该考虑实例化和聚合。例如，您可以使用Button控件并使用其按下事件，但这会降低性能。

API

对于API，适用以下指南：
● 第一次使用正确的API，以后将无法更改（兼容性）。
● 控件名称以大写字母开头，并使用CamelCase作为连接词。
● 属性、事件、聚合、关联、方法和参数名称以小写字母开头，也使用camelCase。
● 不要对API参数使用匈牙利符号，因为它们的类型在JSDoc中有文档记录。
● 为财产提供合理的默认值。考虑一下最频繁的用例。
● 让块元素自动填充可用宽度，而不是显式地将“100%”设置为默认宽度。
● 可编辑和启用是两个不同的财产。“未启用”控件不在焦点选项卡链中。
● 检查类似的控件以获得公共API的一致命名和建模。
● 用于文本输入的控件具有值属性。具有一个子控件通用区域的容器控件具有1…n内容聚合。如果子控件不是泛型控件，但具有特定的语义、排列或类型，则应相应地选择名称（“items”、“buttons”…）。
● 当存在一个最重要的聚合时，应将其标记为默认聚合；这便于在XMLViews中使用。
● 由于数据绑定支持和XMLViews中的更容易使用，财产、关联和聚合应该优先于API方法。
● 请确保不要破坏XMLViews中的使用；例如，sap.ui.core/object和sap.ui.core/any等类型不能用于强制财产。
● 注意初始依赖关系。例如，Input控件不应该总是加载表库，因为某些输入可能在某些用户交互后显示值帮助表

实例代码

<!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.ui.commons,sap.m,sap.ui.layout"
				data-sap-ui-theme="sap_bluecrystal">
		</script>
		<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->

		<script>
			//Create a simple vertical layout with fixed width
			var oLayout2 = new sap.ui.layout.VerticalLayout("Layout2",{
				width:"900px",
				content:[
					new sap.ui.commons.Slider({Value:25,tooltip:"Slider tooltip",width:"300px"}),
					new sap.ui.commons.TextArea({value:"This is a text.It will show some information for your accoint",width:"300px",height:"150px"}),
					new sap.ui.commons.RatingIndicator({value:4}),
					new sap.ui.commons.CheckBox({text:"Test"})
				]
			});
			//attact it to some element in the page
			oLayout2.placeAt("content");
		</script>

	</head>
	<body class="sapUiBody" role="application">
		<div id="content"></div>
	</body>
</html>