Creare aspetti personalizzati nei moduli di HTML5

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, vedi Framework di aspetto per moduli adattivi e HTML5 per informazioni dettagliate.

Un esempio di widget predefinito e personalizzato

Un esempio di widget predefinito e personalizzato

Integrazione di widget personalizzati con moduli HTML5

Creare un profilo 

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

Creare un 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.
{
sfocatura: 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 sovrascritte e funzioni appena aggiunte. Ad esempio, il 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 

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

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"

In questa pagina