Zunächst gibt es diverse Konfigurationsparameter, die direkt im geladenen Javascript-Code der useLib oder auch per lokalem JavaScript per gesetzt werden können. Diese Parameter dienen im Wesentlichen zur Anpassung der useLib an Alt-Systeme und Festlegen, welche useLib-Features eingesetzt werden sollen.

useLibPath

dies ist der zentrale Pfad auf die serverseitig bereitgestellten Dateien. Es ist ein Konzept vorgesehen, dass die Dateien mittels eines zentralen Verwaltungs-Scripts bereitstellt, so dass Daten ggf. auch auf anderen Servern zusätzlich gesichert oder getrennt verwaltet abgelegt sein können. Beispielsweise Wechselkurze werden so direkt vom Server der EZB geladen.

designPath

Pfade und funktionsbeschreibende Namen der vordefinierten Designansichten

wikiPath

vordefinierter Pfad für Wiki-Dateien, der automatisch ergänzt wird, wenn nur ein Dateiname im Pfad zu einer Datei mit der Endung: .txt steht, also kein / vorkommt.

cssPath

Pfad zum Zugriff auf Abfrage von JSONCSS-Daten auch über Domaingrenzen hinweg (cross-domain).

dataManagePath

Pfad zum Formular-Management der zentralen Formularverwaltung mittels Ajax für ein dynamischeres Verhalten der useLib. Per Ajax werden über den Pfad die aktiven Daten abgefragt, in dem die beiden Variablen formname und action aus dem form-Tag mit gegeben werden. Erwartet wird eine JSON-Struktur mit Damit de Die gemäß einer REST-Anwendung definierten requests sind erweiterbar:

• ?method=get&action=form.action sowie
• ?method=put&action=form.action

doUseLib

mit false lässt sich die Ausführung der useLib abstellen.

testSubmitOnly

mit true werden zum Testen die Submit-Werte als Alert-Box angezeigt.

inputIsLocal

mit true werden die Submit-Werte im lokalen und nicht englischem Standard-Format gecheckt und übermittelt z. B. Datums- und Zeitformate.

userSupport

Anpassen welche der kleinen Helferlein zur Optimierung für geübte Benutzer eingeblendet werden: sizer explainer designer widther jumper fastfeeder hamburger (löschen, wenn keine Unterstützung gewünscht wird).

statusSupport

Anpassen welche Statusse jedes Formularelements verfolgt und welche Parameterschlüssel über attrDef initialisiert werden: type value resetValue defaultValue mnemonic disabled focused changed required seacher completer invalid estimated technical verified banned restricted completed archived (löschen, wenn keine Unterstützung gewünscht wird).

designDefs

Dient zur Änderung der href-Werte durch die useLib, um Kollisionen mit alternativen Stylesheets zu vermeiden, die möglicherweise nicht im Framework verwendet werden. Es können weitere Designs mit sprachspezifischen Namen hinzugefügt werden.

designDefault

Name des voreingestellten Designs.

designVersion

Nummer der aktuell eingesetzten Design-Version

worldIndustrialLevel

Voreinstellung der Sortierung und Angezeigestatus bei Ländern, von 0 für alle Länder sortiert nach Regionen bis Level 4 für Industrialized countries, BRICS countries, emerging nations and developing regions.

sounds

mit der Pfadabgabe und den Dateinamen für inputError, inputCarry, inputHint, alarm

defaults

Grundeinstellungen für currency, unit, fon

wiki

Für Benutzer können spezielle Wiki-Kennungen definiert werden für classnames und inputtypes (nur Buchstaben und -_).

beforeOwnInput

Zeichen zum Kennzeichnen und Identifizieren von Eigeneingaben z. B. ein Bleistift [\\u270F\\uFE0F\\u2007].

mnemonicsMarker

HTML-tags zur Kennzeichnung von Kürzel im Labeltext ['tt'].

mnemonicsSeparator

Trennzeichen für Kürzel-Nummerierungen bei zusammengesetzen formatierten Eingaben (WikiEnsembles) [.]. Relevant für Blitzeingabe.

selectorButtonWidth

Seitenlänge von Mini-Knöpfen innerhalb der formatierten Eingabe [20].

fullYearFuture

Eingabebegrenzung für zukünftige Jahre ab heute [50].

fullYearPast

Eingabebegrenzung für vergangene Jahre vor heute [150].

smallYearFuture

Eingabebegrenzung bei zweistelliger Eingabe für zukünftige Jahre ab heute [10].

selectLimit

Anzahl der Select-Options ohne eingeblendete Radiobutton-Liste [12, sonst scrollen].

maxLengthInput

Maximale Eingabelänge falls nicht definiert [255].

charDefault

Erlaubte Zeichen bei Eingabe falls kein Pattern definiert. false := kein charRotor.

multiCalc

