# # 表单属性编辑组件

内置表单属性编辑组件是 Foxit PDF SDK for Web 中预设的一些常用表单属性编辑组件，例如字段名、表单域的可见性，以及外观设置 (外框颜色、填充颜色、文本字体和字号) 等。这些内置组件允许用户在无需编写更多代码的情况下，便捷地自定义表单属性对话框布局。

以下根据表单域类别进行分类，列出了 Foxit PDF SDK for Web 中内置的表单属性编辑组件。

## # 通用表单属性编辑组件

组件 | 目标对象 | 关联 API | 变更事件 AnnotUpdatedType /FormFieldPropertyName | 组件类型 | 说明
--- | --- | --- | --- | --- | ---
`form-designer-v2:field-name-editor` | PDFFormField (opens new window) | `setName` / `getName` | `DataEvents.formFieldPropertyUpdated`/ `FormFieldPropertyName.NAME` | 输入框 | 编辑表单字段名称
`form-designer-v2:field-alternate-name-editor` | PDFFormField (opens new window) | `setAlternateName` / `getAlternateName` | `DataEvents.formFieldPropertyUpdated` / `FormFieldPropertyName.ALTERNATE_NAME` | 输入框 | 编辑表单字段备用名称
`form-designer-v2:widget-visible-type-selector` | Widget (opens new window) | `setFlags` / `getFlags` | `DataEvents.annotationUpdated` /`AnnotUpdatedType.flagsUpdated` | 下拉框 | 设置表单域的可见性：可见、隐藏、可见但不可打印、隐藏但可打印
`form-designer-v2:field-orientation-selector` | Widget (opens new window) | `setRotation`/ `getRotation` | `DataEvents.annotationUpdated` / `AnnotUpdatedType.formWidgetRotationUpdated` | 下拉框 | 设置表单域的显示方向 (旋转度数)
`form-designer-v2:field-readonly-checkbox` | PDFFormField (opens new window) | `setFlags` / `updateFlagByOptions` /`describeFieldFlags` / `isReadonly` | `DataEvents.formFieldPropertyUpdated` / `FormFieldPropertyName.FLAGS` | 复选框 | 设置表单域是否只读
`form-designer-v2:field-required-checkbox` | PDFFormField (opens new window) | `setFlags` / `updateFlagByOptions` /`describeFieldFlags` / `isRequired` | `DataEvents.formFieldPropertyUpdated` / `FormFieldPropertyName.FLAGS` | 复选框 | 设置表单域是否必填，仅对 CheckBox、 RadioBox、TextField 有效
`form-designer-v2:widget-border-color-picker` | Widget (opens new window) | `setMKBorderColor` / `getMKBorderColor` | `DataEvents.annotationUpdated` / `AnnotUpdatedType.formWidgetMKBorderColorUpdated` | 拾色器 | 设置表单域的边框颜色
`form-designer-v2:widget-line-style-selector` | Widget (opens new window) | `setBorderStyle` / `getBorderStyle` | `DataEvents.annotationUpdated` / `AnnotUpdatedType.borderStyleUpdated` | 下拉框 | 设置表单域的外框线型
`form-designer-v2:widget-fill-color-picker` | Widget (opens new window) | `setMKFillColor` / `getMKFillColor` | `DataEvents.annotationUpdated` / `AnnotUpdatedType.formWidgetMKFillColorUpdated` | 拾色器 | 设置表单域的填充颜色
`form-designer-v2:widget-line-thickness-selector` | Widget (opens new window) | `setBorderWidth` / `getBorderWidth` | `DataEvents.annotationUpdated` / `AnnotUpdatedType.borderStyleUpdated` | 下拉框 | 设置表单域的外框线宽
`form-designer-v2:widget-text-size-selector` | Widget (opens new window) | `setTextSize` / `setDefaultAppearance` / `getTextSize` / `getDefaultAppearance` | `DataEvents.annotationUpdated` / `AnnotUpdatedType.defaultAppearanceUpdated` | 可输入的下拉框 | 设置表单域的文本字号
`form-designer-v2:widget-text-color-picker` | Widget (opens new window) | `setTextColor` / `setDefaultAppearance` / `getTextColor` / `getDefaultAppearance` | `DataEvents.annotationUpdated` / `AnnotUpdatedType.defaultAppearanceUpdated` | 拾色器 | 设置表单域的文本颜色
`form-designer-v2:widget-font-selector` | Widget (opens new window) | `setDefaultAppearance` / `getFont` | `DataEvents.annotationUpdated` / `AnnotUpdatedType.defaultAppearanceUpdated` | 下拉框 | 设置表单域的文本字体
`form-designer-v2:field-text-direction` | Widget (opens new window) | `setDirectionRTL` / `getDirectionRTL` | `DataEvents.annotationUpdated` / `AnnotUpdatedType.formWidgetDirectionRTLUpdated` | 单选框 | 设置表单域显示方向 (从左到右/从右到左)
`form-designer-v2:widget-position-properties` | Widget (opens new window) | `setRect` / `getRect` | `DataEvents.annotationUpdated` / `AnnotUpdatedType.rectUpdated` | 复合面板组件 | 设置表单域位置和大小，允许用户指定单位以及固定宽高来修改位置
`form-designer-v2:lock-widget-checkbox` | Widget (opens new window) | `setFlags` / `getFlags` | `DataEvents.annotationUpdated` / `AnnotUpdatedType.flagsUpdated` | 复选框 | 设置表单域是否锁定，锁定后的表单域的所有属性都将不可编辑
`form-designer-v2:widget-action-creator` | Widget (opens new window) | `AdditionalAction.addAction` | `DataEvents.annotationUpdated` / `AnnotUpdatedType.additionalActionDataUpdated` | 复合组件 | 允许用户选择不同的触发方式和动作类型，以便为表单域添加新的动作
`form-designer-v2:widget-action-tree` | Widget (opens new window) | `moveActionOrder` / `updateAction` / `AdditionalAction.updateActionData` / `removeAction` / `AdditionalAction.removeAction` | `DataEvents.annotationUpdated` / `AnnotUpdatedType.actionDataUpdated` / `AnnotUpdatedType.additionalActionDataUpdated` | 复合组件 | 展示表单域的动作列表，并允许用户对选中的动作进行移动、编辑和删除操作

