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

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

默认和自定义构件的示例

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

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

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

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

创建构件 create-a-widget

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

函数/类
描述
渲染
渲染函数为小部件的默认HTML元素返回jQuery对象。 默认的HTML元素应为可聚焦类型。 例如,<a>、<input>和<li>。 返回的元素用作$userControl。 如果$userControl指定上述约束,则AbstractWidget类的函数将按预期工作,否则,某些常用API(集中、单击)需要更改。
getEventMap
返回将HTML事件转换为XFA事件的映射。
{
blur: XFA_EXIT_EVENT,
}
此示例显示该blur是一个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);

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

当自定义构件代码准备就绪时,请使用适用于表单BridgeregisterConfigAPI在脚本引擎中注册该构件。 它将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