Aangepaste weergaven maken in HTML5-formulieren
- Onderwerpen:
- Mobile Forms
Gemaakt voor:
- User
CAUTIONU kunt aangepaste widgets aansluiten op een mobiele Forms. U kunt bestaande jQuery-widgets uitbreiden of uw eigen aangepaste widgets ontwikkelen met het raamwerk voor weergaven. XFA-engine gebruikt diverse widgets, zie Vormgevingskader voor adaptieve en HTML5-formulieren voor nadere informatie.
Afbeelding: Een voorbeeld van de standaard- en aangepaste widget
Aangepaste widgets integreren met HTML5-formulieren
Een profiel maken
U kunt een profiel maken of een bestaand profiel kiezen om een aangepaste widget toe te voegen. Voor meer informatie over het maken van profielen raadpleegt u Aangepast profiel maken.
Een widget maken
HTML5-formulieren bieden een implementatie van het widgetframework dat kan worden uitgebreid om nieuwe widgets te maken. De implementatie is een jQuery-widget abstractWidget die kunnen worden uitgebreid om een nieuwe widget te schrijven. De nieuwe widget kan alleen functioneel worden gemaakt door de hieronder vermelde functies uit te breiden of te overschrijven.
| Functie/klasse | Beschrijving |
| renderen | De renderfunctie retourneert het jQuery-object voor het standaard HTML-element van de widget. Het standaardelement van HTML zou van brandpuntsafhankelijk type moeten zijn. Bijvoorbeeld: <a>, <input>, en <li>. Het geretourneerde element wordt gebruikt als $userControl. Als $userControl de bovengenoemde beperking specificeert, dan werken de functies van de klasse AbstractWidget zoals verwacht, anders vereisen sommige gemeenschappelijke APIs (nadruk, klik) veranderingen. |
| getEventMap | Retourneert een kaart om HTML-gebeurtenissen om te zetten in XFA-gebeurtenissen. { vervagen: XFA_EXIT_EVENT, } In dit voorbeeld wordt getoond dat de vervaging een HTML-gebeurtenis is en dat XFA_EXIT_EVENT corresponderende XFA-gebeurtenis is. |
| getOptionsMap | Retourneert een kaart die gedetailleerde informatie bevat over de handeling die moet worden uitgevoerd bij wijziging van een optie. De sleutels zijn de opties die aan widget worden verstrekt en de waarden zijn de functies die worden geroepen wanneer een verandering in die optie wordt ontdekt. De widget biedt handlers voor alle algemene opties (behalve value en displayValue) |
| getCommitValue | Het widgetframework laadt de functie wanneer de waarde van de widget wordt opgeslagen in het XFAModel (bijvoorbeeld bij afsluitgebeurtenis van een textField). De implementatie moet de waarde retourneren die is opgeslagen in de widget. De handler krijgt de nieuwe waarde voor de optie. |
| showValue | Standaard wordt in XFA bij Enter de rawValue van het veld weergegeven. Deze functie wordt aangeroepen om de rawValue aan de gebruiker te tonen. |
| showDisplayValue | Standaard wordt in XFA bij afsluitgebeurtenis de formattedValue van het veld weergegeven. Deze functie wordt geroepen om formattedValue aan de gebruiker te tonen. |
Als u uw eigen widget wilt maken, neemt u in het hierboven gemaakte profiel verwijzingen op van het JavaScript-bestand dat overschreven functies en nieuw toegevoegde functies bevat. De sliderNumericFieldWidget is een widget voor numerieke velden. Als u de widget in uw profiel in de koptekstsectie wilt gebruiken, neemt u de volgende regel op:
window.formBridge.registerConfig("widgetConfig" , widgetConfigObject);
Aangepaste widget registreren met XFA Scripting Engine
Wanneer de aangepaste widgetcode gereed is, registreert u de widget met de scriptengine via registerConfigAPI voor Form Bridge. Het neemt widgetConfigObject als input.
window.formBridge.registerConfig("widgetConfig",
{
".<field-identifier>":"<name-of-the-widget>"
}
);
widgetConfigObject
De widgetconfiguratie wordt aangeboden als een JSON-object (een verzameling sleutelwaardeparen), waarbij de sleutel de velden identificeert en de waarde de widget vertegenwoordigt die met deze velden moet worden gebruikt. Een voorbeeldconfiguratie ziet er als volgt uit:
*{*
*“identifier1” : “customwidgetname”,
“identifier2” : “customwidgetname2”,
..
}*
waarbij "id" een jQuery CSS-kiezer is die een bepaald veld, een set velden van een bepaald type of alle velden vertegenwoordigt. In het volgende voorbeeld wordt de waarde van de id in verschillende gevallen weergegeven:
| Type id | Id | Beschrijving |
|---|---|---|
| Specifiek veld met naam van veld | Id:"div.fieldName" | Alle velden met de naam 'veldnaam' worden weergegeven met de widget. |
| Alle velden van het type ‘type’ (waarbij het type NumericField, DateField enzovoort is).: | Id: "div.type" | Voor Tijdveld en DateTimeField is het type tekstveld omdat deze velden niet worden ondersteund. |
| Alle velden | Id: "div.field" |