DokumentationAEM 6.5Benutzerhandbuch

Erstellen von benutzerspezifischen Erscheinungsbildern in HTML5-Formularen create-custom-appearances-in-html-forms

Last update: Sun Mar 31 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Sie können mit Mobile-Formularen benutzerdefinierte Widgets einsetzen.  Sie können mithilfe des Erscheinungsbild-Framework vorhandene jQuery Widgets erweitern oder Ihre eigenen benutzerdefinierten Widgets entwickeln. Die XFA-Engine verwendet verschiedene Widgets. Detaillierte Informationen finden Sie unter Erscheinungsbild-Framework für adaptive und HTML5-Formulare.

Beispiel für ein standardmäßiges und benutzerdefiniertes Widget

Beispiel für ein standardmäßiges und ein benutzerdefiniertes Widget

Integrieren benutzerdefinierter Widgets mit HTML5-Formularen integrating-custom-widgets-with-html-forms

Erstellen eines Profils  create-a-profile-nbsp

Erstellen Sie ein Profil oder wählen Sie ein vorhandenes Profil, um ein benutzerdefiniertes Widget hinzuzufügen.  Weitere Informationen über das Erstellen benutzerdefinierter Profile finden Sie unter Erstellen eines benutzerfreundlichen Profils.

Erstellen eines Widgets create-a-widget

HTML5-Formulare bieten eine Implementierung des Widget-Frameworks, die zum Erstellen neuer Widgets erweitert werden kann. Die Implementierung ist ein jQuery-Widget abstractWidget, das zum Schreiben eines neuen Widgets erweitert werden kann. Das neue Widget kann nur durch Erweitern bzw. Überschreiben der unten erwähnten Funktionen ordnungsgemäß laufen.

Funktion/Klasse
Beschreibung
render
Die Render-Funktion gibt das jQuery-Objekt für das standardmäßige HTML-Element des Widgets zurück.  Das standardmäßige HTML-Element sollte fokussierbar sein. Zum Beispiel <a>, <input> und <li>.  Das zurückgegebene Element wird als „$userControl“ verwendet.  Wenn $userControl die oben stehende Bedingung erfüllt, laufen die Funktionen der Klasse „AbstractWidget“ ordnungsgemäß. Ansonsten müssen einige allgemeine APIs (focus, click) geändert werden.
getEventMap
Gibt eine Zuordnung zur Konvertierung von HTML-Elementen zu XFA-Ereignissen zurück.
{
blur: XFA_EXIT_EVENT,
}
Dieses Beispiel zeigt, dass „blur“ ein HTML-Ereignis und XFA_EXIT_EVENT das entsprechende XFA-Ereignis ist.
getOptionsMap
Gibt eine Zuordnung mit detaillierten Informationen zurück, wie eine Option geändert werden kann.  Die Schlüssel sind die Optionen, die dem Widget übergeben werden, und die Werte sind die Funktionen, die aufgerufen werden, wenn eine Änderung in der jeweiligen Option erkannt wird. Das Widget verfügt über Handler für alle allgemeinen Optionen (außer „value“ und „displayValue“).
getCommitValue
Das Widget-Framework lädt Funktionen, sobald der Wert des Widgets im XFAModel gespeichert wird (beispielsweise bei einem exit-Ereignis für ein textField).  Die Implementierung sollte den Wert zurückgeben, der im Widget gespeichert wird. Der Handler erhält den neuen Wert für die Option.
showValue
Standardmäßig wird in XFA beim Ereignis „enter“ der rawValue des Felds angezeigt.  Diese Funktion wird aufgerufen, um der Benutzerin oder dem Benutzer den „rawValue“ zu zeigen.
showDisplayValue
Standardmäßig wird in XFA beim Ereignis „exit“ der formattedValue des Felds angezeigt. Diese Funktion wird aufgerufen, um der Benutzerin oder dem Benutzer den „formattedValue“ zu zeigen.

Um ein eigenes Widget im oben erstellen Profil zu erstellen, müssen Sie die Verweise der JavaScript-Datei einschließen, die die überschriebenen und neu hinzugefügten Funktionen enthält. Das sliderNumericFieldWidget ist beispielsweise ein Widget für numerische Felder. Um das Widget in Ihrem Profil in der Kopfzeile zu verwenden, fügen Sie die folgende Zeile hinzu:

window.formBridge.registerConfig("widgetConfig" , widgetConfigObject);

Registrieren von benutzerdefinierten Widgets mit XFA Scripting Engine  register-custom-widget-with-xfa-scripting-engine-nbsp

Wenn der Code des benutzerdefinierten Widgets fertig ist, registrieren Sie das Widget mit der Skripterstellungs-Engine, indem Sie die registerConfig-API für Form Bridge verwenden. Als Eingabe ist „widgetConfigObject“ erforderlich.

window.formBridge.registerConfig("widgetConfig",
        {
        ".<field-identifier>":"<name-of-the-widget>"
        }
    );

widgetConfigObject widgetconfigobject

Die Widget-Konfiguration wird als JSON-Objekt bereitgestellt (eine Sammlung von Schlüssel-Wert-Paaren), bei dem der Schlüssel die Felder identifiziert und der Wert für das Widget steht, das mit den Feldern verwendet werden soll.  Eine Beispielkonfiguration sieht wie folgt aus:

*{*

*"identifier1" : "customwidgetname",
"identifier2" : "customwidgetname2",
..
}*

wobei „Kennung“ eine jQuery-CSS-Auswahl ist, die ein bestimmtes Feld, eine Gruppe von Feldern eines bestimmten Typs oder alle Felder darstellt. Im Folgenden ist der Wert des Bezeichners in verschiedenen Fällen aufgeführt:

Typ des Bezeichners
ID
Beschreibung
Bestimmtes Feld mit dem Namen „fieldname“
Kennung: "div.fieldname"
Alle Felder mit dem Namen „fieldname“ werden mithilfe des Widgets gerendert.
Alle Felder des Typs „type“ („type“ ist hier „NumericField“, „DateField“ usw.):
Kennung: "div.type"
Für „TimeField“ und „DateTimeField“ ist der Typ „textfield“, da diese Felder nicht unterstützt werden.
Alle Felder
Kennung: "div.field"
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2