Appearance Framework for adaptive and HTML5 forms appearance-framework-for-adaptive-and-html-forms

Forms (adaptiva formulär och HTML 5-formulär) använder jQuery, Backbone.js och Understreck.js bibliotek för utseende och skript. Formulären använder också jQuery-gränssnitt Widgetar arkitektur för alla interaktiva element (till exempel fält och knappar) i formuläret. Med den här arkitekturen kan formulärutvecklare använda en mängd tillgängliga jQuery-widgetar och plugin-program i Forms. Du kan också implementera formulärspecifik logik samtidigt som du hämtar in data från användare som leadDigits/trailDigits-begränsningar eller implementerar bildklausuler. Formulärutvecklare kan skapa och använda anpassade utseenden för att förbättra datainhämtningen och göra den mer användarvänlig.

Den här artikeln är avsedd för utvecklare med tillräcklig kunskap om jQuery- och jQuery-widgetar. Den ger insikt i utseenderamverket och gör det möjligt för utvecklare att skapa ett alternativt utseende för ett formulärfält.

Utseenderamverket bygger på olika alternativ, händelser (utlösare) och funktioner för att fånga upp användarinteraktioner med formuläret och svarar på modelländringar för att informera slutanvändaren. Dessutom:

  • Ramverket innehåller en uppsättning alternativ för utseendet på ett fält. Dessa alternativ är nyckelvärdepar och indelade i två kategorier: gemensamma alternativ och fälttypsspecifika alternativ.
  • Utseendet, som en del av kontraktet, utlöser en uppsättning händelser som enter och exit.
  • Utseendet krävs för att implementera en uppsättning funktioner. Vissa funktioner är vanliga medan andra är specifika för fälttypsfunktioner.

Vanliga alternativ common-options

Här följer de angivna globala alternativen. Dessa alternativ är tillgängliga för alla fält.

Egenskap
Beskrivning
name
En identifierare som används för att ange objektet eller händelsen i skriptuttryck. Den här egenskapen anger till exempel namnet på värdprogrammet.
value
Faktiskt värde för fältet.
displayValue
Fältets värde visas.
screenReaderText
Skärm Reader använder det här värdet för att lägga till en berättarinformation om fältet. Formuläret innehåller värdet och du kan åsidosätta värdet.
tabIndex
Fältets position i formulärets tabbsekvens. Åsidosätt bara tabIndex om du vill ändra standardtabbordningen för formuläret.
roll
Elementets roll, till exempel Rubrik eller Tabell.
height
Widgetens höjd. Den anges i pixlar.
width
Widgetens bredd. Den anges i pixlar.
åtkomst
Kontroller som används för att komma åt innehållet i ett behållarobjekt, till exempel ett delformulär.
paraStyles
Paraegenskapen för ett XFA-element till widgeten.
dir
Textens riktning. Möjliga värden är ltr (vänster till höger) och rtl (höger till vänster).

Förutom dessa alternativ innehåller ramverket några andra alternativ som varierar beroende på fälttypen. Information om fältsspecifika alternativ visas nedan.

Interaktion med formulärramverk interaction-with-forms-framework

För att interagera med formulärramverket utlöser en widget vissa händelser som gör att formulärskriptet kan fungera. Om widgeten inte genererar dessa händelser fungerar inte vissa av skripten som är skrivna i formuläret för det fältet.

Händelser som utlöses av widget events-triggered-by-widget

Händelse
Beskrivning
XFA_ENTER_EVENT
Den här händelsen utlöses när fältet är i fokus. Det gör att skriptet "enter" kan köras på fältet. Syntaxen för att utlösa händelsen är
(widget)._trigger(xfalib.ut.XfaUtil.prototype.XFA_ENTER_EVENT)
XFA_EXIT_EVENT
Den här händelsen utlöses när användaren lämnar fältet. Det gör att motorn kan ställa in fältets värde och köra dess "exit"-skript. Syntaxen för att utlösa händelsen är
(widget)._trigger(xfalib.ut.XfaUtil.prototype.XFA_EXIT_EVENT)
XFA_CHANGE_EVENT
Den här händelsen utlöses för att motorn ska kunna köra "change"-skriptet som skrivits i fältet. Syntaxen för att utlösa händelsen är
(widget)._trigger(xfalib.ut.XfaUtil.prototype.XFA_CHANGE_EVENT)
XFA_CLICK_EVENT
Den här händelsen utlöses när användaren klickar på fältet. gör att motorn kan köra klickskriptet som skrivits i fältet. Syntaxen för att utlösa händelsen är
(widget)._trigger(xfalib.ut.XfaUtil.prototype.XFA_CLICK_EVENT)