## # 表单组合框、列表框共用属性编辑组件

组件 | 目标对象 | 关联 API | 变更事件 AnnotUpdatedType /FormFieldPropertyName | 组件类型 | 说明
--- | --- | --- | --- | --- | ---
`form-designer-v2:combo-list-box-item-list-selector` | PDFFormField (opens new window) | `setOptions` / `deleteOptions` / `insertOption` / `addOption` / `updateOption` / `getOptionsSize` / `moveOption` / `selectOption` | `DataEvents.formFieldPropertyUpdated`/ `FormFieldPropertyName.CHOICE_OPTION_ITEMS` | 列表框 | 展示 Combo Box 或者 List Box 的选项列表，也可以设置当前选中项。配合 `form-designer-v2:combo-list-box-item-editor`，`form-designer-v2:combo-list-box-add-item-button`，`form-designer-v2:combo-list-box-export-value-editor`， `form-designer-v2:combo-list-box-delete-item-button`，`form-designer-v2:combo-list-box-move-item-up-button`,`form-designer-v2:combo-list-box-move-item-down-button` 组件使用，可以编辑、添加、删除、移动 Combo Box 或者 List Box 的选项
`form-designer-v2:combo-list-box-item-editor` | PDFFormField (opens new window) | `updateOption` | `DataEvents.formFieldPropertyUpdated`/ `FormFieldPropertyName.CHOICE_OPTION_ITEMS` | 输入框 | 向 Combo Box 或 List Box 添加选项，同时也可以编辑已选中的选项
`form-designer-v2:combo-list-box-add-item-button` | PDFFormField (opens new window) | `addOption` | ... | 按钮 | 向 Combo Box 或 List Box 添加选项， 需要配合 `form-designer-v2:combo-list-box-item-editor` 和 `form-designer-v2:combo-list-box-export-value-editor` 组件使用
`form-designer-v2:combo-list-box-export-value-editor` | PDFFormField (opens new window) | `addOption` / `updateOption` | ... | 输入框 | 设置 Combo Box 或者 List Box 选项的导出值， 需要配合 `form-designer-v2:combo-list-box-item-editor` 和 `form-designer-v2:combo-list-box-add-item-button` 组件使用
`form-designer-v2:combo-list-box-delete-item-button` | PDFFormField (opens new window) | `deleteOption` | ... | 按钮 | 删除当前选中的 Combo Box 或者 List Box 的选项
`form-designer-v2:combo-list-box-move-item-up-button` | PDFFormField (opens new window) | `moveOption` | ... | 按钮 | 移动当前选中的 Combo Box 或者 List Box 的选项
`form-designer-v2:combo-list-box-move-item-down-button` | PDFFormField (opens new window) | `moveOption` | ... | 按钮 | 移动当前选中的 Combo Box 或者 List Box 的选项

