Creare aspetti personalizzati per i campi del modulo adattivo create-custom-appearances-for-adaptive-form-fields

Crea un progetto: crea un progetto Maven che genera un pacchetto di contenuti da distribuire su AEM.

Estendere una classe widget esistente: estendere una classe widget esistente ed eseguire l'override delle classi richieste.

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

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

Aggiorna il modulo adattivo: aggiorna le proprietà del campo modulo adattivo per utilizzare l'aspetto personalizzato.

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

1. Inserire i plug-in jQuery di terze parti o personalizzati nella cartella jqueryplugin/javascript e i file CSS correlati nella cartella jqueryplugin/css. Per ulteriori dettagli, vedi i file JS e CSS nella cartella jqueryplugin/javascript and jqueryplugin/css.

2. Modificare i file js.txt e css.txt 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 ignorato le seguenti funzioni.

Aggiornare il file JavaScript nella cartella integration/javascript, in base alle esigenze.

• Sostituire il testo __widgetName__ con il nome del widget effettivo.

• Estendere il widget da una classe di widget predefinita adatta. Nella maggior parte dei casi, è la 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 sostituirle con la classe padre effettiva utilizzata.

• Estendere il metodo 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. Il metodo render deve restituire un elemento user-control.

• Estendere il metodo getOptionsMap per ignorare qualsiasi impostazione di opzione interessata a causa di una modifica nel widget. La funzione restituisce una mappatura che fornisce i dettagli dell’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.

• Il metodo getEventMap 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.

• showDisplayValue e showValue applicano la clausola di visualizzazione e modifica delle immagini e possono essere sostituiti per avere un comportamento alternativo.

• Il metodo getCommitValue viene chiamato dal framework dei moduli adattivi quando si verifica l'evento commit. In genere, si tratta dell’evento di uscita, ad eccezione degli elementi a discesa, pulsante di scelta e casella di controllo in cui si verifica in caso di modifica). Per ulteriori informazioni, vedere Espressioni Forms adattive.

• Il file modello fornisce un’implementazione di esempio per vari metodi. Rimuovere i metodi da non estendere.

Esegui il seguente comando per creare un progetto locale basato su Archetipo Maven:

mvn archetype:generate -DarchetypeRepository=https://repo1.maven.org/maven2/com/adobe/ -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 alla directory customWidgets (valore specificato per la proprietà artifactID) 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. Selezionare File > Importa > Progetti esistenti in Workspace.

2. Individuare e selezionare la cartella in cui è stato eseguito il comando archetype:generate.

3. Fare clic su Fine.

   

Selezionate il widget da utilizzare per l'aspetto personalizzato. In questo esempio viene utilizzato il seguente widget stepper numerico:

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

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

• Il passo numerico deve estendersi da - $.xfaWidget.numericInput.

• Il metodo set value del widget imposta il valore dopo che lo stato attivo si trova sul campo. È un requisito obbligatorio per un widget per moduli adattivi.

• È necessario eseguire l'override del metodo render per richiamare il metodo bootstrapNumber.

• Non esiste alcuna dipendenza aggiuntiva per il plug-in diversa dal codice sorgente principale del plug-in.

• L’esempio non esegue alcuno stile sul stepper, pertanto non è necessario alcun CSS aggiuntivo.

• L'oggetto $userControl deve essere disponibile per il metodo render. È un campo del tipo text che viene clonato con il codice del plug-in.

• I pulsanti + e - devono essere disabilitati quando il campo è disabilitato.

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

Nel file numericStepper-widget.js, aggiungi il seguente codice per ignorare il metodo di rendering per richiamare il plug-in e restituire l'oggetto $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;
}

Nel file numericStepper-widget.js, eseguire l'override della proprietà 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 file pom.xml ed esegui il seguente comando Maven per generare il progetto:

mvn clean install

Installa il pacchetto utilizzando Gestione pacchetti AEM.

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 scegliere Modifica per aprire la finestra di dialogo Modifica componente.

2. Nella scheda Stile, aggiorna la proprietà CSS class per aggiungere widget_numericStepper.