Show Menu
ARGOMENTI×

Creazione di un aspetto personalizzato nei moduli HTML5

È possibile collegare widget personalizzati a moduli mobili. Potete estendere i widget jQuery esistenti o sviluppare widget personalizzati utilizzando il framework di aspetto. Il motore XFA utilizza vari widget. Per informazioni dettagliate, vedere Framework Aspetto per i moduli adattivi e HTML5.
Un esempio di widget predefinito e personalizzato

Integrazione di widget personalizzati con moduli HTML5

Creazione di un profilo

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

Creare un widget

I moduli 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/sostituendo le funzioni elencate di seguito.
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 attivabile. 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 (focus, click) richiedono delle modifiche.
getEventMap Restituisce una mappa per convertire gli eventi HTML in eventi XFA. { sfocatura: XFA_EXIT_EVENT, } In questo esempio viene mostrato che la sfocatura è un evento HTML e che XFA_EXIT_EVENT è un evento XFA corrispondente.
getOptionsMap Restituisce una mappa che fornisce informazioni dettagliate sulle azioni 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 handler per tutte le opzioni comuni (tranne valore e displayValue)
getCommitValue Il framework Widget carica la funzione ogni volta che il valore del widget viene salvato nel modello XFAM (ad esempio, in corrispondenza dell'evento exit di un oggetto 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 valore rawValue all'utente.
showDisplayValue Per impostazione predefinita, in XFA all'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, includete i riferimenti del file JavaScript che contiene funzioni sostituite e funzioni aggiunte di recente. Ad esempio, sliderNumericFieldWidget è un widget per i campi numerici. Per utilizzare il widget nel profilo nella sezione di intestazione, includi la seguente riga:
window.formBridge.registerConfig("widgetConfig" , widgetConfigObject);

Registrazione di un widget personalizzato con il motore di script XFA

Quando il codice widget personalizzato è pronto, registrate il widget con il motore di script utilizzando registerConfig API per Form Bridge . È necessario widgetConfigObject come input.
window.formBridge.registerConfig("widgetConfig",
        {
        ".<field-identifier>":"<name-of-the-widget>"
        }
    );

widgetConfigObject

La configurazione del widget è fornita come 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 set di campi di un particolare tipo o tutti i campi. Di seguito è riportato il valore dell’identificatore in diversi casi:
Tipo di identificatore
modulo
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"(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"