Framework di aspetto per moduli adattivi e HTML5 appearance-framework-for-adaptive-and-html-forms

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:

  • Il framework fornisce una serie di opzioni per l'aspetto di un campo. Queste opzioni sono coppie chiave-valore e suddivise in due categorie: opzioni comuni e opzioni specifiche per il tipo di campo.
  • L’aspetto, come parte del contratto, attiva una serie di eventi come l’entrata e l’uscita.
  • L'aspetto è necessario per implementare un insieme di funzioni. Alcune delle funzioni sono comuni, mentre altre sono specifiche delle funzioni di tipo campo.

Opzioni comuni common-options

Di seguito sono riportate le opzioni globali impostate. Queste opzioni sono disponibili per ogni campo.

Proprietà
Descrizione
nome
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.

Interazione con il framework dei moduli interaction-with-forms-framework

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.

Eventi attivati dal widget events-triggered-by-widget

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)

API implementate da widget apis-implemented-by-widget

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)

errorMessage: string che rappresenta l’errore
errorType: string ("warning"/"error")

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.

Opzioni specifiche per il tipo di campo options-specific-to-type-of-field

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.

TextEdit: Campo di testo textedit-text-field

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.

ChoiceList: DropDownList, ListBox choicelist-dropdownlist-listbox

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.

API api

Funzione
Descrizione
addItem: function(itemValues)
itemValues: oggetto contenente il valore di visualizzazione e salvataggio
{sDisplayVal: <displayvalue>, sSaveVal: <save value="">}
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.

NumericEdit: NumericField, DecimalField numericedit-numericfield-decimalfield

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.

CheckButton: RadioButton, CheckBox checkbutton-radiobutton-checkbox

Opzioni
Descrizione
valori

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,
values[2] è il valore quando lo stato è NEUTRAL. La lunghezza della matrice dei valori è uguale al valore dell'opzione di stato.

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).

DateTimeEdit: (DateField) datetimeedit-datefield

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.
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2