## # 表单组合框、文本框共用属性编辑组件

组件 | 目标对象 | 关联 API | 变更事件 AnnotUpdatedType /FormFieldPropertyName | 组件类型 | 说明
--- | --- | --- | --- | --- | ---
`form-designer-v2:widget-format-category-selector` | PDFFormField (opens new window) | `setFormatAction` / `removeFormatAction` / `getFormatActionInfo` | `DataEvents.formFieldPropertyUpdated`/ `FormFieldPropertyName.FORMAT_ACTION` | 下拉框 | 设置 Text Field 和 Combo Box 的显示格式， 需要 `form-designer-v2:custom-format-options`, `form-designer-v2:number-format-options`, `form-designer-v2:date-format-options`, `form-designer-v2:percentage-format-options`, `form-designer-v2:special-format-options`, `form-designer-v2:time-format-options` 配合使用
`form-designer-v2:custom-format-options` `form-designer-v2:number-format-options` `form-designer-v2:date-format-options` `form-designer-v2:percentage-format-options` `form-designer-v2:special-format-options` `form-designer-v2:time-format-options` | PDFFormField (opens new window) | ... | ... | 复合组件 | 编辑 Text Field 和 Combo Box 的不同显示格式的详细配置。这些组件的显示或隐藏需要根据 `form-designer-v2:widget-format-category-selector` 所选的格式类型进行控制
`form-designer-v2:widget-format-category-tip` | - | - | - | 静态文本 | 根据 `form-designer-v2:widget-format-category-selector` 所选的格式类型显示不同的提示信息
`form-designer-v2:validation-action-editor` | PDFFormField (opens new window) | `setValidateAction` / `getValidateActionInfo` | `DataEvents.formFieldPropertyUpdated`/ `FormFieldPropertyName.VALIDATE_ACTION` | 复合组件 | 配置 Text Field 和 Combo Box 的校验规则
`form-designer-v2:calculate-action-editor` | PDFFormField (opens new window) | `setCalculateAction` / `getCalculateActionInfo` | `DataEvents.formFieldPropertyUpdated`/ `FormFieldPropertyName.CALCULATE_ACTION` | 复合组件 | 配置 Text Field 和 Combo Box 的计算规则

## # 表单单选框、复选框共用属性编辑组件

组件 | 目标对象 | 关联 API | 变更事件 AnnotUpdatedType /FormFieldPropertyName | 组件类型 | 说明
--- | --- | --- | --- | --- | ---
`form-designer-v2:normal-caption-selector` | Widget (opens new window) | `setNormalCaption` / `getNormalCaption` | `DataEvents.annotationUpdated` / `AnnotUpdatedType.formWidgetNormalCaptionUpdated` | 下拉框 | 设置 Radio Button 和 Check Box 的按钮样式
`form-designer-v2:export-value-editor` | Widget (opens new window) | `setExportValue` / `getExportValue` | `DataEvents.annotationUpdated` / `AnnotUpdatedType.formWidgetExportValueUpdated` | 输入框 | 设置 Radio Button 和 Check Box 的导出值
`form-designer-v2:checked-by-default-checkbox` | PDFFormField (opens new window) | `setCheckedByDefault` / `isCheckedByDefault` | `DataEvents.formFieldPropertyUpdated` / `FormFieldPropertyName.CHECKED_BY_DEFAULT` | 复选框 | 设置 Radio Button 和 Check Box 是否默认被选中

## # 表单按钮属性编辑组件

