SAP UI5 responsiveLayout和responsiveGridLayout的区别

164 阅读1分钟

今天我打开我的SAP UI5应用,激活support assistant后,发现一条警告信息:ResponsiveLayout should not be used any longer because of UX requirements

这条信息的提示字段resolution告诉了我正确做法:Use the ResponsiveGridLayout instead

并给出参考链接:sapui5.hana.ondemand.com/#/api/sap.u…

The ResponsiveLayout renders a Form with a responsive layout. Internally the ResponsiveFlowLayout is used. The responsiveness of this layout tries to best use the available space. This means that the order of the FormContainers, labels and fields depends on the available space.

ResponsiveLayout将form渲染成响应式布局,内部实现采用了ResponsiveFlowLayout,这种类型的布局将试图最大化地利用可用页面空间,意味着FormContainers,标签和字段的顺序依赖于可用空间。

On the FormContainers, FormElements, labels and content fields, ResponsiveFlowLayoutData can be used to change the default rendering.

We suggest using the ResponsiveGridLayout instead of this layout because this is easier to consume and brings more stable responsive output.

现在SAP推荐使用ResponsiveGridLayout来替代ResponsiveLayout,因为前者能产生更稳定的响应式布局。

而ResponsiveGridLayout内部使用的是Grid控件。

这个错误是如何被检测出来的呢?

代码如下:

	check: function (oIssueManager, oCoreFacade, oScope) {
				oScope.getElementsByClassName("sap.ui.layout.form.Form")
					.forEach(function (oForm) {
						var oLayout = oForm.getLayout();
						if (oLayout && oLayout.isA("sap.ui.layout.form.ResponsiveLayout")) {
							var oParent = oForm.getParent();
							var sId;
							var sName = "Form";
	
							if (isSimpleForm(oParent)) {
								sId = oParent.getId();
								sName = "SimpleForm";
							} else if (isSmartForm(oParent)) {
								// for SmartForm don't check on Form level
								return;
							} else {
								sId = oForm.getId();
							}
	
							oIssueManager.addIssue({
								severity: Severity.Medium,
								details: sName + " " + sId + " uses ResponsiveLayout.",
								context: {
									id: sId
								}
							});
						}
					});
			},

首先用JavaScript原生DOM API oScope.getElementsByClassName(“sap.ui.layout.form.Form”)拿到所有类为sap.ui.layout.form.Form的标签,然后忽略SmartForm的检测,最后获得form的ID,打印到support Assistant上。

要获取更多Jerry的原创文章,请关注公众号"汪子熙":