3.5.2.1.19. 表单

在线示例

Form 被用于多个实体属性的联合显示和编辑。它是一个类似于GridLayout的简单容器，可以有一定数量的嵌套列，嵌套字段的类型在 XML 中以声明方式定义，字段的标题位于字段的左侧。与 GridLayout 的主要区别在于 Form 能够将所有嵌套字段绑定到一个数据容器中。

从平台版本 7.0 开始，生成的编辑界面默认使用 Form 代替FieldGroup。

gui Form 1

该组件对应的 XML 名称：form

下面是在界面 XML 描述中定义一组字段的示例：

  1. <data>
  2.     <instance id="orderDc"
  3.               class="com.company.sales.entity.Order"
  4.               view="order-edit">
  5.         <loader/>
  6.     </instance>
  7. </data>
  8. <layout expand="editActions" spacing="true">
  9.     <form id="form" dataContainer="orderDc">
  10.         <dateField property="date"/>
  11.         <textField property="amount"/>
  12.         <pickerField property="customer"/>
  13.     </form>
  14. </layout>

在上面的例子中，data 上下文定义了一个 orderDc 数据容器，它包含 Order 实体的单个实例。数据容器在 form 组件的 dataContainer 属性中指定。嵌套元素指的是需要在组件中显示的实体属性。它们会根据属性数据类型自动类型化。

form 的属性：

  • childrenCaptionWidth – 为所有嵌套列及其子元素指定固定标题宽度。设置 -1 使用自动大小。
  • captionPosition - 定义字段的标题位置：TOP 或 LEFT。

form 的元素：

  • column – 可选元素，允许将字段放置在多列。为此，嵌套字段不应该直接放在 form 元素中，而应放在 column 中。例如：
  1. <form id="form" dataContainer="orderDc">
  2.     <column width="250px">
  3.         <dateField property="date"/>
  4.         <textField property="amount"/>
  5.     </column>
  6.     <column width="400px">
  7.         <pickerField property="customer"/>
  8.         <textArea property="info"/>
  9.     </column>
  10. </form>

在这种情况下，字段将排列成两列; 第一列所有字段的宽度为 250px，第二列所有字段的宽度为 400px。

column 的属性：

  • id – 一个可选的列标识符，允许在界面扩展时引用它。
  • width – 指定列的字段宽度。默认情况下，字段的宽度为 200px。在此属性中，可以以像素为单位指定宽度，也可以以列的水平宽度的百分比指定宽度。
  • childrenCaptionWidth – 为嵌套字段指定固定的标题宽度。设置 -1 使用自动大小。

Form 接口的方法：

  • add() - 允许在运行时向 Form 添加一个或多个字段。它接受一个 Component 实例作为参数，也可以通过添加 column 和 row 索引来定义新字段的位置。

框架不会为使用编程方式添加的组件指定数据容器，在这种情况下，使用 setValueSource() 方法进行数据绑定。

示例：

  1. <data>
  2.     <instance id="container"/>
  3. </data>
  4. <layout>
  5.     <form id="form"/>
  6. </layout>
  1. @Inject
  2. private KeyValueContainer container;
  3. @Inject
  4. private Form form;
  6. @Subscribe
  7. protected void onInit(InitEvent event) {
  8.     Field fooField = (Field) uiComponentsGenerator.generate(
  9.             new ComponentGenerationContext(container.getEntityMetaClass(), "foo"));
  10.     fooField.setCaption("Foo");
  11.     fooField.setValueSource(new ContainerValueSource<>(container, "foo"));
  12.     form.add(fooField);
  13. }
form 的属性

align - box.expandRatio - caption - captionAsHtml - captionPosition - childrenCaptionWidth - colspan - contextHelpText - contextHelpTextHtmlEnabled - css - dataContainer - description - descriptionAsHtml - editable - enable - height - icon - id - responsive - rowspan - stylename - visible - width
column 的属性

childrenCaptionWidth - id - width
API

add