DokumentationAEM 6.5Benutzerhandbuch

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

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Themen:

Erstellt für:

  • Benutzende
  • Entwickler

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. Durch diese Architektur stehen Formularentwicklerinnen und -entwicklern eine umfangreiche Auswahl von jQuery-Widgets und -Plug-ins in Forms zur Verfügung. Sie können ebenfalls formularspezifische Logik beim Erfassen von Benutzerdaten implementieren, wie etwa „leadDigits/trailDigits“-Einschränkungen, oder Bildklassen implementieren. Formularentwicklerinnen und -entwickler können ein benutzerdefiniertes Erscheinungsbild erstellen und verwenden, um das Erlebnis bei der Datenerfassung zu verbessern und benutzerfreundlicher zu gestalten.

Dieser Artikel richtet sich an Entwicklerinnen und Entwickler, die sich mit jQuery und jQuery-Widgets gut genug auskennen. Er enthält Informationen zum Erscheinungsbild-Framework und ermöglicht es Entwicklerinnen und Entwicklern, ein anderes Erscheinungsbild für ein Formularfeld zu erstellen.

Das Erscheinungsbild-Framework stützt sich bei der Erfassung von Benutzerinteraktionen mit einem Formular auf verschiedenen Optionen, Ereignisse (Auslöser) und Funktionen und reagiert auf die Änderungen des Modells, um die Endbenutzerin oder den Endbenutzer zu informieren. Zusätzlich gilt Folgendes:

  • Das Framework stellt einen ganzen Optionssatz für das Erscheinungsbild eines Felds bereit. Diese Optionen sind Schlüssel-Wert-Paare und in zwei Kategorien unterteilt: allgemeine Optionen und feldtypspezifische Optionen.
  • Das Erscheinungsbild löst als Teil des Kontrakts eine Reihe von Ereignissen wie Aufrufen und Verlassen aus.
  • Für das Erscheinungsbild muss ein Funktionssatz implementiert werden. Einige der Funktionen sind allgemein, andere feldtypspezifisch.

Allgemeine Optionen common-options

Im Folgenden finden Sie die globalen Optionen. Diese Optionen sind für jedes Feld verfügbar.

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
Bildschirmlesehilfen verwenden diesen Wert, um Informationen über das Feld vorzulesen. 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.
height
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. ein Teilformular.
paraStyles
Die para-Eigenschaft eines XFA-Elements des Widgets.
dir
Die Textrichtung. Mögliche Werte sind: „ltr“ (links nach rechts) und „rtl“ (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 dem Formular-Framework 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 auslöst, funktionieren einige der Skripte nicht, die im Formular für dieses Feld eingegeben 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 „enter“-Skript für das 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 Feldes 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
Das Ereignis wird ausgelöst, damit die Engine ihr „change“-Skript ausführen kann, das für das Feld eingegeben 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 für das Feld eingegeben 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()
Der 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 Fehle
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.

Feldtypspezifische Optionen 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: Text Field textedit-text-field

Option
Beschreibung
multiLine
„True“, wenn das Feld die Eingabe eines Zeilenumbruchzeichens unterstützt, andernfalls „false“.
maxChars
Maximale Anzahl der Zeichen, die in das Feld eingegeben werden können.

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.
items
Array von Objekten, die als Optionen angezeigt werden sollen. Jedes Objekt enthält zwei Eigenschaften:
„save“ (zu speichernder Wert) und „display“ (anzuzeigender Wert).

standardmäßig als bearbeitbar

Hinweis: Gilt nur für HTML5-Formulare.

„True“: Die Eingabe von benutzerdefiniertem Text im Widget wird aktiviert.
displayValue
Array von anzuzeigenden Werten.
multiSelect
„True“, wenn Mehrfachauswahlen zulässig sind, andernfalls „false“.

API api

Funktion
Beschreibung
addItem: function(itemValues)
itemValues: Objekt, das die Werte für „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 (Ganzzahl/Dezimalzahl) darstellt.
leadDigits
Maximale Anzahl der führenden Ziffern in der Dezimalzahl.
fracDigits
Maximale Anzahl der Nachkommastellen in der Dezimalzahl.
zero
Zeichenfolgendarstellung von Null im Gebietsschema des Felds.
decimal
Zeichenfolgendarstellung von Dezimalzahlen 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 checkButton-Statusangaben. values[0] ist der Wert, wenn der Status EIN ist. values[1] ist der Wert, wenn der Status AUS ist.
values[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.
months
Lokalisierte Monatsnamen für dieses Feld.
zero
Der lokalisierte Text für die Zahl 0.
clearText
Der lokalisierte Text für die Löschen-Schaltfläche.
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2