SAP UI5 responsiveLayout和responsiveGridLayout的区别

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

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

并给出参考链接：https://sapui5.hana.ondemand.com/#/api/sap.ui.layout.form.ResponsiveLayout

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 levelreturn;} 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的原创文章，请关注公众号"汪子熙":

SAP UI5 responsiveLayout和responsiveGridLayout的区别相关推荐

SAP UI5 StandardListItem和ObjectListItem的区别
StandardListItem的用法: <mvc:View controllerName="sapcp.cf.tutorial.app.controller.View1" ...
如何在 SAP UI5 应用里显示 PDF 文件试读版
一套适合 SAP UI5 初学者循序渐进的学习教程本专栏计划的文章数在 300 篇左右,到 2022年12月23日为止,目前已经更新了 155 篇,专栏完成度为 51.6%,完成度已经超过了一半了. ...
使用 SAP UI5 Smart Chart 控件轻松绘制十数种不同类型的专业图表试读版
一套适合 SAP UI5 初学者循序渐进的学习教程本专栏计划的文章数在 300 篇左右,到 2022年11月19日为止,目前已经更新了 149 篇,专栏完成度为 49.6%. 作者简介 Jerry ...
SAP UI5 应用开发教程的学习目录 - 循序渐进，由浅入深，适合不同水平的 SAP UI5 开发人员
一套适合 SAP UI5 初学者循序渐进的学习教程本专栏计划的文章数在 300 篇左右,到 2023年4月29日为止,目前已经更新了 183 篇,专栏完成度为 61%,完成度已经超过了一半了. 本套 ...
使用 generator-easy-ui5 快速创建 SAP UI5 应用的工程结构
generator-easy-ui5 的 Github 仓库地址: https://github.com/SAP/generator-easy-ui5 该工具是为了简化 SAP UI5 应用创建而设计 ...
SAP UI5 初学者教程之二十五 - 使用代理服务器解决 SAP UI5 应用访问远端 OData 服务的跨域问题试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 初学者教程之一:Hello World SAP UI5 初学者教程之二:SAP UI5 ...
如何在浏览器里开发并运行 SAP UI5 应用
除了 SAP 公司官方支持的 WebIDE,SAP Business Application Studio 这些运行在浏览器端的开发工具,可以进行 SAP UI5 的开发之外,我们还可以使用 Stac ...
基于 OData 模型和 JSON 模型的 SAP UI5 表格控件行项目的添加和删除实现
这是 Jerry 2021 年的第 62 篇文章,也是汪子熙公众号总共第 339 篇原创文章. 龟虽寿曹操神龟虽寿,犹有竟时:腾蛇乘雾,终为土灰.老骥伏枥,志在千里:烈士暮年,壮心不已.盈缩之期,不但 ...
SAP UI5 里如何让每次视图显示时都执行某方法
原文:SAPUI5: How to Call a Method Every Time a View Is Displayed? 本文介绍每次在 SAPUI5 中显示视图时如何执行方法. 有两种方法可以 ...

SAP UI5 responsiveLayout和responsiveGridLayout的区别

SAP UI5 responsiveLayout和responsiveGridLayout的区别相关推荐

最新文章

热门文章