Crear apariencias personalizadas para campos de formularios adaptables create-custom-appearances-for-adaptive-form-fields

Crear un proyecto: cree un proyecto de Maven que genere un paquete de contenido para implementarlo en AEM.

Ampliar una clase de widget existente: amplíe una clase de widget existente y anule las clases requeridas.

Crear una biblioteca de cliente: cree una biblioteca clientLib: af.customwidget y agregue los archivos JavaScript y CSS necesarios.

Crear e instalar el proyecto: cree el proyecto Maven e instale el paquete de contenido generado en AEM.

Actualizar el formulario adaptable: actualice las propiedades del campo del formulario adaptable para utilizar la apariencia personalizada.

Incluya la dependencia del complemento de terceros al proyecto.

1. Coloque los complementos de jQuery personalizados o de terceros en la carpeta jqueryplugin/javascript y los archivos CSS relacionados en la carpeta jqueryplugin/css. Para obtener más información, consulte los archivos JS y CSS en la carpeta jqueryplugin/javascript and jqueryplugin/css.
2. Modifique el js.txt y css.txt para incluir cualquier archivo JavaScript y CSS adicional del complemento jQuery.

Integre el complemento de terceros con el marco para permitir la interacción entre el marco de trabajo de apariencia personalizada y el complemento jQuery. El widget nuevo solo funcionará después de ampliar o de anular las siguientes funciones.

Actualice el archivo JavaScript en la carpeta integration/javascript, según sea necesario.

• Reemplace el texto __widgetName__ con el nombre del widget.
• Amplíe el widget desde una clase de widget adecuada. En la mayoría de los casos, es la clase de widget correspondiente al widget existente que reemplaza. El nombre de clase principal se utiliza en varias ubicaciones, por lo que se recomienda buscar todas las instancias de la cadena xfaWidget.textField en el archivo y reemplzarlas por la clase principal real utilizada.
• Amplíe el método render para proporcionar una interfaz de usuario alternativa. Es la ubicación desde la que se invocará el complemento jQuery para actualizar la interfaz de usuario o el comportamiento de la interacción. El método render debe devolver un elemento de control de usuario.
• Amplíe el método getOptionsMap para anular cualquier configuración de opción afectada por un cambio en el widget. La función devuelve un mapa que proporciona detalles para que la acción se realice al cambiar una opción. Las claves son las opciones proporcionadas para el widget y los valores son las funciones a las que se llama cada vez que se detecta un cambio en la opción.
• El método getEventMap mapea los eventos activados por el widget, con los eventos requeridos por el modelo de formulario adaptable. El valor predeterminado asigna eventos HTML estándar para el widget predeterminado y debe actualizarse si se activa un evento alternativo.
• El showDisplayValue y showValue aplican la cláusula de visualización y de edición de imagen y se pueden sobrescribir para que tengan un comportamiento alternativo.
• El método getCommitValue es invocado por el marco de trabajo de formularios adaptables cuando se produce el evento commit. Generalmente, ocurre en el evento de salida, excepto para los elementos de lista desplegable, el botón de radio y la casilla de verificación al cambiar). Para obtener más información, consulte Expresiones de formularios adaptables.
• El archivo de plantilla proporciona una implementación de muestra para varios métodos. Quite los métodos que no se vayan a ampliar.

Ejecute el siguiente comando para crear un proyecto local basado en el tipo de archivo Maven:

mvn archetype:generate -DarchetypeRepository=https://repo.adobe.com/nexus/content/groups/public/ -DarchetypeGroupId=com.adobe.aemforms -DarchetypeArtifactId=custom-appearance-archetype -DarchetypeVersion=1.0.4

Le solicitará que especifique valores para los siguientes parámetros.

Los valores utilizados en esta muestra se resaltan en negrita.

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

Navegue hasta el directorio customWidgets (valor especificado para la propiedad artifactID) y ejecute el siguiente comando para generar un proyecto Eclipse:

mvn eclipse:eclipse

Abra la herramienta Eclipse y haga lo siguiente para importar el proyecto Eclipse:

1. Seleccione Archivo > Importar > Proyectos existentes en el espacio de trabajo.

2. Busque y seleccione la carpeta en la que ejecutó el comando archetype:generate.

3. Haga clic en Finalizar.

   

Seleccione el widget que se utilizará para la apariencia personalizada. Este ejemplo utiliza el siguiente widget de saltos numéricos:

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

En el proyecto Eclipse, revise el código del complemento en el archivo plugin.js para asegurarse de que coincida con los requisitos de la apariencia. En este ejemplo, la apariencia visual cumple los siguientes requisitos:

• El salto numérico debe extenderse desde - $.xfaWidget.numericInput.
• El método set value del widget define el valor después de que el foco esté en el campo. Es un requisito obligatorio para un widget de formulario adaptable.
• El método render debe anularse para invocar el método bootstrapNumber.
• No hay dependencia adicional para el complemento que no sea el código fuente principal del complemento.
• El ejemplo no realiza ningún estilo en el salto, por lo que no se requiere CSS adicional.
• El objeto $userControl debe estar disponible para el método render. Es un campo del tipo text que se clona con el código del complemento.
• Los botones + y - deben deshabilitarse cuando el campo esté deshabilitado.

Reemplace el contenido del bootstrap-number-input.js (Complemento jQuery) por el contenido del archivo numericStepper-plugin.js.

En el archivo numericStepper-widget.js, agregue el siguiente código para anular el método de procesamiento para invocar el complemento y devolver el objeto $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;
}

En el archivo numericStepper-widget.js, omita la propiedad getOptionsMap para anular la opción de acceso y ocultar los botones + y - en modo deshabilitado.

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;
 }

Guarde los cambios, navegue hasta la carpeta que contenga el archivo pom.xml y ejecute el siguiente comando Maven para crear el proyecto:

mvn clean install

Instale el paquete mediante el administrador de paquetes de AEM.

Abra el formulario adaptable en modo de edición en el que desee aplicar la apariencia personalizada y haga lo siguiente:

1. Haga clic con el botón derecho en el campo en el que desee aplicar la apariencia y haga clic en Editar para abrir el cuadro de diálogo Editar componente.

2. En la pestaña Estilo, actualice la propiedad clase CSS para agregar widget_numericStepper.