Framework des Erscheinungsbilds für adaptive und HTML5-Formulare appearance-framework-for-adaptive-and-html-forms

CAUTION
AEM 6.4 hat das Ende der erweiterten Unterstützung erreicht und diese Dokumentation wird nicht mehr aktualisiert. Weitere Informationen finden Sie in unserer technische Unterstützung. Unterstützte Versionen suchen here.

Formulare (adaptive Formulare und HTML5-Formulare) verwenden jQuery-, Backbone.js- und Underscore.js-Bibliotheken für das Erscheinungsbild und die Skripterstellung. Die Formulare verwenden auch die Architektur von jQuery UI-Widgets für alle interaktiven Elemente (beispielsweise Felder und Schaltflächen) im Formular. Diese Architektur ermöglicht es dem Formularentwickler, einen umfangreichen Satz verfügbarer jQuery-Widgets und -Plug-ins in Forms zu verwenden. Sie können ebenfalls formularspezifische Logik beim Erfassen von Benutzerdaten implementieren, wie etwa „leadDigits/trailDigits“-Einschränkungen, oder Bildklassen implementieren. Formularentwickler können benutzerdefinierte Erscheinungsbilder erstellen und verwenden, um die Datenerfassung zu verbessern und sie benutzerfreundlicher zu gestalten.

Dieser Artikel richtet sich an Entwickler mit ausreichenden Kenntnissen von jQuery- und jQuery-Widgets. Es bietet Einblicke in das Erscheinungsbild-Framework und ermöglicht es Entwicklern, ein alternatives Erscheinungsbild für ein Formularfeld zu erstellen.

Das Erscheinungsbild-Framework nutzt verschiedene Optionen, Ereignisse (Trigger) und Funktionen zum Erfassen von Benutzerinteraktionen mit dem Formular und reagiert auf Modelländerungen, um den Endbenutzer zu informieren. Zusätzlich gilt Folgendes:

  • Das Framework bietet eine Reihe von Optionen für das Erscheinungsbild eines Felds. Diese Optionen sind Schlüssel-Wert-Paare und in zwei Kategorien unterteilt: allgemeine Optionen und feldtypspezifische Optionen.
  • Das Erscheinungsbild Trigger als Teil des Vertrags eine Reihe von Ereignissen wie "enter"und "exit".
  • Das Erscheinungsbild ist erforderlich, um eine Reihe von Funktionen zu implementieren. Einige Funktionen sind häufig, während andere für Feldfunktionen spezifisch sind.

Allgemeine Optionen common-options

Im Folgenden finden Sie die globalen Optionen. Diese Optionen stehen für jedes Feld zur Verfügung.

Eigenschaft
Beschreibung
name
Ein Bezeichner, mit dem dieses Objekt oder Ereignis in Skriptausdrücken angegeben wird. Diese Eigenschaft gibt beispielsweise den Namen der Host-Anwendung an.
value
Tatsächlicher Wert des Felds.
displayValue
Der Wert des Felds wird angezeigt.
screenReaderText
Reader des Bildschirms verwenden diesen Wert, um Informationen über das Feld zu beschreiben. Das Formular gibt den Wert an. Sie können diesen Wert überschreiben.
tabIndex
Die Position des Felds in der Tab-Abfolge des Formulars. Überschreiben Sie den tabIndex nur, wenn Sie die Standardreihenfolge der Registerkarten im Formular ändern möchten.
role
Rolle des Elements, z. B. Überschrift oder Tabelle.
Höhe
Die Höhe des Widgets. Sie wird in Pixel angegeben.
width
Die Breite des Widgets. Sie wird in Pixel angegeben.
access
Steuerelemente für den Zugriff auf den Inhalt eines Containers, z. B. eines Teilformulars.
paraStyles
Die para -Eigenschaft eines XFA-Elements für das Widget.
dir
Die Richtung des Textes. Mögliche Werte sind "ltr"(von links nach rechts) und "rtl"(von rechts nach links).

Zusätzlich zu diesen Optionen stellt das Framework einige andere Optionen bereit, die je nach Typ des Felds variieren. Die Details zu den feldspezifischen Optionen sind unten aufgeführt.

Interaktion mit Formularframework interaction-with-forms-framework

Um mit dem Formularframework zu interagieren, löst ein Widget einige Ereignisse aus, die das Formularskript aktivieren. Wenn das Widget diese Ereignisse nicht ausgibt, funktionieren einige Skripte nicht, die im Formular für dieses Feld geschrieben wurden.

Vom Widget ausgelöste Ereignisse events-triggered-by-widget

Ereignis
Beschreibung
XFA_ENTER_EVENT
Das Ereignis wird ausgelöst, wenn das Feld im Fokus ist. Dadurch kann das Skript "enter"auf dem Feld ausgeführt werden. Die Syntax zum Auslösen des Ereignisses lautet
(Widget)._trigger(xfalib.ut.XfaUtil.prototype.XFA_ENTER_EVENT)
XFA_EXIT_EVENT
Dieses Ereignis wird ausgelöst, wenn der Benutzer das Feld verlässt. Dadurch kann die Engine den Wert des Felds festlegen und ihr "exit"-Skript ausführen. Die Syntax zum Auslösen des Ereignisses lautet
(Widget)._trigger(xfalib.ut.XfaUtil.prototype.XFA_EXIT_EVENT)
XFA_CHANGE_EVENT
Dieses Ereignis wird ausgelöst, damit die Engine das "change"-Skript ausführen kann, das in das Feld geschrieben wurde. Die Syntax zum Auslösen des Ereignisses lautet
(Widget)._trigger(xfalib.ut.XfaUtil.prototype.XFA_CHANGE_EVENT)
XFA_CLICK_EVENT
Das Ereignis wird ausgelöst, wenn das Feld angeklickt wird. Dadurch kann die Engine das "click"-Skript ausführen, das in das Feld geschrieben wurde. Die Syntax zum Auslösen des Ereignisses lautet
(Widget)._trigger(xfalib.ut.XfaUtil.prototype.XFA_CLICK_EVENT)