vor definierte Mehr-Spalten-Berechnung für bestimmte Datentypen in den dynamichen Berechnungen in dynamischen Listen.

elasticStep

Schrittweite in Pixeln bei zur Beschleunigung der Gummibandeingabe [35].

fastFeederRows

Zeilenhöhe der Schnelleingabe [3].

hashPassword

bei true wird das Passwort direkt in SHA3-Hash-Wert umgewandelt

puzzlePassword

bei true wird das Puzzle-Passwort in der Passwort-Eingabe angeboten.

taskSupport

wenn auf true gesetzt, ist der Aufgabenstatus einzelner Eingabefelder für Benutzer auswählbar und wird an das Backend übermittelt [false]. Die Aufgabenunterstützung ermöglicht es Benutzern zu einzelnen Feldern einen Bearbeitungsstatus zu vermerken, was sowohl bei Fragen der Zusammenarbeit in Teilprozessen als auch als Markierung zur Erinnerung hilfreich ist, beispielsweise bei geschätzten Werten.

tasksteps

Vorgabe für die unterschiedenen Statusse. Mit der Festlegung bei welchen ein Hinweis beim übernehmen bzw. versenden gegeben wird. Achtung: Bei Erweiterung der Liste muss die Datei: useLib.css angepasst werden!

errorCheck

wenn auf true gesetzt, wird eine Prüfung eingegebenen Daten vor dem Versenden ggf. mit eingebauten Fehlermeldungen durchgeführt [true].

noscript

Die useLib wird beim Laden nicht ausgeführt [false].

wikiSigns

Für die Interpretation der Wiki-Texte sind die Steuerzeichen möglichst sinnfällig definiert. Sie können auch umdefiniert werden, natürlich müssen entsprechende Änderungen dann auch in den Wiki-Texten vorgenommen werden.

wikiEnsemble

Dient der globalen Definition einer wikiEnsemble-Struktur für wiederkehrenden Meta-Controls wie beispielsweise jenes zur Adresseingabe und für dynamische Listen direkt aus dem Wiki-Text heraus.

cssNS

Die Variablen des CSS-Namensraums (CSS name space). Diese Schnittstelle ermöglicht es, den Namensraum oder auch einzelne Deklarationen anzupassen.

htmlSupport

Konfiguriert das Verhaltens der HTML5-Unterstützung und weiterer Eingabefelder. Grundsätzlich setzt die useLib zur Identifikation der HTML-Standard bzw. elementNode.querySelector('[yyy]') Aufrufe ein. Die useLib ist hier besonders flexibel, um die Identifikation in Alt-Systemen zu unterstützen, es können sogar eigene Funktionen eingetragen werden (siehe unten). Definiert wird die Suche nach

• Eingabefeldern bestimmter Typen
• verschiedene Statuskennzeichnungen von Interaktions-Elementen sowie
• verschiedene Landmark-Definitionen zur Unterstützung barrierefreier Navigation.

JSONexpands

Dient der Verhaltensanpassung einiger in htmlSupport definierter Eingabetypen, wenn sie über JSON übertragen werden. Es ist so möglich, formatierte Eingaben zu trennen in verschiedene JSON-Schlüsselnamen aufzuteilen.

langConf

Strukturen mit den unterschiedlichen Definitionen für Beschriftungen, Meldungen und Erläuterungen in unterschiedlichen Sprachen. Jede Sprache hat ihr eigenes Segment in dem sich die Variablennamen identisch wiederholen müssen. Im Grundzustand sind EN (englisch) und DE (deutsch) definiert. Die verwendete Sprache wird dynamisch aus den Browser-Einstellungen abgeleitet. Ist diese Einstellung nicht unterstützt, wird EN gesetzt.

Es ist bei den Definitionen zum htmlSupport möglich, den Standard durch einen anderen Selektor zu ersetzen, wie: class=XXX, id=XXX, pattern=XXX etc. oder auch false, wenn der HTML5-Standard benutzt werden soll. Ebenfalls ist es möglich eine eigene Identifikationsmethode zu implementieren, beispielsweise:

status: {
   required: function( elementNode ) {
   var
      l = elementNode.parentNode.getElementsByTagName( 'label' )
      , t = '*</span>'
      ;
      if ( l.innerHTML.slice( -t.length ) == t )
         return true;
      return false;
   }
}

Diese Möglichkeit dient vor allen Dingen zur Anpassung an Alt-Systeme, die es teilweise nur ermöglichen, die spezifischen Elemente an Strukturen, einer Liste von Klassennamen oder auch einem speziellen Hinweisefeld zu erkennen.

Für die Formularverwaltung und derer Steuerung mittels AJAX-Übertragungen ist eine Standardstruktur definiert. Sie enthält alle notwendigen Informationen und kann auch verwendet werden, um die Funktionalität bestehender Formulare zu erweitern. Für Alt-Systeme finden sich hier vielfältige Ansatzpunkte, die notwendigen Informationen angepasst einzuschleusen.

