自适应表单和HTML表单的外观框架5 appearance-framework-for-adaptive-and-html-forms

CAUTION
AEM 6.4已结束扩展支持,本文档将不再更新。 有关更多详细信息,请参阅 技术支助期. 查找支持的版本 此处.

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

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

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

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

常用选项 common-options

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

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

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

与表单框架的交互 interaction-with-forms-framework

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

由小组件触发的事件 events-triggered-by-widget

Event
描述
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 apis-implemented-by-widget

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

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

markError:function(errorMessage, errorType)

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

注意:仅适用于HTML5表单。

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

clearError:function()

注意:仅适用于HTML5表单。

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

特定于字段类型的选项 options-specific-to-type-of-field

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

文本编辑:文本字段 textedit-text-field

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

limitLengthToVisibleArea

注意:仅适用于HTML5表单

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

ChoiceList:DropDownList, ListBox choicelist-dropdownlist-listbox

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

可编辑

注意:仅适用于HTML5表单。

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

API api

函数
描述
addItem: function(itemValues)
itemValues:包含显示和保存值的对象
{sDisplayVal: <displayvalue>, sSaveVal: <save value="">}
将项目添加到列表。
deleteItem :函数(nIndex)
索引:要从列表中删除的项目的索引
从列表中删除选项。
clearItems: function()
清除列表中的所有选项。

数值编辑:NumericField, DecimalField numericedit-numericfield-decimalfield

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

CheckButton:RadioButton、CheckBox checkbutton-radiobutton-checkbox

选项
描述
values

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

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

国家

允许的状态数。

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

状态

元素的当前状态。

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

DateTimeEdit:(DateField) datetimeedit-datefield

选项
描述
天
该字段的本地化天数名称。
个月
该字段的本地化月份名称。
零
数字0的本地化文本。
clearText
用于清除按钮的本地化文本。
recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da