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

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

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



image.png

会触发 SimpleForm.setEditable 方法调用:


image.png


image.png


同理,设置 layout 属性:


image.png

这个 layout 是一个单独的实例:

image.png


addAllToContent:把 SimpleForm 里所有的元素添加到控件里:


image.png

创建帮助文档里提到的 FormContainer:


image.png

然后创建 FormElement:


image.png


image.png

在 form 循环里添加 element:


image.png


image.png

一个 SimpleForm 有一个 form container:

image.png


一个 form container 有4个 form element:


image.png

一个 form element 有一对 label 和 field:



image.png

image.png

看样子是 Layout 实例控制这些数据:


image.png

创建 grid:


image.png


四种尺寸:


image.png

image.png


这里能看到硬编码的 12:


image.png


我代码里设置的 columns = 2:


image.png


所以 span 为 12 / 2 = 6


image.png


default span 的计算值:


image.png

默认值:


image.png

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


image.png


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


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


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


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



相关文章
|
6月前
|
API
在阿里云RPA中,你可以使用"SetForegroundWindow"函数来将SAP控件置顶
【2月更文挑战第28天】 在阿里云RPA中,你可以使用"SetForegroundWindow"函数来将SAP控件置顶
101 1
|
运维 监控 Kubernetes
SAP MTA 里定义 SAP UI5 module 的一个例子
SAP MTA 里定义 SAP UI5 module 的一个例子
|
XML JSON 数据格式
SAP UI5 XML 视图中数据绑定路径语法的难点和易混淆点的专题讲解
SAP UI5 XML 视图中数据绑定路径语法的难点和易混淆点的专题讲解
|
JavaScript 前端开发
SAP UI5 里 FlexBox 控件使用的一个例子
SAP UI5 里 FlexBox 控件使用的一个例子
|
前端开发
关于 SAP UI5 应用 render2 实例异步创建的编码实现(2)
关于 SAP UI5 应用 render2 实例异步创建的编码实现
关于 SAP UI5 应用 render2 实例异步创建的编码实现(1)
关于 SAP UI5 应用 render2 实例异步创建的编码实现
|
XML JavaScript 前端开发
SAP UI5 的数据绑定语法概述
SAP UI5 的数据绑定语法概述
|
XML 数据格式 容器
一个真实的 SAP 标准 UI5 应用的扩展开发项目(Extension Project)分享 - UI5 界面上新增订单创建者字段(2)
一个真实的 SAP 标准 UI5 应用的扩展开发项目(Extension Project)分享 - UI5 界面上新增订单创建者字段
138 0
|
XML 存储 搜索推荐
一个真实的 SAP 标准 UI5 应用的扩展开发项目(Extension Project)分享 - UI5 界面上新增订单创建者字(1)段
一个真实的 SAP 标准 UI5 应用的扩展开发项目(Extension Project)分享 - UI5 界面上新增订单创建者字段
108 0
|
XML JavaScript 前端开发
SAP UI5 响应式表格 sap.m.Table 根据不同宽度的屏幕动态决定显示或隐藏 Column 的实现源代码讲解试读版
SAP UI5 响应式表格 sap.m.Table 根据不同宽度的屏幕动态决定显示或隐藏 Column 的实现源代码讲解试读版
130 0