Pro Formular folgende JSON-Struktur definierbar, die im wesentlichen die Daten des Formulars enthält. Sie ist bei Bedarf optional erweiterbar durch formName, attrDef und tasks. Insbesondere attrDef kann bei Alt-Systemen einfach zur Element-Typ-Zuweisung benutzt werden, um die Überblendung durch ein useLib-MetaTyps auszulösen.

{
   "formName": "Name des Formulars" 
   , "attrDef": {
      ... dient der HTML-Initialisierung u. a. auch des elementTyps
      siehe unten...
   , "tasks": {      // bei aktivem taskSupport Prozesszusatzinfos für Nutzende
      "elementName": // folgende Zustände sind vordefiniert
         "estimated"  := als nicht sicher markiert, benötigt eine Endekontrolle
         , "intended" := von System oder anderer Person absichtlich geändert
         , "verified" := von System oder anderer Person untersucht und entsperrt
      , "nextElement": {
         ...
      }
   }
   // der Rest der JSON-Struktur besteht aus der Werte-Liste. Jeweils
   "elementName": "Wert des Elements"
   , "nextElementName":  "nächster Wert"
   // oder bei dynamischen Listen die entsprechende Wertefelder
   "elementNamePathPart": [      
      "nextElementNamePathPart": [ // etc.
         "elementName": "Wert des Elements"
         , "nextElementName":  "nächster Wert"
      ]
   ]
   // ACHTUNG: bei Auswahlfeldern bzw. -aufgaben ist der Wert des Elements ein
   // Feld aus den angewählten Werten (value des HTML-Elements).
}

Die attrDef-Struktur

'attrDef': {
   'elementName': { // auch Felder als fieldName[] für select, radio oder checkbox
      type := radio, checkbox, select-one, select-multiple, file, date, color
      , time, number, range usw. insbesondere die in der useLib definierten
      // verschiedene Statusattribute für Interaktion: fokussiert, verändert usw.
      // Fehler direkt verwaltet, weitere aus dem Prozessablauf, auch setzbar
      , disabled := inaktiv
      , required   := muss ausgewählt oder ausgefüllt sein
      , mnemonic := Kürzel-Liste für Schnelleingabe (siehe unten)
      , min := minimaler Wert oder Anzahl der Zeichen (abhängig vom Kontext)
      , max := maximaler Wert oder Anzahl der Zeichen (abhängig vom Kontext)
      , step := Schrittweite auf Nummer, Bereich ...
      , data :=  abhängig von Type
         * Id von zugehörigem Anfangswert
         * Passwort-Qualität in Prozent
         * Währungszeichen
         * Pfad zu Listen-JSONCSS
         * ...
   }
   'nextElement': {
      ...
   }
}

Kürzelliste (mnemonic) in attrDef

Definierte Abkürzungen für übersichtlichere Angaben erlaubter Zeichen

Der Code der useLib liefert diverse Funktionen und Strukturen, die auch außerhalb sinnvoll in dynamischen JavaScript-Ergänzungen eingesetzt werden können, wie dies beispielsweise in useEditor.html massive Anwendung findet.
Legende: () enthalten Parameter, [] sind default-Werte bzw. Varianten.

Zunächst ein paar sehr wichtige für die useLib - alle Zugriffe useLib.xxx:

Hier eine Übersicht über weitere einsetzbare Funktionen und Strukturen

Mit der formatierten Eingabe ist eine massive Optimierung der menschlichen Interaktion verbunden. Programmtechnisch wird diese zur Laufzeit generiert. Neben der einfachen Deklaration durch eine spezifische TYP-Zuweisung im Input-Tag, kann die Deklaration auch über das PATTERN-Attribut erfolgen, was in manchen Alt-Systemen leichter zu realisieren ist. Durch eine geschickte RegExp Formulierung funktionieren diese auch ohne Aktivierung der useLib korrekt und können ebenfalls für eine serverseitige Eingangsprüfung verwendet werden.

Das Verhalten der unterschiedlich formatierten Eingaben basiert auf Erkenntnissen der kognitiven Psychologie, Benutzerinterviews und experimenteller Interaktion. Die Cover-Elemente der formatierten Eingabe werden als Layer oberhalb des unsichtbaren ursprünglichen Input-Elements abgebildet. Dessen ursprünglicher Code bleibt zwar erhalten, aber alle Werte die dort eingetragen werden, sind bereits auf Fehler überprüft und fehlerhafte Eingaben sind (fast) unmöglich.

Ist die Unterstützung und Erkennungsmethode seitens der useLib im Konfigurationskopf definiert, werden die Methoden der useLib ausgelöst und die Cover-Elemente der formatierten Eingabe dynamisch und mit allen event-Funktionen erzeugt und in die HTML-Struktur eingehängt.

Die Eingabetypen definieren sich grundsätzlich über eine dreistufige Hierachie: MetaTypes, Typen und SubTypes. MetaTypes sind eine Kombination von Typen, zum Beispiel 'datetime' wird aus den Typen Datum und Uhrzeit erstellt. Typen sind wie die HTML5-Typen, die ggf. überschrieben werden. Für eine angemessene formatierte Eingabe müssen bzw. können die SubTypes durch weitere Elemente ergänzt und formatiert werden. Die Standard-Deklaration kann dabei jeweils durch eine lokale, sprachspezifische Deklaration überlagert werden. Eine vollständige Definition von Eingabetypen kann also bestehen aus:

subType

den Teilfeldern eines Formates, welche aus vordefinierten subTypes mit spezifischen Eigenschaften, Eingabemustern (patterns) kombiniert mit mit einer Längendefinition (size) oder auch einer - kurzen - Auswahlliste (select) bestehen.

separator

die Trennzeichen zwischen den einzelnen SubTypes, die mindestens das für die korrekte Formatierung notwendige Zeichen enthalten muss.

subAddon

diese Zusatzelemente sind nicht Bestandteil der eigentlichen Formatierung, sondern ermöglichen das Einfügen ergänzender Angaben, beispielsweise des Wochentages beim Datum wie von mit Zusatzfunktionalität versehener Knöpfe wie dem Aufruf des modalen Dialogs mit einem 3-Monatskalender beim Datum.

Der schon angedeutete besondere Kniff an der Deklaration der formatierten Eingabe ist, dass diese mittels eines HTML5-Pattern, also eines validen RegExp-Strings abgebildet wird. Hierzu sind einige Regeln einzuhalten, auch damit die useLib ggf. einzelne zu unterstützende Elemente automatisch identifizieren kann.

• alle Teilelemente eines Format-RegExp müssen in doppelte runden Klammern ((...)) gesetzt werden.
• ausgewählte Teilelemente können als Pseudo-Elemente definiert werden, die nicht in der fertig formatierten Eingabe erscheinen (es sind ebenfalls Pseudo-SubTypes deklariert).
• innerhalb dieser Doppelklammer werden die Teilelemente wie folgt unterschieden
  • Für subAddons wird ein spezieller, aber einfacher Trick verwendet: Ein UTF8-Zeichen mit dem Startcode FF, diese wurde in der UTF-8-Basis nicht definiert (es gibt kein Zeichen, das so codiert ist!). Ein Überprüfungs-Regexp wird es also nie finden, da es nicht zum Format gehört wird es von einem ?-Zeichen gefolgt. Unterschiedlichen Zeichen werden als Identifikatoren für das jeweilige Erscheinungsbild benutzt.
  • Seperatoren werden einfach in runde Klammern gesetzt und mehrere, voneinander durch |-Zeichen getrennt. Der erste angegebene Separator ist immer das Zeichen für das Standardformat. Ein Fragezeichen ? hinter der abschließenden runden Klammer (((a|b|c)?)) definiert Pseudo-Separatoren, die nicht im Format erscheinen. Sind weitere Separatoren angegeben, so springt der Textkursor auch bei deren Eingabe durch Benutzer ins nächste Teilfeld. Ist das letzte Separatorzeichen im UTF-8-Format angegeben, so wird dies anstelle der ersten zur Darstellung auf der Nutzungsoberfläche benutzt.
  • interne useLib-subTypes haben einen spezifischen RegExp, der bei der Analyse eines übergegebenen Pattern als Identifier für den jeweiligen subType benutzt wird, beispielsweise 1[012]|0?[1-9] für MONTH.
  • Ein in eckige Klammern gesetzter Pattern-Ausdruck gefolgt von einer vollständigen Größenangabe [ a ]{ x, y } wird als Liste erlaubter Zeichen interpertiert, wobei a die erlaubten Zeichen und x, y die minimale und maximale Anzahl von Zeichen ist. Für die erlaubten Zeichen kann ggf. auf Abkürzungen zurück gegriffen werden, die zur Laufzeit per JavaScript ausgetauscht werden (siehe oben). Auch UTF-8 Zeichen wie \\u1FE1 werden korrekt behandelt.
  • Werden stattdessen in den eckigen Klammern mehrere, voneinander durch |-Zeichen getrennte Begriffe angegeben und die Größenangabe weggeassen, so wird dies zu einer Auswahlliste (select) gewandelt. Wird dieses Konstrukt in weitere Runde Klammern gesetzt und ein Fragezeichen ? dahinter gesetzt ((([a|b|c])?)) wird so eine Pseudo-Auswahl definiert, die nicht im vorgegebenen Format vorhanden ist, aber z. B. zur Steuerung von Zusatzfunktionen benutzt werden kann.