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

表单(自适应表单和HTML5表单)使 用jQueryBackbone.jsOnderwork.js 库进行外观和脚本编写。 表单还对表单中 的所有交互式元素(如字段和按钮)使用jQuery UI Widgets架构。 此架构使表单开发人员能使用表单中丰富的可用jQuery构件和插件。 您还可以在从用户(如leadDigits/trailDigits限制或实施图片子句)捕获数据时实现表单特定逻辑。 表单开发人员可以创建和使用自定义外观来改进数据捕获体验,使其更易于用户使用。

本文面向对jQuery和jQuery构件有充分认识的开发人员。 它提供对外观框架的洞察,使开发人员能为表单字段创建替代外观。

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

  • 该框架为字段的外观提供了一组选项。 这些选项是键值对,分为两个类别:常用选项和字段类型特定选项。
  • 外观作为合同的一部分,会触发一组事件,如进入和退出。
  • 实现一组函数需要外观。 有些函数是通用的,而有些函数是特定于字段类型函数的。

常用选项

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

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

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

与表单框架的交互

要与表单框架交互,构件会触发一些事件,以使表单脚本能够工作。 如果构件不抛出这些事件,则在该字段的表单中编写的某些脚本将不起作用。

事件由构件触发

事件 描述
XFA_ENTER_事件 只要字段处于焦点,就会触发此事件。 它允许“enter”脚本在字段上运行。 触发事件的语法是
(构件)。_trigger(xfalib.ut.XfaUtil.prototype.XFA_ENTER_事件)
XFA_EXIT_事件 只要用户离开字段,就会触发此事件。 它允许引擎设置字段的值并运行其“退出”脚本。 触发事件的语法是
(构件)。_trigger(xfalib.ut.XfaUtil.prototype.XFA_EXIT_事件)
XFA_CHANGE_事件 触发此事件后,引擎可运行写入字段的“change”脚本。 触发事件的语法是
(构件)。_trigger(xfalib.ut.XfaUtil.prototype.XFA_CHANGE_事件)
XFA_CLICK_事件 单击字段时将触发此事件。 它允许引擎运行写在字段上的“单击”脚本。 触发事件的语法是
(构件)。_trigger(xfalib.ut.XfaUtil.prototype.XFA_CLICK_事件)

由构件实现的API

外观框架调用构件的某些功能,这些功能在自定义构件中实现。 构件必须实现以下功能:

函数 描述
焦点:function() 专注于现场。
单击:function() 将焦点放在字段上并调用XFA_CLICK_事件。

markError:function(errorMessage, errorType)
errorMessage
:表示 error
errorType的字符串:字符串("warning"/"error")

注意:仅适用于HTML5表单。

向构件发送错误消息和错误类型。 该构件显示错误。

clearError:function()

注意:仅适用于HTML5表单。

如果字段中的错误已修复,则调用。 构件会隐藏错误。

特定于字段类型的选项

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

文本编辑:文本字段

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

limitLengthToVisibleArea

注意:仅适用于HTML5表单

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

ChoiceList:DropDownList、ListBox

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

可编辑

注意:仅适用于HTML5表单。

如果值为true,则构件中将启用自定义文本输入。
displayValue
要显示的值的数组。
multiselect
如果允许多个选择,则返回true,否则返回false。

API

函数 描述

addItem: function(itemValues)
itemValues:包含display的对象并保存值
{sDisplayVal:<displayValue>, sSaveVal:<save Value>}

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


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

数字编辑:NumericField, DecimalField

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

CheckButton:RadioButton、CheckBox

选项 描述
values

值的数组(开/关/中性)。

它是checkButton不同状态的值数组。 值[0]是状态为ON时的值,值[1]是状态为OFF时的值,
值[2]是状态为NETRAIL时的值。 值数组的长度等于状态选项的值。

允许的状态数。

两个用于自适应表单(打开、关闭),三个用于HTML5表单(打开、关闭、中性)。

状态

元素的当前状态。

两个用于自适应表单(打开、关闭),三个用于HTML5表单(打开、关闭、中性)。

DateTimeEdit:(DateField)

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

在此页面上