Translations of this page:

form.js ist eine Klasse zur einfachen Generierung von HTML-Formularen und basiert auf app.js

Ein Formular wird typischerweise nach folgendem Vorgehen verwendet:

  1. Das Formular wird instanziert
  2. Für jeden Input wird die gewünschte Funktion aufgerufen, um ihn hinzuzufügen. Jedes Input-Feld (text, select, checkbox etc.) wird ebenfalls als Objekt instanziert, das von app abgeleitet ist. Anhand des Namens wird das Feld an die korrekte Stelle des Templates gespeichert.
  3. Mit setValues(…) werden die einzelnen Felder mit Daten versehen.
  4. Nach der Bearbeitung können die Daten mit getValues() ausgelesen werden und stehen als Array zur Verfügung, das z.B. direkt via Ajax-Call in die Datenbank gespeichert werden kann.

Das Formular stellt folgende weiteren Optionen zur Verfügung:

Die wichtigsten Methoden:

initForm(container, templateFile, templateString)

initForm ist der Konstruktor. container ist die eine HTML-ID oder die direkte Referenz auf ein DOM-Objekt, in das das Formular eingefügt werden soll. Im Gegensatz zu anderen von app abgeleiteten Objekten wird der Inhalt des Containers nicht komplett ersetzt: Darin kann sich bereits das komplette Layout des Formulars als Template befinden.

Die Argumente templateFile und templateString sind optional: Eines von beiden wird benötigt, falls der übergebene Container keine Template-Informationen für die Darstellung des Formulars enthält.

Formularfelder hinzufügen

Um Formularfelder zu erzeugen, wird für jedes Feld einmal eine addXY(key, …)-Funktion aufgerufen. Das Formular instanziert das gewünschte Input-Objekt und platziert es im Template-Element mit der ID key. Als Input-Objekt kann eine beliebige Klasse verwendet werden, die von input abgeleitet ist.

Die Methode addInput(key) zum Beispiel fügt ein normales Input-Feld mit type='text' hinzu.

Sämtliche eingefügten Felder sind vorerst leer und werden später z.B. mit setValues(…) gefüllt.

Das Formular unterstützt auch mehrdimensionale Datenstrukturen. In so einem Fall lautet der Key zum Beispiel allgemein[adresse][strasse], also gleich wie er auch in einem normalen HTML-Formular dargestellt würde.

Folgende Methoden sind zur Zeit implementiert:

  • addHidden(key) Fügt Input-Element mit type='hidden' hinzu.
  • addInfo(key, options, decimals, dec_point) Fügt einen Kommentar hinzu, ist also gewissermassen wie ein schreibgeschütztes Feld zu verwenden.
  • addInput(key) Fügt ein Input-Element mit type='text' hinzu.
  • addPwInput(key) Fügt ein Input-Element mit type='password' hinzu.
  • addNumberInput(key, size, decimals, dec_point) Fügt ein Input-Element hinzu, das nur numerische Eingaben akzeptiert. Der Inhalt ist automatisch gemäss den Parametern und rechtsbündig formatiert.
  • addTextArea(key) Fügt ein Textarea-Element hinzu
  • addSelector(key, options, nullValuePosition) Fügt ein SELECT-Element hinzu. options ist eine Hashtable aller möglichen Werte, nullValuePosition definiert den Wert, der als NULL betrachtet wird.
  • addRadio(key, options) Fügt ein Input-Element mit type='radio' hinzu.
  • addCheckbox(key, translation, caption) Fügt ein Input-Element mit type='checkbox' hinzu.
  • addDateInput(key) Fügt ein Input-Element hinzu, das eingegebene Daten korrekt formatiert (z.B. „01.03.2007“ aus „1.3.07“ oder aus „1.3.“). Es wird aber nicht auf Korrektheit hin überprüft.
  • addTimeInput(key) Fügt ein Input-Element hinzu, das eine eingegebene Zeit korrekt formatiert.
  • addDateTimeInput(key) Kombination aus dateInput und timeInput.
  • addMVInput(key, size, options) Fügt ein Feld für die Eingabe von mehreren Werten hinzu. (1d-Array)
  • addMVChecker(key, options) Fügt ein Feld für die Auswahl von mehreren Werten aus einer Liste hinzu. (1d-Array)
  • addArrayInput(key, types, rowTemplateFile) Fügt ein Element zur tabellarischen Eingabe mehrerer Werte hinzu. (2d-Array)

(Eine Beschreibung der einzelnen Input-Klassen finden Sie ebenfalls unter der Dokumentation zur Klasse input)

reset()

Setzt sämtliche Felder zurück. (Also z.B. ““ bei Text-Inputs oder den Default-Wert bei Select-Boxen.)

setValues(values, section)

Setzt die Werte aller Formularfelder, für die in der Hashtable values ein Element existiert. Das Argument section ist optional. Es kann bei mehrdimensionalen Datenstrukturen angegeben werden, um nur auf bestimmte Teile des Formulars zuzugreifen.

getValues(section)

Gibt die Werte aller Formularfelder als Hashtable zurück. Das Argument section ist optional. Es kann bei mehrdimensionalen Datenstrukturen angegeben werden, um nur auf bestimmte Teile des Formulars zuzugreifen.

getInput(key)

Gibt das JS-Objekt mit der ID key zurück. Wird verwendet, um direkt von aussen her auf ein bestimmtes Feld zuzugreifen.

getValue(key)

Gibt den Wert des gewünschten Feldes zurück. Ist eigentlich ein Wrapper für formular.getInput(key).getValue().

setValue(key, value)

Setzt den Wert des gewünschten Feldes. Ist eigentlich ein Wrapper für formular.getInput(key).setValue(value).

 
dev/coreform.txt · Zuletzt geändert: 27.07.2007 11:50 von tylmann
 
Recent changes RSS feed Creative Commons License Donate Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki