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
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.
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);
Quando il codice widget personalizzato è pronto, registralo con il motore di script utilizzando registerConfig
API per Bridge modulo. Prende widgetConfigObject come input.
window.formBridge.registerConfig("widgetConfig",
{
".<field-identifier>":"<name-of-the-widget>"
}
);
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" |