Sie können mit Mobile Forms 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
Erstellen Sie ein Profil oder wählen Sie ein vorhandenes Profil, um ein benutzerdefiniertes Widget hinzuzufügen. Weitere Informationen zum Erstellen von Profilen finden Sie unter Erstellen benutzerdefinierter Profile.
HTML5-Formulare bieten eine Implementierung des Widget-Frameworks, das erweitert werden kann, um neue Widgets zu erstellen. Die Implementierung ist ein jQuery-Widget abstractWidget, dass 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 Renderfunktion 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 genannte Einschränkung angibt, funktionieren die Funktionen der Klasse AbstractWidget erwartungsgemäß. Anderenfalls erfordern einige der allgemeinen APIs (Fokus, Klick) Änderungen. |
getEventMap | Gibt eine Zuordnung zur Konvertierung von HTML-Elementen zu XFA-Ereignissen zurück. { blur: XFA_EXIT_EVENT, } Dieses Beispiel zeigt, dass der Weichzeichner ein HTML-Ereignis und XFA_EXIT_EVENT ein entsprechendes 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 zur Verfügung gestellt werden, und Werte sind die Funktionen, die aufgerufen werden, sobald eine Änderung in dieser 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 eines 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 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 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. Beispielsweise ist das reglerNumericFieldWidget 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);
Wenn der benutzerdefinierte Widget-Code fertig ist, registrieren Sie das Widget bei der Skripterstellungsmaschine, 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>"
}
);
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 "identifier"ein jQuery-CSS-Selektor ist, der ein bestimmtes Feld, eine Reihe 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 Name „fieldname“ | Bezeichner:"div.fieldname" | Alle Felder mit dem Namen „fieldname“ werden mithilfe des Widgets gerendert. |
Alle Felder des Typs "type"(wobei der Typ NumericField, DateField usw. ist): | Bezeichner: "div.type" | Für Timefield und DateTimeField ist der Typ textfield , da diese Felder nicht unterstützt werden. |
Alle Felder | Kennung: "div.field" |