SAP UI5 responsiveLayout和responsiveGridLayout的区别

SAP UI5 responsiveLayout和responsiveGridLayout的区别

这条信息的提示字段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控件。


SAP UI5 responsiveLayout和responsiveGridLayout的区别

SAP UI5 responsiveLayout和responsiveGridLayout的区别

    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上。

上一篇:SAP UI5应用入口App.controller.js是如何被UI5框架加载的?


下一篇:用纯CSS实现3D立方体效果