Framework des Erscheinungsbilds für adaptive und HTML5-Formulare

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 Formularentwicklern eine umfangreiche Auswahl von jQuery-Widgets und -Plug-Ins in Formularen zur Verfügung. 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 Datenerfassungserfahrung zu verbessern und sie benutzerfreundlicher zu gestalten.

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

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

  • Das Framework stellt einen 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 „enter“, „exit“ und so weiter aus.
  • Das Erscheinungsbild muss einen Funktionssatz implementieren. Einige der Funktionen sind allgemein, während andere spezifisch für die Feldtypfunktion sind.

Allgemeine Optionen

Im Folgenden 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 Pixeln angegeben.
width Die Breite des Widgets. Sie wird in Pixeln angegeben.
access Steuert den Benutzerzugriff auf den Inhalt eines Containers, beispielsweise ein Teilformular.
paraStyles Die Para-Eigenschaft eines XFA-Elements des Widgets.
dir Die Richtung des Textes. 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 Formularframework

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

Vom Widget ausgelöste Ereignisse

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 ist
(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 ist
(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 ist
(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 ist
(Widget)._trigger(xfalib.ut.XfaUtil.prototype.XFA_CLICK_EVENT)

Vom Widget implementierte APIs

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 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 wurden. Das Widget blendet den Fehler aus.

Optionen je nach Feldtyp

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

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

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), „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
 Anzuzeigendes Werte-Array.
multiselect
 „True“, wenn Mehrfachauswahlen zulässig sind, andernfalls „false“.

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

Optionen Beschreibung
dataType String, der, der den Datentyp des Felds darstellt (ganze Zahl/Dezimalzahl).
leadDigits Maximale führende Ziffern der Dezimalzahl.
fracDigits Maximale Bruchzahlen in der Dezimalzahl.
zero Die Zeichenfolgendarstellung von Null im Gebietsschema des Felds.
decimal Die Zeichenfolgendarstellung von Dezimalzahlen im Gebietsschema des Felds.

CheckButton: RadioButton, CheckBox

Optionen Beschreibung
values

Werte-Array(an/aus/neutral).

Werte-Array für die verschiedenen Statusangaben des CheckButton. Wert[0] steht für den Status AN, Wert[1] steht für den Status AUS,
Wert[2] steht für den Status NEUTRAL. Die Länge des Werte-Arrays entspricht dem Wert der Status-Option.
states

Zahl der zulässigen Zustände.

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)

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 Schaltfläche „Löschen“.

Auf dieser Seite