Creare un aspetto personalizzato per i campi modulo adattivo create-custom-appearances-for-adaptive-form-fields

Creare un progetto: Crea un progetto Maven che genera un pacchetto di contenuti da distribuire in AEM.

Estendere una classe di widget esistente: Estendi una classe di widget esistente e sovrascrivi le classi richieste.

Creare una libreria client: Crea un clientLib: af.customwidget e aggiungi i file JavaScript e CSS richiesti.

Crea e installa il progetto: Crea il progetto Maven e installa il pacchetto di contenuti generato su AEM.

Aggiornare il modulo adattivo: Aggiornare le proprietà dei campi del modulo adattivo per utilizzare l’aspetto personalizzato.

Includi la dipendenza del plug-in di terze parti nel progetto.

1. Posiziona i plug-in jQuery di terze parti o personalizzati nel jqueryplugin/javascript e i relativi file CSS nel jqueryplugin/css cartella. Per ulteriori dettagli, consulta i file JS e CSS nella sezione jqueryplugin/javascript and jqueryplugin/css cartella.
2. Modifica la js.txt e css.txt file per includere eventuali file JavaScript e CSS aggiuntivi del plug-in jQuery.

Integra il plug-in di terze parti con il framework per abilitare l’interazione tra il framework di aspetto personalizzato e il plug-in jQuery. Il nuovo widget funzionerà solo dopo aver esteso o sostituito le seguenti funzioni.

Aggiorna il file JavaScript nel integration/javascript se necessario.

• Sostituire il testo __widgetName__ con il nome effettivo del widget.
• Estendi il widget da una classe di widget preconfigurata adatta. Nella maggior parte dei casi, si tratta della classe di widget corrispondente al widget esistente che viene sostituito. Il nome della classe padre viene utilizzato in più posizioni, pertanto si consiglia di cercare tutte le istanze della stringa xfaWidget.textField nel file e sostituiscili con la classe padre effettiva utilizzata.
• Estendi la render per fornire un'interfaccia utente alternativa. È la posizione da cui verrà richiamato il plug-in jQuery per aggiornare l’interfaccia utente o il comportamento di interazione. La render deve restituire un elemento di controllo utente.
• Estendi la getOptionsMap per ignorare qualsiasi impostazione di opzione interessata a causa di una modifica nel widget. La funzione restituisce una mappatura che fornisce dettagli sull'azione da eseguire in caso di modifica di un'opzione. Le chiavi sono le opzioni fornite al widget e i valori sono le funzioni chiamate ogni volta che viene rilevata una modifica nell'opzione.
• La getEventMap Il metodo mappa gli eventi attivati dal widget, con gli eventi richiesti dal modello di modulo adattivo. Il valore predefinito mappa gli eventi HTML standard per il widget predefinito e deve essere aggiornato se viene attivato un evento alternativo.
• La showDisplayValue e showValue applicare la clausola di visualizzazione e modificare l'immagine e può essere ignorato per avere un comportamento alternativo.
• La getCommitValue viene richiamato dal framework dei moduli adattivi quando il commitsi verifica l'evento . In genere si tratta dell’evento exit , ad eccezione degli elementi a discesa, pulsante di scelta e casella di controllo in cui si verifica al momento della modifica). Per ulteriori informazioni, consulta Espressioni Forms adattive.
• Il file modello fornisce un esempio di implementazione per vari metodi. Rimuovere i metodi da non estendere.

Esegui il comando seguente per creare un progetto locale basato su archetipo 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

Viene richiesto di specificare i valori per i seguenti parametri.

I valori utilizzati in questo esempio sono evidenziati in grassetto.

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

Passa a customWidgets (valore specificato per artifactID property) ed esegui il seguente comando per generare un progetto Eclipse:

mvn eclipse:eclipse

Apri lo strumento Eclipse ed effettua le seguenti operazioni per importare il progetto Eclipse:

1. Seleziona File > Importa > Progetti esistenti in Workspace.

2. Sfoglia e seleziona la cartella in cui è stato eseguito il archetype:generate comando.

3. Fai clic su Fine.

   

Seleziona il widget da utilizzare per l'aspetto personalizzato. Questo esempio utilizza il seguente widget passo numerico:

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

Nel progetto Eclipse, controlla il codice plug-in nel plugin.js per assicurarsi che corrisponda ai requisiti dell'aspetto. In questo esempio, l'aspetto soddisfa i seguenti requisiti:

• Lo step numerico deve estendersi da - $.xfaWidget.numericInput.
• La set value Il metodo del widget imposta il valore dopo che lo stato attivo è sul campo. È un requisito obbligatorio per un widget modulo adattivo.
• La render per richiamare bootstrapNumber metodo .
• Non esiste alcuna dipendenza aggiuntiva per il plug-in che non sia il codice sorgente principale del plug-in.
• L’esempio non esegue alcuno stile sullo stepper, pertanto non è necessario alcun CSS aggiuntivo.
• La $userControl deve essere disponibile per render metodo . È un campo della text tipo clonato con il codice del plug-in.
• La + e - i pulsanti devono essere disattivati quando il campo è disabilitato.

Sostituire il contenuto della bootstrap-number-input.js (plugin jQuery) con il contenuto del numericStepper-plugin.js file.

In numericStepper-widget.js aggiungi il seguente codice per ignorare il metodo di rendering per richiamare il plug-in e restituire $userControl oggetto:

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

In numericStepper-widget.js , sovrascrivi getOptionsMap per ignorare l'opzione di accesso e nascondere i pulsanti + e - in modalità disabilitata.

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

Salva le modifiche, passa alla cartella contenente il pom.xml ed esegui il seguente comando Maven per creare il progetto:

mvn clean install

Installa il pacchetto utilizzando AEM Gestione pacchetti.

Apri il modulo adattivo in modalità di modifica in cui desideri applicare l’aspetto personalizzato ed effettua le seguenti operazioni:

1. Fare clic con il pulsante destro del mouse sul campo a cui si desidera applicare l'aspetto e fare clic su Modifica per aprire la finestra di dialogo Modifica componente.

2. Nella scheda Stile , aggiorna la Classe CSS proprietà da aggiungere widget_numericStepper.