表单属性编辑组件
内置表单属性编辑组件是 福昕 PDF SDK Web 版 中预设的一些常用表单属性编辑组件，例如字段名、表单域的可见性，以及外观设置 ( 外框颜色、填充颜色、文本字体和字号) 等。这些内置组件允许用户在无需编写更多代码的情况下，便捷地自定义表单属性对话框布局。
以下根据表单域类别进行分类，列出了 福昕 PDF SDK Web 版 中内置的表单属性编辑组件。
通用表单属性编辑组件
| 组件 | 目标对象 | 关联 API | 变更事件 AnnotUpdatedType/FormFieldPropertyName | 组件类型 | 说明 |
|---|---|---|---|---|---|
form-designer-v2:field-name-editor | PDFFormField | setName getName | DataEvents.formFieldPropertyUpdated/ FormFieldPropertyName.NAME | 输入框 | 编辑表单字段名称 |
form-designer-v2:field-alternate-name-editor | PDFFormField | setAlternateName getAlternateName | DataEvents.formFieldPropertyUpdated FormFieldPropertyName.ALTERNATE_NAME | 输入框 | 编辑表单字段备用名称 |
form-designer-v2:widget-visible-type-selector | Widget | setFlags getFlags | DataEvents.annotationUpdated AnnotUpdatedType.flagsUpdated | 下拉框 | 设置表单域的可见性：可见、隐藏、可见但不可打印、隐藏但可打印 |
form-designer-v2:field-orientation-selector | Widget | setRotation/ getRotation | DataEvents.annotationUpdated AnnotUpdatedType.formWidgetRotationUpdated | 下拉框 | 设置表单域的显示方向 (旋转度数) |
form-designer-v2:field-readonly-checkbox | PDFFormField | setFlags updateFlagByOptions describeFieldFlags isReadonly | DataEvents.formFieldPropertyUpdated FormFieldPropertyName.FLAGS | 复选框 | 设置表单域是否只读 |
form-designer-v2:field-required-checkbox | PDFFormField | setFlags updateFlagByOptions describeFieldFlags isRequired | DataEvents.formFieldPropertyUpdated FormFieldPropertyName.FLAGS | 复选框 | 设置表单域是否必填，仅对 CheckBox、 RadioBox、TextField 有效 |
form-designer-v2:widget-border-color-picker | Widget | setMKBorderColor getMKBorderColor | DataEvents.annotationUpdated AnnotUpdatedType.formWidgetMKBorderColorUpdated | 拾色器 | 设置表单域的边框颜色 |
form-designer-v2:widget-line-style-selector | Widget | setBorderStyle getBorderStyle | DataEvents.annotationUpdated AnnotUpdatedType.borderStyleUpdated | 下拉框 | 设置表单域的外框线型 |
form-designer-v2:widget-fill-color-picker | Widget | setMKFillColor getMKFillColor | DataEvents.annotationUpdated AnnotUpdatedType.formWidgetMKFillColorUpdated | 拾色器 | 设置表单域的填充颜色 |
form-designer-v2:widget-line-thickness-selector | Widget | setBorderWidth getBorderWidth | DataEvents.annotationUpdated AnnotUpdatedType.borderStyleUpdated | 下拉框 | 设置表单域的外框线宽 |
form-designer-v2:widget-text-size-selector | Widget | setTextSize setDefaultAppearance getTextSize getDefaultAppearance | DataEvents.annotationUpdated AnnotUpdatedType.defaultAppearanceUpdated | 可输入的下拉框 | 设置表单域的文本字号 |
form-designer-v2:widget-text-color-picker | Widget | setTextColor setDefaultAppearance getTextColor getDefaultAppearance | DataEvents.annotationUpdated AnnotUpdatedType.defaultAppearanceUpdated | 拾色器 | 设置表单域的文本颜色 |
form-designer-v2:widget-font-selector | Widget | setDefaultAppearance getFont | DataEvents.annotationUpdated AnnotUpdatedType.defaultAppearanceUpdated | 下拉框 | 设置表单域的文本字体 |
form-designer-v2:field-text-direction | Widget | setDirectionRTL getDirectionRTL | DataEvents.annotationUpdated AnnotUpdatedType.formWidgetDirectionRTLUpdated | 单选框 | 设置表单域显示方向 (从左到右/从右到左) |
form-designer-v2:widget-position-properties | Widget | setRect getRect | DataEvents.annotationUpdated AnnotUpdatedType.rectUpdated | 复合面板组件 | 设置表单域位置和大小，允许用户指定单位以及固定宽高来修改位置 |
form-designer-v2:lock-widget-checkbox | Widget | setFlags getFlags | DataEvents.annotationUpdated AnnotUpdatedType.flagsUpdated | 复选框 | 设置表单域是否锁定，锁定后的表单域的所有属性都将不可编辑 |
form-designer-v2:widget-action-creator | Widget | AdditionalAction.addAction | DataEvents.annotationUpdated AnnotUpdatedType.additionalActionDataUpdated | 复合组件 | 允许用户选择不同的触发方式和动作类型，以便为表单域添加新的动作 |
form-designer-v2:widget-action-tree | Widget | 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 | 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 | updateOption | DataEvents.formFieldPropertyUpdated FormFieldPropertyName.CHOICE_OPTION_ITEMS | 输入框 | 向 Combo Box 或 List Box 添加选项，同时也可以编辑已选中的选项 |
form-designer-v2:combo-list-box-add-item-button | PDFFormField | 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 | 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 | deleteOption | ... | 按钮 | 删除当前选中的 Combo Box 或者 List Box 的选项 |
form-designer-v2:combo-list-box-move-item-up-button | PDFFormField | moveOption | ... | 按钮 | 移动当前选中的 Combo Box 或者 List Box 的选项 |
form-designer-v2:combo-list-box-move-item-down-button | PDFFormField | moveOption | ... | 按钮 | 移动当前选中的 Combo Box 或者 List Box 的选项 |
表单组合框、文本框共用属性编辑组件
| 组件 | 目标对象 | 关联 API | 变更事件 AnnotUpdatedType FormFieldPropertyName | 组件类型 | 说明 |
|---|---|---|---|---|---|
form-designer-v2:widget-format-category-selector | PDFFormField | 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 | ... | ... | 复合组件 | 编辑 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 | setValidateAction getValidateActionInfo | DataEvents.formFieldPropertyUpdated FormFieldPropertyName.VALIDATE_ACTION | 复合组件 | 配置 Text Field 和 Combo Box 的校验规则 |
form-designer-v2:calculate-action-editor | PDFFormField | setCalculateAction getCalculateActionInfo | DataEvents.formFieldPropertyUpdated FormFieldPropertyName.CALCULATE_ACTION | 复合组件 | 配置 Text Field 和 Combo Box 的计算规则 |
表单单选框、复选框共用属性编辑组件
| 组件 | 目标对象 | 关联 API | 变更事件 AnnotUpdatedType FormFieldPropertyName | 组件类型 | 说明 |
|---|---|---|---|---|---|
form-designer-v2:normal-caption-selector | Widget | setNormalCaption getNormalCaption | DataEvents.annotationUpdated AnnotUpdatedType.formWidgetNormalCaptionUpdated | 下拉框 | 设置 Radio Button 和 Check Box 的按钮样式 |
form-designer-v2:export-value-editor | Widget | setExportValue getExportValue | DataEvents.annotationUpdated AnnotUpdatedType.formWidgetExportValueUpdated | 输入框 | 设置 Radio Button 和 Check Box 的导出值 |
form-designer-v2:checked-by-default-checkbox | PDFFormField | setCheckedByDefault isCheckedByDefault | DataEvents.formFieldPropertyUpdated FormFieldPropertyName.CHECKED_BY_DEFAULT | 复选框 | 设置 Radio Button 和 Check Box 是否默认被选中 |
表单按钮属性编辑组件
| 组件 | 目标对象 | 关联 API | 变更事件 AnnotUpdatedType FormFieldPropertyName | 组件类型 | 说明 |
|---|---|---|---|---|---|
form-designer-v2:push-button-layout-selector | Widget | setIconCaptionRelation getIconCaptionRelation | DataEvents.annotationUpdated AnnotUpdatedType.formWidgetIconCaptionRelationUpdated | 下拉框 | 设置 Push Button 的图标和文字的显示布局 |
form-designer-v2:push-button-show-icon-fit-dialog-button | Widget | setIconFitOptions getIconFitOptions | - | 按钮 | 点击后打开 form-designer-v2:icon-fit-dialog 对话框 |
form-designer-v2:icon-fit-dialog | Widget | setIconFitOptions getIconFitOptions | - | 对话框 | 设置 Push Button 的图标缩放方式 |
form-designer-v2:push-button-behavior-selector | Widget | setHighlightingMode getHighlightingMode | DataEvents.annotationUpdated AnnotUpdatedType.formWidgetHighlightingModeUpdated | 下拉框 | 设置 Push Button 在鼠标按下后的高亮模式 |
form-designer-v2:push-button-caption-editor | Widget | 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 | 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 | - | - | 选择框 | 和 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 | setAlignment getAlignment | DataEvents.annotationUpdated AnnotUpdatedType.formWidgetAlignmentUpdated | 下拉框 | 设置 Text Field 的文本对齐方式 |
form-designer-v2:text-field-default-value-editor | PDFFormField | setDefaultValue getDefaultValue | DataEvents.formFieldPropertyUpdated FormFieldPropertyName.DEFAULT_VALUE | 输入框 | 设置 Text Field 的默认值 |
form-designer-v2:text-field-scroll-long-text-checkbox | PDFFormField | describeFieldFlags updateFlagByOptions setFlags getFlags | DataEvents.formFieldPropertyUpdated FormFieldPropertyName.FLAGS | 复选框 | 滚动显示长文本：当 Text Field 字号设置为固定数值，并且内容长度超出文本框大小时，是否需要通过移动光标自动滚动文本内容以显示全部文本 |
form-designer-v2:text-field-max-length-editor | PDFFormField | describeFieldFlags updateFlagByOptions setFlags getFlags | DataEvents.formFieldPropertyUpdated FormFieldPropertyName.FLAGS | 复选框 + 输入框 | 设置是否对 Text Field 的文本长度进行限制，并可以设定最大长度限制 |
form-designer-v2:text-field-password-checkbox | PDFFormField | describeFieldFlags updateFlagByOptions setFlags getFlags | DataEvents.formFieldPropertyUpdated FormFieldPropertyName.FLAGS | 复选框 | 设置 Text Field 是否为密码框。开启此项后，不允许设置拼写检查、文本组合以及多行输入 |
form-designer-v2:text-field-check-spelling | PDFFormField | describeFieldFlags updateFlagByOptions setFlags getFlags | DataEvents.formFieldPropertyUpdated FormFieldPropertyName.FLAGS | 复选框 | 设置 Text Field 是否开启拼写检查。开启此项后，不允许设置为密码框 |
form-designer-v2:text-field-comb-of-editor | PDFFormField | describeFieldFlags updateFlagByOptions setFlags getFlags | DataEvents.formFieldPropertyUpdated FormFieldPropertyName.FLAGS | 复选框 + 输入框 | 设置 Text Field 为组合输入框，并设定组合的字符数。开启此项后，其他项将不可用，包括滚动显示长文本、限制文本长度、密码框、拼写检查以及多行输入 |
form-designer-v2:text-field-multiline-checkbox | PDFFormField | describeFieldFlags updateFlagByOptions setFlags getFlags | DataEvents.formFieldPropertyUpdated FormFieldPropertyName.FLAGS | 复选框 + 输入框 | 设置 Text Field 为多行输入框。开启此项后，Text Field 将不能设置为密码框和多行输入框 |
表单组合框属性编辑组件
| 组件 | 目标对象 | 关联 API | 变更事件 AnnotUpdatedType FormFieldPropertyName | 组件类型 | 说明 |
|---|---|---|---|---|---|
form-designer-v2:combo-box-edit-checkbox | PDFFormField | updateFlagByOptions | DataEvents.formFieldPropertyUpdated FormFieldPropertyName.FLAGS | 复选框 | 设置 Combo Box 是否允许编辑 |
表单列表框属性编辑组件
| 组件 | 目标对象 | 关联 API | 变更事件 AnnotUpdatedType FormFieldPropertyName | 组件类型 | 说明 |
|---|---|---|---|---|---|
form-designer-v2:list-box-multille-selection-checkbox | PDFFormField | updateFlagByOptions | DataEvents.formFieldPropertyUpdated FormFieldPropertyName.FLAGS | 复选框 | 设置 List Box 是否允许多选 |
表单单选框属性编辑组件
| 组件 | 目标对象 | 关联 API | 变更事件 AnnotUpdatedType FormFieldPropertyName | 组件类型 | 说明 |
|---|---|---|---|---|---|
form-designer-v2:radio-button-unison-checkbox | PDFFormField | updateFlagByOptions describeFieldFlags | DataEvents.formFieldPropertyUpdated FormFieldPropertyName.FLAGS | 复选框 | 设置 Radio Button 是否同时选中具有相同名称和值的单选框 |
表单签名属性编辑组件
| 组件 | 目标对象 | 关联 API | 变更事件 AnnotUpdatedType FormFieldPropertyName | 组件类型 | 说明 |
|---|---|---|---|---|---|
form-designer-v2:signed-action-editor | PDFSignature | setMDPAction getMDPAction | DataEvents.formFieldPropertyUpdated FormFieldPropertyName.SIGNATURE_MDP_ACTION | 复合组件 | 编辑签名字段的 MDP 配置 |
基于以上内置表单属性编辑组件，开发者能够快速地实现定制表单属性编辑的用户界面布局。为了帮助您更好地理解，您可以参考以下示例来获取更多信息： /examples/UIExtension/form-properties-editor/index.html。
版本兼容性
最低支持版本：福昕 PDF SDK Web 版 11.0.0