Show Menu
主题×

在HTML5表单中创建自定义外观

您可以将自定义构件插入移动Forms。 您可以扩展现有的jQuery构件,或使用外观框架开发自己的自定义构件。 XFA引擎使用各种构件,有关详 细信息,请参阅自适应和HTML5表单的 “外观框架”。
默认和自定义构件的示例

将自定义构件与HTML5表单集成

创建用户档案 

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

创建构件

HTML5表单提供构件框架的实现,可以扩展该框架以创建新构件。 该实现是一个jQuery 构件abstractWidget ,可扩展以编写新构件。 只有扩展/覆盖下列功能,才能使新构件正常工作。
函数/类 描述
渲染 渲染函数返回构件的默认HTML元素的jQuery对象。 默认的HTML元素应为可聚焦类型。 例如,<a>、<input>和<li>。 返回的元素将用作$userControl。 如果$userControl指定上述约束,则AbstractWidget类的函数将按预期工作,否则一些常用API(焦点,单击)需要更改。
getEventMap 返回将HTML事件转换为XFA事件的映射。 {模糊 :XFA_EXIT_事件 , } 此示例说明模糊是HTML事件,XFA_EXIT_事件是相应的XFA事件。
getOptionsMap 返回一个映射,它提供选项更改时要执行的操作的详细信息。 键是提供给构件的选项,值是检测到该选项发生更改时调用的函数。 该构件为所有常用选项(value和displayValue除外)提供处理函数
getCommitValue 只要将构件的值保存在XFAModel中(例如,在textField的退出事件),构件框架就加载该函数。 实现应返回保存在构件中的值。 该处理函数提供了选项的新值。
showValue 默认情况下,在XFA中输入事件时,将显示字段的rawValue。 调用此函数向用户显示rawValue。
showDisplayValue 默认情况下,在退出事件的XFA中,将显示已格式化字段的Value。 调用此函数向用户显示格式化的Value。
要创建您自己的构件,请在上面创建的用户档案中包含对JavaScript文件的引用,该文件包含被覆盖的函数和新添加的函数。 例如,sliderNumericFieldWidget 是数字字段的 (构件)。 要在标题部分的用户档案中使用小部件,请包括以下行:
window.formBridge.registerConfig("widgetConfig" , widgetConfigObject);

使用XFA脚本引擎注册自定义构件 

在自定义构件代码准备就绪后,使用Form Bridge的API向脚本引擎注 registerConfig 册构 。 它以widgetConfigObject为输入。
window.formBridge.registerConfig("widgetConfig",
        {
        ".<field-identifier>":"<name-of-the-widget>"
        }
    );

widgetConfigObject

构件配置作为JSON对象(键值对的集合)提供,其中键标识字段,值表示要与这些字段一起使用的构件。 示例配置如下:
*{*

*“identifier1” : “customwidgetname”,
“identifier2” : “customwidgetname2”,
..
}*

其中,“identifier”是表示特定字段、特定类型字段集或所有字段的jQuery CSS选择器。 以下列表了不同情况下标识符的值:
标识符类型
标识符
描述
具有名称字段名称的特定字段
标识符:"div.fieldname"
名称为“fieldname”的所有字段都使用构件呈现。
所有类型为“type”的字段(其中类型为NumericField、DateField等。):
标识符:"div.type"
对于Timefield和DateTimeField,类型为文本字段,因为不支持这些字段。
所有字段
标识符:"div.field"