为自适应表单字段创建自定义外观 create-custom-appearances-for-adaptive-form-fields

创建项目：创建一个Maven项目，该项目生成内容包以在AEM上部署。

扩展现有的构件类：扩展现有的构件类并覆盖所需的类。

创建客户端库：创建clientLib: af.customwidget库并添加所需的JavaScript和CSS文件。

生成并安装项目：生成Maven项目并在AEM上安装生成的内容包。

更新自适应表单：更新自适应表单字段属性以使用自定义外观。

将第三方插件依赖关系包含在项目中。

1. 将第三方或自定义jQuery插件放在jqueryplugin/javascript文件夹中，并将相关的CSS文件放在jqueryplugin/css文件夹中。 有关详细信息，请参阅jqueryplugin/javascript and jqueryplugin/css文件夹下的JS和CSS文件。

2. 修改js.txt和css.txt文件以包含jQuery插件的任何其他JavaScript和CSS文件。

将第三方插件与框架集成，以启用自定义外观框架与jQuery插件之间的交互。 只有在扩展或覆盖以下功能后，新小组件才能正常工作。

根据需要更新integration/javascript文件夹中的JavaScript文件。

• 将文本__widgetName__替换为实际的构件名称。

• 从适当的现成可用构件类扩展构件。 在大多数情况下，它是与要替换的现有构件对应的构件类。 父类名称在多个位置使用，因此建议搜索文件中字符串xfaWidget.textField的所有实例，并将它们替换为使用的实际父类。

• 扩展render方法以提供替代UI。 这是调用jQuery插件以更新UI或交互行为的位置。 render方法应返回用户控制元素。

• 扩展getOptionsMap方法以覆盖由于小部件中的更改而受影响的任何选项设置。 函数将返回一个映射，该映射提供了在更改选项时执行的操作的详细信息。 键是提供给构件的选项，值是检测到选项更改时调用的函数。

• getEventMap方法会将构件触发的事件映射到自适应表单模型所需的事件。 默认值映射默认小组件的标准HTML事件，如果触发了备用事件，则需要更新。

• showDisplayValue和showValue应用display and edit picture子句，可以覆盖为具有替代行为。

• 当发生commit事件时，getCommitValue方法由自适应表单框架调用。 通常，它是退出事件（除了下拉列表、单选按钮和复选框元素，在更改时会发生退出事件）。 有关详细信息，请参阅自适应Forms表达式。

• 模板文件提供了各种方法的实现示例。 删除不进行扩展的方法。

执行以下命令可基于Maven原型创建本地项目：

mvn archetype:generate -DarchetypeRepository=https://repo1.maven.org/maven2/com/adobe/ -DarchetypeGroupId=com.adobe.aemforms -DarchetypeArtifactId=custom-appearance-archetype -DarchetypeVersion=1.0.4

它会提示您为以下参数指定值。
此示例中使用的值以粗体突出显示。

Define value for property 'groupId': com.adobe.afwidgets

Define value for property 'artifactId': customWidgets

Define value for property 'version': 1.0.1-SNAPSHOT

Define value for property 'package': com.adobe.afwidgets

Define value for property 'artifactName': customWidgets

Define value for property 'packageGroup': adobe/customWidgets

Define value for property 'widgetName': numericStepper

导航到customWidgets （为artifactID属性指定的值）目录，然后执行以下命令以生成Eclipse项目：

mvn eclipse:eclipse

打开Eclipse工具并执行以下操作以导入Eclipse项目：

1. 选择​ 文件>导入>将现有项目导入Workspace。

2. 浏览并选择执行archetype:generate命令的文件夹。

3. 单击​ 完成。

   

选择要用于自定义外观的构件。 此示例使用以下数字步进小组件：

https://www.jqueryscript.net/form/User-Friendly-Number-Input-Spinner-with-jQuery-Bootstrap.html

在Eclipse项目中，查看plugin.js文件中的插件代码，确保它符合外观要求。 在此示例中，外观满足以下要求：

• 数值步进器应从- $.xfaWidget.numericInput扩展。

• 小组件的set value方法会在焦点位于字段上之后设置值。 这是自适应表单小组件的强制要求。

• 需要覆盖render方法才能调用bootstrapNumber方法。

• 除了插件的主源代码之外，插件没有其他依赖项。

• 该示例不会对步进器执行任何样式，因此无需其他CSS。

• $userControl对象应对render方法可用。 它是使用插件代码克隆的text类型的字段。

• 禁用字段时应禁用​ + ​和​ - ​按钮。

将bootstrap-number-input.js （jQuery插件）的内容替换为numericStepper-plugin.js文件的内容。

在numericStepper-widget.js文件中，添加以下代码以覆盖渲染方法以调用插件并返回$userControl对象：

render : function() {
     var control = $.xfaWidget.numericInput.prototype.render.apply(this, arguments);
     var $control = $(control);
     var controlObject;
     try{
         if($control){
         $control.bootstrapNumber();
         var id = $control.attr("id");
         controlObject = $("#"+id);
         }
     }catch (exc){
          console.log(exc);
     }
     return controlObject;
}

在numericStepper-widget.js文件中，覆盖getOptionsMap属性以覆盖访问选项，并在禁用模式下隐藏+和 — 按钮。

getOptionsMap: function(){
    var parentOptionsMap = $.xfaWidget.numericInput.prototype.getOptionsMap.apply(this,arguments),

    newMap = $.extend({},parentOptionsMap,

     {

           "access": function(val) {
           switch(val) {
              case "open" :
                this.$userControl.removeAttr("readOnly");
                this.$userControl.removeAttr("aria-readonly");
                this.$userControl.removeAttr("disabled");
                this.$userControl.removeAttr("aria-disabled");
                this.$userControl.parent().find(".input-group-btn button").prop('disabled',false);
                break;
              case "nonInteractive" :
              case "protected" :
                this.$userControl.attr("disabled", "disabled");
                this.$userControl.attr("aria-disabled", "true");
                this.$userControl.parent().find(".input-group-btn button").prop('disabled',true);
                break;
             case "readOnly" :
                this.$userControl.attr("readOnly", "readOnly");
                this.$userControl.attr("aria-readonly", "true");
                this.$userControl.parent().find(".input-group-btn button").prop('disabled',true);
                break;
            default :
                this.$userControl.removeAttr("disabled");
                this.$userControl.removeAttr("aria-disabled");
                this.$userControl.parent().find(".input-group-btn button").prop('disabled',false);
                break;
          }
       },
   });
   return newMap;
 }

保存更改，导航到包含pom.xml文件的文件夹，然后执行以下Maven命令来构建项目：

mvn clean install

使用AEM包管理器安装包。

在要应用自定义外观的编辑模式下打开自适应表单，然后执行以下操作：

1. 右键单击要应用外观的字段，然后单击​ 编辑 ​以打开“编辑组件”对话框。

2. 在样式选项卡中，更新​ CSS类 ​属性以添加widget_numericStepper。