自适应表单和HTML5表单的外观框架

Forms（自适应表单和HTML5表单）使用jQuery、Backbone.js和Undersore.js库进行外观和脚本编写。 表单还使用jQuery UI Widgets​架构来处理表单中的所有交互元素（如字段和按钮）。 此架构使表单开发人员能够在Forms中使用一组丰富的可用jQuery小组件和插件。 您还可以在从用户（如leadDigits/trailDigits限制或实施图片子句）中捕获数据时实施表单特定逻辑。 表单开发人员可以创建并使用自定义设备来改进数据捕获体验，并使其更加用户友好。

本文面向对jQuery和jQuery小组件有充分了解的开发人员。 它提供了对外观框架的分析，并允许开发人员为表单字段创建替代外观。

外观框架依赖于各种选项、事件（触发器）和函数来捕获用户与表单的交互，并响应模型更改以通知最终用户。 此外：

  • 框架提供了一组用于显示字段的选项。 这些选项是键值对，分为两类：常用选项和字段类型特定选项。
  • 作为合同一部分的外观会触发一系列事件，如进入和退出。
  • 实施一组函数时需要显示外观。 某些函数是常用的，而其他函数则特定于字段类型函数。

常用选项

以下是设置的全局选项。 这些选项适用于每个字段。

属性 描述
name 用于在脚本表达式中指定此对象或事件的标识符。 例如，此属性指定主机应用程序的名称。
选定 字段的实际值。
displayValue 将显示字段的此值。
screenReaderText 屏幕Reader使用此值讲述有关该字段的信息。 表单提供值，您可以覆盖该值。
tabIndex 字段在表单的制表符序列中的位置。 仅当要更改表单的默认制表符顺序时，才覆盖tabIndex。
角色 元素的角色，例如“标题”或“表”。
高度 小组件的高度。 以像素为单位指定。
宽度 小组件的宽度。 以像素为单位指定。
访问 用于访问容器对象（如子表单）内容的控件。
paraStyles XFA元素对小组件的para属性。
dir 文本的方向。 可能的值为ltr（从左到右）和rtl（从右到左）。

除了这些选项外，框架还提供了一些其他选项，这些选项会因字段类型而异。 下面列出了特定于字段的选项的详细信息。

与表单框架的交互

为了与表单框架进行交互，小组件会触发一些事件，以使表单脚本正常工作。 如果小组件未引发这些事件，则在该字段的表单中编写的某些脚本将不起作用。

由小组件触发的事件

事件 描述
XFA_ENTER_EVENT 当字段处于焦点时，会触发此事件。 它允许在字段上运行“enter”脚本。 触发事件的语法为
（小组件）。_trigger(xfalib.ut.XfaUtil.prototype.XFA_ENTER_EVENT)
XFA_EXIT_EVENT 每当用户离开字段时，都会触发此事件。 它允许引擎设置字段的值并运行其“退出”脚本。 触发事件的语法为
（小组件）。_trigger(xfalib.ut.XfaUtil.prototype.XFA_EXIT_EVENT)
XFA_CHANGE_EVENT 此事件将触发，以允许引擎运行在字段中编写的“change”脚本。 触发事件的语法为
（小组件）。_trigger(xfalib.ut.XfaUtil.prototype.XFA_CHANGE_EVENT)
XFA_CLICK_EVENT 只要单击字段，就会触发此事件。 它允许引擎运行在字段上编写的“click”脚本。 触发事件的语法为
（小组件）。_trigger(xfalib.ut.XfaUtil.prototype.XFA_CLICK_EVENT)

由小组件实施的API

外观框架会调用在自定义小组件中实施的小组件的某些功能。 小组件必须实施以下功能：

函数 描述
焦点：function() 关注现场。
单击：function() 重点关注字段并调用XFA_CLICK_EVENT。

markError:function(errorMessage， errorType)

errMessage:字符串表示错误
errorType:字符串("warning"/"error")

注意:仅适用于HTML5表单。

 向小组件发送错误消息和错误类型。 小组件会显示错误。

clearError:function()

注意:仅适用于HTML5表单。

 如果字段中的错误已修复，则调用。 小组件可隐藏错误。

特定于字段类型的选项

所有自定义小部件都应符合上述规范。 要使用不同字段的功能，小组件必须符合该特定字段的准则。

文本编辑：文本字段

选项 描述
多线 如果字段支持输入换行符，则返回true；否则返回false。
maxChars 可在字段中输入的最大字符数。

limitLengthToVisibleArea

注意:仅适用于HTML5表单

 指定当文本的宽度超过小组件的宽度时文本字段的行为。

ChoiceList:DropDownList， ListBox

选项 描述
选定
 选定值的数组。
项目
 要显示为选项的对象数组。 每个对象都包含两个属性 —
save:保存、显示的值：值。

可编辑

注意:仅适用于HTML5表单。

 如果值为true，则小组件中会启用自定义文本条目。
displayValue
 要显示的值数组。
多选
 如果允许多个选择，则返回true；否则返回false。

API

函数 描述

addItem: function(itemValues)
itemValues:包含显示和保存值
{sDisplayVal：的对象<displayValue>, sSaveVal:<保存值>}

 将项目添加到列表。
deleteItem:function(nIndex)
nIndex:要从列表中删除的项的索引


 从列表中删除选项。
clearItems: function() 清除列表中的所有选项。

数值编辑：NumericField， DecimalField

选项 描述
dataType 表示字段数据类型（整数/小数）的字符串。
leadDigits 小数中允许的最大前导位数。
fracDigits 小数中允许的最大小数位数。
零 字段区域设置中零的字符串表示形式。
小数 字段区域设置中小数的字符串表示形式。

CheckButton:RadioButton， CheckBox

选项 描述
values

值数组（开/关/中性）。

它是checkButton不同状态的值数组。 values[0]是状态为ON时的值，values[1]是状态为OFF时的值，
values[2]是状态为NETRAME时的值。 值数组的长度等于state选项的值。
国家

允许的状态数。

两个用于自适应表单（开、关），三个用于HTML5表单（开、关、中性）。
状态

元素的当前状态。

两个用于自适应表单（开、关），三个用于HTML5表单（开、关、中性）。

DateTimeEdit:(DateField)

选项 描述
天 该字段的本地化天数名称。
个月 该字段的本地化月份名称。
零 数字0的本地化文本。
clearText 用于清除按钮的本地化文本。

在此页面上