SAP UI5 SimpleForm 控件实例的初始化调试

simpleForm 在 XML 视图里定义的 editable 属性:

SAP UI5 SimpleForm 控件实例的初始化调试_第1张图片

会触发 SimpleForm.setEditable 方法调用:

SAP UI5 SimpleForm 控件实例的初始化调试_第2张图片

SAP UI5 SimpleForm 控件实例的初始化调试_第3张图片

同理,设置 layout 属性:
SAP UI5 SimpleForm 控件实例的初始化调试_第4张图片

这个 layout 是一个单独的实例:
SAP UI5 SimpleForm 控件实例的初始化调试_第5张图片

addAllToContent:把 SimpleForm 里所有的元素添加到控件里:
SAP UI5 SimpleForm 控件实例的初始化调试_第6张图片

创建帮助文档里提到的 FormContainer:
SAP UI5 SimpleForm 控件实例的初始化调试_第7张图片

然后创建 FormElement:
SAP UI5 SimpleForm 控件实例的初始化调试_第8张图片

SAP UI5 SimpleForm 控件实例的初始化调试_第9张图片

在 form 循环里添加 element:
SAP UI5 SimpleForm 控件实例的初始化调试_第10张图片

SAP UI5 SimpleForm 控件实例的初始化调试_第11张图片

一个 SimpleForm 有一个 form container:
SAP UI5 SimpleForm 控件实例的初始化调试_第12张图片

一个 form container 有4个 form element:
SAP UI5 SimpleForm 控件实例的初始化调试_第13张图片

一个 form element 有一对 label 和 field:
SAP UI5 SimpleForm 控件实例的初始化调试_第14张图片

SAP UI5 SimpleForm 控件实例的初始化调试_第15张图片

看样子是 Layout 实例控制这些数据:
SAP UI5 SimpleForm 控件实例的初始化调试_第16张图片

创建 grid:
SAP UI5 SimpleForm 控件实例的初始化调试_第17张图片

四种尺寸:
SAP UI5 SimpleForm 控件实例的初始化调试_第18张图片

SAP UI5 SimpleForm 控件实例的初始化调试_第19张图片

这里能看到硬编码的 12:
SAP UI5 SimpleForm 控件实例的初始化调试_第20张图片

我代码里设置的 columns = 2:

SAP UI5 SimpleForm 控件实例的初始化调试_第21张图片

所以 span 为 12 / 2 = 6

SAP UI5 SimpleForm 控件实例的初始化调试_第22张图片

default span 的计算值:
SAP UI5 SimpleForm 控件实例的初始化调试_第23张图片

默认值:
SAP UI5 SimpleForm 控件实例的初始化调试_第24张图片

我们可以看出,一个简单的 SimpleForm,渲染之后,其实生成了总共五层结构:

SAP UI5 SimpleForm 控件实例的初始化调试_第25张图片

ResponsiveGridLayout 控件使用响应式网格呈现表单。在内部,Grid 控件用于渲染。使用此布局,表单以响应式方式呈现。根据可用空间,FormContainer 呈现在一列或不同的列中,标签呈现在与字段相同的行或字段上方。此行为可能会受到此布局控件的属性的影响。

在 FormContainers、标签和内容字段上,可以使用 GridData 更改默认呈现。 FormElements 不支持 GridData。

注意:如果使用 GridData,这可能会导致比默认布局复杂得多的布局。这意味着在某些情况下,对其他内容的计算可能不会带来预期的结果。在这种情况下,应为所有内容控件使用 GridData 以禁用默认行为。

此控件不能单独使用,它只是呈现一个 Form,因此必须使用布局聚合将它分配给一个 Form。

你可能感兴趣的:(SAP UI5 SimpleForm 控件实例的初始化调试)