Vom Widget implementierte APIs apis-implemented-by-widget

Die Erscheinungsbild-Framework ruft einige Funktionen des Widgets auf, die in den benutzerdefinierten Widgets implementiert sind. Das Widget muss die folgenden Funktionen implementieren:

Funktion
Beschreibung
focus: function()
Fokus wird auf das Feld gelegt.
click: function()
Setzt den Fokus auf das Feld und ruft XFA_CLICK_EVENT auf.

markError:function(errorMessage, errorType)

errorMessage: string steht für den Fehler
errorType: string (“warning”/”error”)

Hinweis: Gilt nur für HTML5-Formulare.

Sendet Fehlermeldung und Fehlertyp an das Widget. Das Widget zeigt den Fehler an.

clearError: function()

Hinweis: Gilt nur für HTML5-Formulare.

Wird aufgerufen, wenn die Fehler im Feld behoben sind. Das Widget blendet den Fehler aus.

Optionen je nach Feldtyp options-specific-to-type-of-field

Alle benutzerdefinierten Widgets sollten mit den oben genannten Spezifikationen übereinstimmen. Um die Funktionen von verschiedenen Feldern zu nutzen, muss das Widget den Richtlinien des jeweiligen Felds entsprechen.

TextEdit: Textfeld textedit-text-field

Option
Beschreibung
multiline
True , wenn das Feld die Eingabe eines Zeilenumbruchzeichens unterstützt, andernfalls false.
maxChars
Maximale Zeichenanzahl, die in das Feld eingegeben werden kann.

limitLengthToVisibleArea

Hinweis: Gilt nur für HTML5-Formulare

Gibt das Verhalten des Textfelds an, wenn die Textbreite die Breite des Widgets überschreitet.

ChoiceList: DropDownList, ListBox choicelist-dropdownlist-listbox

Option
Beschreibung
Wert
Array der ausgewählten Werte.
Elemente
Array von Objekten, die als Optionen angezeigt werden sollen. Jedes Objekt enthält zwei Eigenschaften:
save: Wert zum Speichern, anzeigen: anzuzeigenden Wert.

standardmäßig als bearbeitbar

Hinweis: Gilt nur für HTML5-Formulare.

Wenn der Wert "true"ist, wird der benutzerdefinierte Texteintrag im Widget aktiviert.
displayValue
Array von anzuzeigenden Werten.
multiselect
"True", wenn mehrere Auswahlen zulässig sind, andernfalls "false".

API api

Funktion
Beschreibung
addItem: function(itemValues)
itemValues: Objekt, das den Wert "display"und "save"enthält
{sDisplayVal: <displayvalue>, sSaveVal: <save value="">}
Fügt der Liste ein Element hinzu.
deleteItem : function(nIndex)
nIndex: Index des Elements, das aus der Liste entfernt werden soll
Löscht eine Option aus der Liste.
clearItems: function()
Löscht alle Optionen aus der Liste.

NumericEdit: NumericField, DecimalField numericedit-numericfield-decimalfield

Optionen
Beschreibung
dataType
Zeichenfolge, die den Datentyp des Felds darstellt (Ganzzahl/Dezimalzahl).
leadDigits
Maximale führende Stellen in der Dezimalzahl.
fracDigits
Maximale Bruchzahlen in der Dezimalzahl.
zero
Zeichenfolgendarstellung von null im Gebietsschema des Felds.
decimal
Zeichenfolgendarstellung der Dezimalzahl im Gebietsschema des Felds.

CheckButton: RadioButton, CheckBox checkbutton-radiobutton-checkbox

Optionen
Beschreibung
values

Array von Werten (ein/aus/neutral).

Es handelt sich um ein Array von Werten für die verschiedenen Status von checkButton. values[0] ist der Wert, wenn der Status EIN ist, value[1] der Wert, wenn der Status AUS ist;
value[2] ist der Wert, wenn der Status NEUTRAL ist. Die Länge des Werte-Arrays entspricht dem Wert der Statusoption.

states

Anzahl der zulässigen Status.

Zwei für adaptive Formulare (Ein, Aus) und drei für HTML5-Formulare (Ein, Aus, Neutral).

state

Aktueller Status des Elements.

Zwei für adaptive Formulare (Ein, Aus) und drei für HTML5-Formulare (Ein, Aus, Neutral).

DateTimeEdit: (DateField) datetimeedit-datefield

Option
Beschreibung
Tage
Lokalisierte Tagesnamen für dieses Feld.
Monate
Lokalisierte Monatsnamen für dieses Feld.
zero
Der lokalisierte Text für die Zahl 0.
clearText
Der lokalisierte Text für die Schaltfläche "Löschen".
recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da