在HTML5表单中创建自定义外观 create-custom-appearances-in-html-forms

Last update: Wed Mar 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主题：
HTML5 Forms

您可以将自定义构件插入到Mobile Forms。您可以扩展现有的jQuery小组件，也可以使用外观框架开发自己的自定义小组件。 XFA引擎使用各种小组件，请参见自适应表单和HTML5表单的外观框架以了解详细信息。

默认小部件和自定义小部件的示例

将自定义构件与HTML5表单集成 integrating-custom-widgets-with-html-forms

创建用户档案 create-a-profile-nbsp

您可以创建配置文件或选择现有配置文件以添加自定义构件。有关创建用户档案的详细信息，请参阅创建自定义配置文件.

HTML5提供了构件框架的一种实现方式，通过扩展这种实现方式可创建新构件。实施是一个jQuery构件 抽象构件 可以扩展以编写新的构件。只有通过扩展/覆盖以下提及的函数，才能使新构件正常工作。

函数/类

描述

渲染

渲染函数为小部件的默认HTML元素返回jQuery对象。默认的HTML元素应为可聚焦类型。例如， <a>， <input>、和 <li>. 返回的元素用作$userControl。如果$userControl指定上述约束，则AbstractWidget类的函数将按预期工作，否则，某些常用API（集中、单击）需要更改。

getEventMap

返回将HTML事件转换为XFA事件的映射。
{
模糊：XFA_EXIT_EVENT，
}
此示例显示模糊是一个HTML事件，而XFA_EXIT_EVENT是相应的XFA事件。

getOptionsMap

返回一个映射，该映射提供更改选项时要执行的操作的详细信息。这些键是提供给构件的选项，值是每当检测到该选项发生更改时调用的函数。小组件为所有常用选项（value和displayValue除外）提供处理程序

getcommitvalue

每当小部件的值保存在XFAModel中（例如，在textField的退出事件中）时，Widget框架就会加载函数。该实施应返回保存在小组件中的值。将为处理程序提供选项的新值。

show值

默认情况下，在XFA输入事件中，显示该字段的rawValue。调用此函数是为了向用户显示rawValue。

showdisplayvalue

默认情况下，在退出事件的XFA中，显示该字段的formattedValue 。调用此函数是为了向用户显示formattedValue。

要创建自己的构件，请在上面创建的配置文件中，包含对JavaScript文件的引用，该文件包含覆盖的函数和新添加的函数。例如， sliderNumericFieldWidget 是数值字段的小部件。要在用户档案中的标题部分中使用构件，请包括以下行：

window.formBridge.registerConfig("widgetConfig" , widgetConfigObject);

当自定义构件代码准备就绪时，请使用在脚本引擎中注册该构件 registerConfigAPI Form Bridge. 它将widgetConfigObject作为输入。

window.formBridge.registerConfig("widgetConfig",
        {
        ".<field-identifier>":"<name-of-the-widget>"
        }
    );

widgetConfigObject widgetconfigobject

构件配置作为JSON对象（键值对的集合）提供，其中键标识字段，值表示用于这些字段的构件。示例配置如下所示：

*{*

*"identifier1" : "customwidgetname",
"identifier2" : "customwidgetname2",
..
}*

其中，“identifier”是一个jQuery CSS选择器，它表示特定字段、特定类型的一组字段或所有字段。下面列出了标识符在不同情况下的值：

标识符类型

标识符

描述

名为fieldname的特定字段

标识符："div.fieldname"

所有名为“fieldname”的字段都使用小组件渲染。

'type'类型的所有字段（其中，类型为NumericField、DateField等）:

标识符： "div.type"

对于Timefield和DateTimeField，类型为textfield，因为这些字段不受支持。

所有字段

标识符： "div.field"

recommendation-more-help

19ffd973-7af2-44d0-84b5-d547b0dffee2

在HTML5表单中创建自定义外观 create-custom-appearances-in-html-forms

将自定义构件与HTML5表单集成 integrating-custom-widgets-with-html-forms

创建用户档案 create-a-profile-nbsp

创建构件 create-a-widget

向XFA脚本引擎注册自定义构件 register-custom-widget-with-xfa-scripting-engine-nbsp

widgetConfigObject widgetconfigobject