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

CAUTION
AEM 6.4 ha raggiunto la fine del supporto esteso e questa documentazione non viene più aggiornata. Per maggiori dettagli, consulta la nostra periodi di assistenza tecnica. Trova le versioni supportate qui.

Forms (moduli adattivi e moduli HTML5) utilizza jQuery, Backbone.js e Underscore.js librerie per aspetto e script. Nei moduli viene inoltre utilizzato il Interfaccia utente jQuery Widget architettura per tutti gli elementi interattivi (ad esempio campi e pulsanti) del modulo. Questa architettura consente agli sviluppatori di Form di utilizzare un set completo di widget e plug-in jQuery disponibili in Forms. È inoltre possibile implementare una logica specifica per i moduli durante l’acquisizione di dati da utenti quali le restrizioni leadDigits/trailDigits o l’implementazione di clausole illustrazione. Gli sviluppatori di moduli possono creare e utilizzare apparenze personalizzate per migliorare l’esperienza di acquisizione dei dati e renderla più semplice da usare.

Questo articolo è per gli sviluppatori con sufficiente conoscenza dei widget jQuery e jQuery. Fornisce informazioni approfondite sul framework di aspetto e consente agli sviluppatori di creare un aspetto alternativo per un campo modulo.

Il framework di 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 sono suddivise in due categorie: opzioni comuni e opzioni specifiche per il tipo di campo.
  • L’aspetto, come parte del contratto, attiva un set di eventi come enter e exit.
  • L’aspetto è necessario per implementare un set di funzioni. Alcune delle funzioni sono comuni, altre specifiche delle funzioni del tipo di campo.

Opzioni comuni common-options

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
Viene visualizzato il valore del campo.
screenReaderText
I Reader di schermo utilizzano questo valore per narrare le informazioni sul campo. Il modulo fornisce il valore ed è possibile ignorarlo.
tabIndex
Posizione del campo nella sequenza di tabulazione del modulo. Ignorare tabIndex solo se si desidera modificare l'ordine di tabulazione predefinito del modulo.
ruolo
Ruolo dell’elemento, ad esempio Intestazione 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 un sottomodulo.
paraStyles
La proprietà para di un elemento XFA al widget.
dir
La 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 altre opzioni che variano a seconda del tipo di campo. Di seguito sono elencati i dettagli relativi alle opzioni specifiche dei 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 "enter" sul campo. La sintassi per attivare l'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 suo script "exit". La sintassi per attivare l'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 attivare l'evento è
(widget)._trigger(xfalib.ut.XfaUtil.prototype.XFA_CHANGE_EVENT)
XFA_CLICK_EVENT
Questo evento viene attivato ogni volta che si fa clic sul campo. consente al motore di eseguire lo script "click" scritto sul campo. La sintassi per attivare l'evento è
(widget)._trigger(xfalib.ut.XfaUtil.prototype.XFA_CLICK_EVENT)

API implementate da widget apis-implemented-by-widget

Il framework di aspetto richiama alcune funzioni del widget che sono implementate nei widget personalizzati. Il widget deve implementare le seguenti funzioni:

Funzione
Descrizione
focus: function()
Mette a fuoco il campo.
fai clic su: function()
Attiva il campo e chiama XFA_CLICK_EVENT.

markError:function(errorMessage, errorType)

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

Nota: Applicabile solo ai moduli HTML5.

Invia un messaggio di errore e un tipo di errore al widget. Il widget visualizza l'errore.

clearError: function()

Nota: Applicabile solo ai moduli HTML5.

Chiamata eseguita se gli errori nel campo sono 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 di cui sopra. Per utilizzare le caratteristiche dei diversi campi, il widget deve conformarsi alle linee guida per quel particolare campo.

Modifica testo: Campo di testo textedit-text-field

Opzione
Descrizione
multilingue
True se il campo supporta l'immissione di un carattere di nuova riga, altrimenti false.
maxChars
Numero massimo di caratteri che è possibile immettere nel campo.

limitLengthToVisibleArea

Nota: Applicabile solo ai moduli HTML5

Specifica il comportamento del campo di testo quando la larghezza del testo supera la larghezza del widget.

ListaScelta: ElencoA Discesa, CasellaElenco choicelist-dropdownlist-listbox

Opzione
Descrizione
valore
Array di valori selezionati.
elementi
Array di oggetti da visualizzare come opzioni. Ogni oggetto contiene due proprietà:
salva: valore da salvare, visualizzare: da visualizzare.

modificabile

Nota: Applicabile solo ai moduli HTML5.

Se il valore è true, la voce di testo personalizzato è 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 della voce 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 della frazione consentito nel numero decimale.
zero
Rappresentazione stringa pari a zero nelle impostazioni internazionali del campo.
decimale
Rappresentazione stringa del decimale nelle impostazioni internazionali del campo.

CheckButton: Pulsante di scelta, casella di controllo checkbutton-radiobutton-checkbox

Opzioni
Descrizione
values

Matrice di valori (on/off/neutrale).

Si tratta di una matrice di valori per i diversi stati del controlloButton. 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 state.

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 quel campo.
zero
Testo localizzato per il numero 0.
clearText
Testo localizzato per cancellare il pulsante.
recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da