Creare un aspetto personalizzato nei moduli di HTML5

ATTENZIONE

AEM 6.4 ha raggiunto la fine del supporto esteso e questa documentazione non viene più aggiornata. Per maggiori dettagli, consulta la nostra periodi di assistenza tecnica. Trova le versioni supportate qui.

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

Esempio di widget predefiniti e personalizzati
Figura: Esempio di widget predefiniti e personalizzati

Integrazione di widget personalizzati con i moduli HTML5

Creare un profilo 

Puoi creare un profilo o scegliere un profilo esistente per aggiungere un widget personalizzato. Per ulteriori informazioni sulla creazione dei profili, consulta Creazione di un profilo personalizzato.

Creare un widget

I moduli di HTML5 forniscono un’implementazione del framework di widget che può essere esteso 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/ignorando le funzioni di seguito menzionate.

Funzione/Classe Descrizione
rendering La funzione di rendering restituisce l'oggetto jQuery per l'elemento HTML predefinito del widget. L’elemento HTML predefinito deve essere di tipo focalizzabile. Ad esempio: <a>, <input>e <li>. L'elemento restituito viene utilizzato come $userControl. Se $userControl specifica il vincolo di cui sopra, le funzioni della classe AbstractWidget funzionano come previsto, altrimenti alcune delle API comuni (attivazione, clic) richiedono modifiche.
getEventMap Restituisce una mappa per convertire gli eventi HTML in eventi XFA.
{
sfocatura: XFA_EXIT_EVENT,
}
Questo esempio mostra che la sfocatura è un evento HTML e che XFA_EXIT_EVENT è l’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 chiamate 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 modello XFAM (ad esempio, in caso di uscita da un evento 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 enter viene visualizzato il valore rawValue del campo. Questa funzione viene chiamata per mostrare il rawValue all'utente.
showDisplayValue Per impostazione predefinita, in XFA all'evento di uscita viene visualizzato il valore formattedValue del campo. Questa funzione viene chiamata per mostrare l'oggetto formattedValue all'utente.

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

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

Registra widget personalizzato con motore di scripting XFA 

Quando il codice del widget personalizzato è pronto, registra il widget con il motore di scripting utilizzando registerConfigAPI per Form Bridge. Richiede widgetConfigObject come input.

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

widgetConfigObject

La configurazione del widget viene fornita come un oggetto JSON (una raccolta di coppie di valori chiave) 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 è riportato un elenco del valore dell’identificatore in diversi casi:

Tipo di identificatore Identificatore Descrizione
Campo particolare con nome campo Identificatore:"div.fieldname" Viene eseguito il rendering di tutti i campi con il nome "nome campo" utilizzando il widget.
Tutti i campi di tipo "type" (in cui il tipo è NumericField, DateField e così via).: Identificatore: "div.type" Per Timefield e DateTimeField, il tipo è textfield perché questi campi non sono supportati.
Tutti i campi Identificatore: "div.field"

In questa pagina