组件 | 目标对象 | 关联 API | 变更事件 AnnotUpdatedType /FormFieldPropertyName | 组件类型 | 说明
--- | --- | --- | --- | --- | ---
`form-designer-v2:push-button-layout-selector` | Widget (opens new window) | `setIconCaptionRelation` / `getIconCaptionRelation` | `DataEvents.annotationUpdated` / `AnnotUpdatedType.formWidgetIconCaptionRelationUpdated` | 下拉框 | 设置 Push Button 的图标和文字的显示布局
`form-designer-v2:push-button-show-icon-fit-dialog-button` | Widget (opens new window) | `setIconFitOptions` / `getIconFitOptions` | - | 按钮 | 点击后打开 `form-designer-v2:icon-fit-dialog` 对话框
`form-designer-v2:icon-fit-dialog` | Widget (opens new window) | `setIconFitOptions` / `getIconFitOptions` | - | 对话框 | 设置 Push Button 的图标缩放方式
`form-designer-v2:push-button-behavior-selector` | Widget (opens new window) | `setHighlightingMode` / `getHighlightingMode` | `DataEvents.annotationUpdated` / `AnnotUpdatedType.formWidgetHighlightingModeUpdated` | 下拉框 | 设置 Push Button 在鼠标按下后的高亮模式
`form-designer-v2:push-button-caption-editor` | Widget (opens new window) | `setMKCaption` / `getMKCaptionOptions` | `DataEvents.annotationUpdated` / `AnnotUpdatedType.formWidgetCaptionUpdated` | 输入框 | 设置 Push Button 在不同状态下显示的文本，其 "状态" 由 `form-designer-v2:push-button-icon-caption-position-selector` 组件决定
`form-designer-v2:push-button-icon-editor` | Widget (opens new window) | `setMKIcon` / `removeMKIcon` / `getMKIcon` / `getMKIconOptions` | `DataEvents.annotationUpdated` / `AnnotUpdatedType.formWidgetIconUpdated` | - | 用于预览和修改 Push Button 不同状态（包括鼠标按下、抬起和移入）下的图标, 其状态由 `form-designer-v2:push-button-icon-caption-position-selector` 组件指定，需要搭配两个组件使用
`form-designer-v2:push-button-icon-caption-position-selector` | Widget (opens new window) | - | - | 选择框 | 和 `form-designer-v2:push-button-caption-editor`、`form-designer-v2:push-button-icon-editor` 组件一起使用，用于指定 Push Button 的不同状态 (包括鼠标按下、抬起和移入)。 `form-designer-v2:push-button-caption-editor`和`form-designer-v2:push-button-icon-editor` 则用于设置对应状态下的文本和图标

## # 表单文本框属性编辑组件