API:er som implementeras av widget apis-implemented-by-widget

Utseenderamverket anropar vissa funktioner i widgeten som implementeras i de anpassade widgetarna. Widgeten måste implementera följande funktioner:

Funktion
Beskrivning
focus: function()
Fokuserar på fältet.
click: function()
Fokuserar på fältet och anropar XFA_CLICK_EVENT.

markError:function(errorMessage, errorType)

errorMessage: string som representerar felet
errorType: sträng ("warning"/"error")

Anteckning: Gäller endast för HTML5-formulär.

Skickar felmeddelande och feltyp till widgeten. Widgeten visar felet.

clearError: function()

Anteckning: Gäller endast för HTML5-formulär.

Anropas om felen i fältet är åtgärdade. Widgeten döljer felet.

Alternativ som är specifika för fälttyp options-specific-to-type-of-field

Alla anpassade widgetar ska följa ovanstående specifikationer. Om du vill använda funktionerna i olika fält måste widgeten följa riktlinjerna för det specifika fältet.

TextEdit: Textfält textedit-text-field

Alternativ
Beskrivning
flera
True if the field supports in a newline character, else false.
maxChars
Maximalt antal tecken som kan anges i fältet.

limitLengthToVisibleArea

Anteckning: Gäller endast för HTML5-formulär

Anger textfältets beteende när textbredden överskrider bredden på widgeten.

ChoiceList: DropDownList, ListBox choicelist-dropdownlist-listbox

Alternativ
Beskrivning
value
Array med valda värden.
objekt
Array med objekt som ska visas som alternativ. Varje objekt innehåller två egenskaper -
spara: värde att spara, visa: värde att visa.

redigerbar

Anteckning: Gäller endast för HTML5-formulär.

Om värdet är true aktiveras anpassad text i widgeten.
displayValue
Array med värden som ska visas.
multiselect
True if multiple selections are allowed, else false.

API api

Funktion
Beskrivning
addItem: function(itemValues)
itemValues: objekt som innehåller värdet för att visa och spara
{sDisplayVal: <displayvalue>, sSaveVal: <save value="">}
Lägger till ett objekt i listan.
deleteItem : function(nIndex)
nIndex: index för det objekt som ska tas bort från listan
Tar bort ett alternativ från listan.
clearItems: function()
Tar bort alla alternativ från listan.

NumericEdit: NumericField, DecimalField numericedit-numericfield-decimalfield

Alternativ
Beskrivning
dataType
Sträng som representerar fältets datatyp (heltal/decimal).
leadDigits
Högsta tillåtna radavståndssiffror i decimaltal.
fracDigits
Högsta tillåtna decimaltal.
noll
Strängbeteckning för noll i fältets nationella inställningar.
decimal
Strängbeteckning för decimal i fältets nationella inställningar.

CheckButton: RadioButton, CheckBox checkbutton-radiobutton-checkbox

Alternativ
Beskrivning
values

Array med värden (på/av/neutral).

Det är en array med värden för de olika lägena för checkButton. värdena[0] är värdet när läget är PÅ, värden[1] är värdet när läget är AV,
values[2] is the value when the state is NEUTRAL. Värdearrayens längd är lika med värdet för lägesalternativet.

lägen

Antal tillstånd som tillåts.

Två för adaptiva formulär (På, Av) och tre för HTML5-formulär (På, Av, Neutral).

läge

Elementets aktuella läge.

Två för adaptiva formulär (På, Av) och tre för HTML5-formulär (På, Av, Neutral).

DateTimeEdit: (DateField) datetimeedit-datefield

Alternativ
Beskrivning
dagar
Lokaliserat namn på dagar för det fältet.
månader
Lokaliserade månadsnamn för det fältet.
noll
Den lokaliserade texten för talet 0.
clearText
Den lokaliserade texten för rensningsknappen.
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2