Framework di aspetto per moduli adattivi e HTML5

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

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.

Interazione con il framework dei moduli

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

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

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

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

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

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

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

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

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

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.

In questa pagina