组件 | 目标对象 | 关联 API | 变更事件 AnnotUpdatedType /FormFieldPropertyName | 组件类型 | 说明
--- | --- | --- | --- | --- | ---
`form-designer-v2:text-field-alignment-selector` | Widget (opens new window) | `setAlignment` / `getAlignment` | `DataEvents.annotationUpdated` / `AnnotUpdatedType.formWidgetAlignmentUpdated` | 下拉框 | 设置 Text Field 的文本对齐方式
`form-designer-v2:text-field-default-value-editor` | PDFFormField (opens new window) | `setDefaultValue` / `getDefaultValue` | `DataEvents.formFieldPropertyUpdated`/ `FormFieldPropertyName.DEFAULT_VALUE` | 输入框 | 设置 Text Field 的默认值
`form-designer-v2:text-field-scroll-long-text-checkbox` | PDFFormField (opens new window) | `describeFieldFlags` / `updateFlagByOptions` / `setFlags` / `getFlags` | `DataEvents.formFieldPropertyUpdated`/ `FormFieldPropertyName.FLAGS` | 复选框 | 滚动显示长文本：当 Text Field 字号设置为固定数值，并且内容长度超出文本框大小时，是否需要通过移动光标自动滚动文本内容以显示全部文本
`form-designer-v2:text-field-max-length-editor` | PDFFormField (opens new window) | `describeFieldFlags` / `updateFlagByOptions` / `setFlags` / `getFlags` | `DataEvents.formFieldPropertyUpdated`/ `FormFieldPropertyName.FLAGS` | 复选框 + 输入框 | 设置是否对 Text Field 的文本长度进行限制，并可以设定最大长度限制
`form-designer-v2:text-field-password-checkbox` | PDFFormField (opens new window) | `describeFieldFlags` / `updateFlagByOptions` / `setFlags` / `getFlags` | `DataEvents.formFieldPropertyUpdated`/ `FormFieldPropertyName.FLAGS` | 复选框 | 设置 Text Field 是否为密码框。开启此项后，不允许设置拼写检查、文本组合以及多行输入
`form-designer-v2:text-field-check-spelling` | PDFFormField (opens new window) | `describeFieldFlags` / `updateFlagByOptions` / `setFlags` / `getFlags` | `DataEvents.formFieldPropertyUpdated`/ `FormFieldPropertyName.FLAGS` | 复选框 | 设置 Text Field 是否开启拼写检查。开启此项后，不允许设置为密码框
`form-designer-v2:text-field-comb-of-editor` | PDFFormField (opens new window) | `describeFieldFlags` / `updateFlagByOptions` / `setFlags` / `getFlags` | `DataEvents.formFieldPropertyUpdated`/ `FormFieldPropertyName.FLAGS` | 复选框 + 输入框 | 设置 Text Field 为组合输入框，并设定组合的字符数。开启此项后，其他项将不可用，包括滚动显示长文本、限制文本长度、密码框、拼写检查以及多行输入
`form-designer-v2:text-field-multiline-checkbox` | PDFFormField (opens new window) | `describeFieldFlags` / `updateFlagByOptions` / `setFlags` / `getFlags` | `DataEvents.formFieldPropertyUpdated`/ `FormFieldPropertyName.FLAGS` | 复选框 + 输入框 | 设置 Text Field 为多行输入框。开启此项后，Text Field 将不能设置为密码框和多行输入框

## # 表单组合框属性编辑组件

组件 | 目标对象 | 关联 API | 变更事件 AnnotUpdatedType /FormFieldPropertyName | 组件类型 | 说明
--- | --- | --- | --- | --- | ---
`form-designer-v2:combo-box-edit-checkbox` | PDFFormField (opens new window) | `updateFlagByOptions` | `DataEvents.formFieldPropertyUpdated`/ `FormFieldPropertyName.FLAGS` | 复选框 | 设置 Combo Box 是否允许编辑

## # 表单列表框属性编辑组件

组件 | 目标对象 | 关联 API | 变更事件 AnnotUpdatedType /FormFieldPropertyName | 组件类型 | 说明
--- | --- | --- | --- | --- | ---
`form-designer-v2:list-box-multille-selection-checkbox` | PDFFormField (opens new window) | `updateFlagByOptions` | `DataEvents.formFieldPropertyUpdated`/ `FormFieldPropertyName.FLAGS` | 复选框 | 设置 List Box 是否允许多选

## # 表单单选框属性编辑组件

组件 | 目标对象 | 关联 API | 变更事件 AnnotUpdatedType /FormFieldPropertyName | 组件类型 | 说明
--- | --- | --- | --- | --- | ---
`form-designer-v2:radio-button-unison-checkbox` | PDFFormField (opens new window) | `updateFlagByOptions` / `describeFieldFlags` | `DataEvents.formFieldPropertyUpdated` / `FormFieldPropertyName.FLAGS` | 复选框 | 设置 Radio Button 是否同时选中具有相同名称和值的单选框

## # 表单签名属性编辑组件

组件 | 目标对象 | 关联 API | 变更事件 AnnotUpdatedType /FormFieldPropertyName | 组件类型 | 说明
--- | --- | --- | --- | --- | ---
`form-designer-v2:signed-action-editor` | PDFSignature (opens new window) | `setMDPAction` / `getMDPAction` | `DataEvents.formFieldPropertyUpdated`/ `FormFieldPropertyName.SIGNATURE_MDP_ACTION` | 复合组件 | 编辑签名字段的 MDP 配置

基于以上内置表单属性编辑组件，开发者能够快速地实现定制表单属性编辑的用户界面布局。为了帮助您更好地理解，您可以参考以下示例来获取更多信息：</examples/UIExtension/form-properties-editor/index.html>。

## # 版本兼容性

最低支持版本：Foxit PDF SDK for Web 11.0.0