Utilizzo di Forms (moduli adattivi e moduli HTML5) jQuery, Backbone.js e Underscore.js librerie per l'aspetto e gli script. I moduli utilizzano anche Interfaccia utente jQuery Widget architettura per tutti gli elementi interattivi del modulo, ad esempio campi e pulsanti. Questa architettura consente allo sviluppatore di moduli di utilizzare un set completo di widget e plug-in jQuery disponibili in Forms. Puoi anche implementare una logica specifica per il modulo durante l’acquisizione di dati da utenti come le restrizioni leadDigits/trailDigits o l’implementazione di clausole immagine. Gli sviluppatori di moduli possono creare e utilizzare le funzionalità personalizzate per migliorare l’esperienza di acquisizione dei dati e renderla più semplice da usare.
Questo articolo è destinato agli sviluppatori con una conoscenza sufficiente dei widget jQuery e jQuery. Fornisce informazioni approfondite sul framework dell'aspetto e consente agli sviluppatori di creare un aspetto alternativo per un campo modulo.
Il framework dell'aspetto si basa su varie opzioni, eventi (trigger) e funzioni per acquisire le interazioni dell'utente con il modulo e risponde alle modifiche del modello per informare l'utente finale. Inoltre:
Di seguito sono riportate le opzioni globali impostate. Queste opzioni sono disponibili per ogni campo.
Proprietà | Descrizione |
---|---|
name | Identificatore utilizzato per specificare questo oggetto o evento nelle espressioni di script. Ad esempio, questa proprietà specifica il nome dell'applicazione host. |
valore | Valore effettivo del campo. |
displayValue | Questo valore del campo viene visualizzato. |
screenReaderText | I Reader di schermate utilizzano questo valore per annotare informazioni sul campo. La maschera fornisce il valore e potete ignorarlo. |
tabIndex | Posizione del campo nella sequenza di tabulazione del modulo. Eseguire l'override di tabIndex solo se si desidera modificare l'ordine di tabulazione predefinito del modulo. |
ruolo | Ruolo dell'elemento, ad esempio Titolo o Tabella. |
altezza | Altezza del widget. È specificato in pixel. |
larghezza | Larghezza del widget. È specificato in pixel. |
accesso | Controlli utilizzati per accedere al contenuto di un oggetto contenitore, ad esempio una sottomaschera. |
paraStyles | La proprietà para di un elemento XFA per il widget. |
dir | Direzione del testo. I valori possibili sono ltr (da sinistra a destra) e rtl (da destra a sinistra). |
Oltre a queste opzioni, il framework fornisce alcune altre opzioni che variano a seconda del tipo di campo. Di seguito sono elencati i dettagli delle opzioni specifiche per i campi.
Per interagire con il framework dei moduli, un widget attiva alcuni eventi per consentire il funzionamento dello script del modulo. Se il widget non genera questi eventi, alcuni degli script scritti nel modulo per quel campo non funzionano.
Evento | Descrizione |
---|---|
XFA_ENTER_EVENT | Questo evento viene attivato ogni volta che il campo è attivo. Consente l’esecuzione dello script "Invio" sul campo. La sintassi per l’attivazione dell’evento è (widget)._trigger(xfalib.ut.XfaUtil.prototype.XFA_ENTER_EVENT) |
XFA_EXIT_EVENT | Questo evento viene attivato ogni volta che l’utente lascia il campo. Consente al motore di impostare il valore del campo ed eseguire il relativo script di "uscita". La sintassi per l’attivazione dell’evento è (widget)._trigger(xfalib.ut.XfaUtil.prototype.XFA_EXIT_EVENT) |
XFA_CHANGE_EVENT | Questo evento viene attivato per consentire al motore di eseguire lo script "change" scritto sul campo. La sintassi per l’attivazione dell’evento è (widget)._trigger(xfalib.ut.XfaUtil.prototype.XFA_CHANGE_EVENT) |
XFA_CLICK_EVENT | Questo evento viene attivato quando si fa clic sul campo. consente al motore di eseguire lo script "click" scritto sul campo. La sintassi per l’attivazione dell’evento è (widget)._trigger(xfalib.ut.XfaUtil.prototype.XFA_CLICK_EVENT) |
Il framework dell’aspetto richiama alcune funzioni del widget che vengono implementate nei widget personalizzati. Il widget deve implementare le seguenti funzioni:
Funzione | Descrizione |
---|---|
focus: function() | Mette a fuoco il campo. |
click: function() | Mette lo stato attivo sul campo e chiama XFA_CLICK_EVENT. |
markError:funzione(errorMessage, errorType) Nota: applicabile solo per i moduli HTML5. |
Invia al widget il messaggio di errore e il tipo di errore. Il widget visualizza l'errore. |
clearError: function() Nota: applicabile solo per i moduli HTML5. |
Chiamata eseguita se gli errori nel campo vengono corretti. Il widget nasconde l'errore. |
Tutti i widget personalizzati devono essere conformi alle specifiche precedenti. Per utilizzare le funzioni di campi diversi, il widget deve essere conforme alle linee guida per quel particolare campo.
Opzione | Descrizione |
---|---|
multiriga | True se il campo supporta l'immissione di un carattere di nuova riga, altrimenti false. |
maxChars | Numero massimo di caratteri che possono essere immessi nel campo. |
limitLengthToVisibleArea Nota: applicabile solo per i moduli HTML5 |
Specifica il comportamento del campo di testo quando la larghezza del testo supera la larghezza del widget. |
Opzione | Descrizione |
---|---|
valore |
Matrice di valori selezionati. |
elementi |
Array di oggetti da visualizzare come opzioni. Ogni oggetto contiene due proprietà: salva: valore da salvare, visualizza: valore da visualizzare. |
modificabile Nota: applicabile solo per i moduli HTML5. |
Se il valore è true, l'immissione di testo personalizzato viene abilitata nel widget. |
displayValue |
Matrice di valori da visualizzare. |
selezione multipla |
True se sono consentite selezioni multiple, altrimenti false. |
Funzione | Descrizione |
---|---|
addItem: function(itemValues) |
Aggiunge un elemento all'elenco. |
deleteItem: function(nIndex) nIndice: indice dell'elemento da rimuovere dall'elenco |
Elimina un'opzione dall'elenco. |
clearItems: function() |
Cancella tutte le opzioni dall'elenco. |
Opzioni | Descrizione |
---|---|
dataType | Stringa che rappresenta il tipo di dati del campo (numero intero/decimale). |
leadDigits | Numero massimo di cifre iniziali consentito nel numero decimale. |
fracDigits | Numero massimo di cifre decimali per frazione. |
zero | Rappresentazione stringa di zero nelle impostazioni internazionali del campo. |
decimale | Rappresentazione stringa dei decimali nelle impostazioni internazionali del campo. |
Opzioni | Descrizione |
---|---|
values | Array di valori (on/off/neutral). È una matrice di valori per i diversi stati del controllo CheckButton. values[0] è il valore quando lo stato è ON, values[1] è il valore quando lo stato è OFF, |
stati | Numero di stati consentiti. Due per i moduli adattivi (On, Off) e tre per i moduli HTML5 (On, Off, Neutral). |
stadio | Stato corrente dell'elemento. Due per i moduli adattivi (On, Off) e tre per i moduli HTML5 (On, Off, Neutral). |
Opzione | Descrizione |
---|---|
giorni | Nome localizzato dei giorni per quel campo. |
mesi | Nomi di mese localizzati per il campo. |
zero | Testo localizzato per il numero 0. |
clearText | Testo localizzato per il pulsante di cancellazione. |