DocumentazioneAEM 6.5Guida utente

Creare aspetti personalizzati nei moduli di HTML5 create-custom-appearances-in-html-forms

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Argomenti:

Creato per:

  • Amministratore
  • Utente
  • Sviluppatore

Puoi collegare widget personalizzati a un Forms mobile. È possibile estendere i widget jQuery esistenti o sviluppare widget personalizzati utilizzando il framework di aspetti. Il motore XFA utilizza vari widget. Per informazioni dettagliate, consulta Framework di aspetto per moduli adattivi e HTML5.

Esempio di widget predefinito e personalizzato

Esempio di widget predefinito e personalizzato

Integrazione di widget personalizzati con moduli HTML5 integrating-custom-widgets-with-html-forms

Creare un profilo  create-a-profile-nbsp

Puoi creare un profilo o sceglierne uno esistente per aggiungere un widget personalizzato. Per ulteriori informazioni sulla creazione di profili, vedere Creazione di profili personalizzati.

Creare un widget create-a-widget

I moduli HTML5 forniscono un’implementazione del framework dei widget che può essere estesa per creare nuovi widget. L'implementazione è un widget jQuery abstractWidget che può essere esteso per scrivere un nuovo widget. Il nuovo widget può essere reso funzionale solo estendendo/sovrascrivendo le seguenti funzioni.

Funzione/Classe
Descrizione
rendering
La funzione render restituisce l’oggetto jQuery per l’elemento HTML predefinito del widget. L’elemento HTML predefinito deve essere di tipo attivabile. Ad esempio, <a>, <input> e <li>. L'elemento restituito viene utilizzato come $userControl. Se $userControl specifica il vincolo riportato sopra, le funzioni della classe AbstractWidget funzioneranno come previsto. In caso contrario, alcune delle API comuni (attivazione, clic) richiederanno modifiche.
getEventMap
Restituisce una mappa per convertire gli eventi HTML in eventi XFA.
{
blur: XFA_EXIT_EVENT,
}
Questo esempio mostra che la sfocatura è un evento HTML e XFA_EXIT_EVENT è un evento XFA corrispondente.
getOptionsMap
Restituisce una mappa 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 che vengono richiamate ogni volta che viene rilevata una modifica in tale opzione. Il widget fornisce gestori per tutte le opzioni comuni (ad eccezione di value e displayValue)
getCommitValue
Il framework Widget carica la funzione ogni volta che il valore del widget viene salvato nel XFAModel (ad esempio, all'evento di uscita di un textField). L’implementazione deve restituire il valore salvato nel widget. Al gestore viene fornito il nuovo valore per l’opzione.
showValue
Per impostazione predefinita, in XFA all’evento Invio viene visualizzato il valore rawValue del campo. Questa funzione viene chiamata per mostrare il valore raw all’utente.
showDisplayValue
Per impostazione predefinita, in XFA all’evento di uscita viene visualizzato il formattedValue del campo. Questa funzione viene chiamata per mostrare formattedValue all’utente.

Per creare un widget personalizzato, nel profilo creato in precedenza, includi i riferimenti del file JavaScript che contiene funzioni sostituite e funzioni appena aggiunte. Ad esempio, sliderNumericFieldWidget è un widget per campi numerici. Per utilizzare il widget nel profilo nella sezione di intestazione, includi la seguente riga:

window.formBridge.registerConfig("widgetConfig" , widgetConfigObject);

Registrare un widget personalizzato con il motore di script XFA  register-custom-widget-with-xfa-scripting-engine-nbsp

Quando il codice widget personalizzato è pronto, registralo con il motore di script utilizzando registerConfigAPI per Bridge modulo. Prende widgetConfigObject come input.

window.formBridge.registerConfig("widgetConfig",
        {
        ".<field-identifier>":"<name-of-the-widget>"
        }
    );

widgetConfigObject widgetconfigobject

La configurazione del widget viene fornita come oggetto JSON (un insieme di coppie chiave-valore) in cui la chiave identifica i campi e il valore rappresenta il widget da utilizzare con tali campi. Esempio di configurazione:

*{*

*"identifier1" : "customwidgetname",
"identifier2" : "customwidgetname2",
..
}*

dove "identifier" è un selettore CSS jQuery che rappresenta un particolare campo, un insieme di campi di un particolare tipo o tutti i campi. Di seguito viene elencato il valore dell’identificatore in casi diversi:

Tipo di identificatore
Identificatore
Descrizione
Campo particolare con nome nomecampo
Identificatore:"div.fieldname"
Tutti i campi denominati "fieldname" vengono riprodotti utilizzando il widget.
Tutti i campi di tipo "type" (dove type è NumericField, DateField e così via).:
Identificatore: "div.type"
Per Timefield e DateTimeField, il tipo è textfield in quanto questi campi non sono supportati.
Tutti i campi
Identificatore: "div.field"
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2