Formular

Das FormControl` Objekt rendert ein Formular mit den entsprechenden Bootstrap- und Alvine-Klassen. Im Standard wird sowohl die Alvine-Initialisierung aktiviert als auch das Abschicken über Submit deaktiviert.

form = new Alvine.Package.UI.Dialog.Form(options);

Möchte man ein Formular ohne Extras einsetzen, so muss man die Klasse und das prevent-Attribute überschreiben und action und method definieren.

form = new Alvine.Package.UI.Dialog.Form({'class': undefined, 'prevent':undefined, 'action':'send.php', 'method':'POST'});

// -> <form id="NDYwMw119" autocomplete="on" action="send.php" method="POST"></form>

Alle Formularobjekte können über ein Optionobjekt options genauer definiert werden. Die Standardwerte können mittels Form.getDefault() abgefragt werden.

Schlüssel	Beschreibung	Default	Beispiel
id	ID des Formular	zufällige ID	myID
class	CSS-Klasse des Buttons	auto-form
prevent	Abschicken des angegebenen Events deaktivieren	submit
enctype	Legt das Encoding für die zu sendenden Daten fest	undefined
accept-charset	Legt den Zeichensatz für die zu sendenden Daten fest	undefined	UTF-8
action	URL des Servers	undefined	submit.php
method	HTTP-Variable	undefined	POST
novalidate	HTML-Validierung ausschalten	undefined	WAHR
target	Legt den Kontext für das Ergebnis fest	undefined	_blank
autocomplete	Legt das Verhalten für Vervollständigung fest	on	off
name	Name des Formulars	undefined

Über die Methode Form.addControl() können Controls zum Formular hinzugefügt werden. Über die Methode Form.getControls() können alle im Formlar hinterlegten Controls abgefragt werden.

Die Funktionalität zum Verknüfen von Formularen mit einem Dataset sind der Framework-Dokumentation zu entnehmen.

Um ein Formular an ein Dataset zu binden, kann die Methode Form.bindDataset(dataset) verwendet werden. Diese Methode sorgt dafür das jedes Control bei Änderungen im Dataset benachrichtigt wird.

Das Absenden der Daten an einen Server kann über einen Submit-Button erfolgen. Wird dieser geklickt, so wird das Dataset mit dem Schlüssel key per Alvine.Registry.postToURL(key, url) an die übergebene URL gesendet.

view.on('click touch', 'button[type="submit"]', function (event) {
    // Button deaktivieren und Spinner setzen
    event.currentTarget.Alvine.UIControl.plugin.control.showSpinner();
    // Daten senden
    Alvine.Registry.postToURL('formdata','http://example.com/');        
});

Die Methode Alvine.Registry.postToURL(key, url) sendet für eine erfolgreiche Übertragung das Event senddataset.DONE.

jQuery(globalContext).on('senddataset.DONE', function (event, key, data) {
    // User informieren
    Alvine.Package.Console.Host.notifyInfo('Daten erfolgreich gesendet');
    // Button wieder freigeben und Icon für Erfolg anzeigen
    jQuery('button[value="submit"]').get(0).Alvine.UIControl.plugin.control.showSuccess();
});

Im Fehlerfall wird das Event senddataset.FAIL gesendet.

jQuery(globalContext).on('senddataset.FAIL', function (event, key, jqXHR, textStatus, errorThrown) {
    // Benutzer informieren
    Alvine.Package.Console.Host.notifyWarning(key + ' ' + textStatus + ' ' + errorThrown);
    // Button wieder freigeben und Fehler im Button anzeigen
    jQuery('button[value="submit"]').get(0).Alvine.UIControl.plugin.control.showFailure();
});

Über die Methode Form.getControlByID(id) kann ein Control über dessen ID gefunden werden. Wird kein Control gefunden, so gibt die Methode undefined zurück. Über die Methoden Form.setWarning(id, message) und Form.setDanger(id, message) können zentral über das Form-Objekt Fehlermeldungen gesetzt werden. Über die Methode Form.removeFeedback(id) werden diese Meldungen wieder entfernt.

Die Methode Form.addHandlerParser(name, callback) stellt eine Methode für die Templateengine zur Verfügung. Eine so definierte Methode kann für den Handler definiert werden. In dem folgenden Beispiel wird eine Methode parseNumber definiert. Diese Methode wandelt die Nutzereingabe in das interne Format um.

form.addHandlerParser('parseNumber', value => {
    var number = Alvine.Package.i18n.Globalize.numberParser()(value);

    if(isNaN(number)) {
        number = 0;
    }

    return Math.round(number*100);
});

Das entsprechende Control kann dann auf diese Methode zugreifen.

formatedNumberControl = new Alvine.Package.UI.Dialog.Input(
                    'number', 'Number', {
                        'handler': 'value | call:parseNumber',  // Hier wird die Methode verwendet
                        'attach': 'change',
                        'registry': 'formdata | number',
                        'formatter': value => {                 // Der Formatter sorgt für den anderen Weg
                            return Alvine.Package.i18n.Globalize.numberFormatter({
                                minimumIntegerDigits: 1, // Vorkommastellen
                                minimumFractionDigits: 1,// Nachkommastellen
                                maximumFractionDigits: 3

                            })(Number(value/100));
                        }
                    });

Über die Methode getInstanceFromDataset wird eine Instance von einem Alvine.DOM.Dataset zurück geliefert.

json = {
    "options": {},
    "controls": [
            {
                "name": "Alvine.Package.UI.Dialog.Input",
                "dataset": {
                    "id": "surname",
                    "label": 'Name',
                    "options": {
                        'placeholder': 'Geben Sie Ihren Namen ein',
                        'handler': 'value',
                        'attach': 'change',
                    }
                }
            }
    ]
}
form = new Alvine.Package.UI.Dialog.Form.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));

Controllgruppen

Zur gezielten Selektion bestimmter Controls über jQuery können diese über das Attribute data-control-group zusammengefasst und Abfragen darüber gestartet werden.

new Alvine.Package.UI.Dialog.Input('name', 'Name', {
    ...
    'control-group': 'nameedinput input mycontrol',
    ...
}));

Dieses Controll lässt sich dann per jQuery('[data-control-group~=mycontrol]') selektieren. Der Operator ~= sorgt dafür das ein ganzes Wort selektiert wird.

Input

Das Input Objekt wird über die ID und das Label definiert.

input = new Alvine.Package.UI.Dialog.Input(id, label, options);

Weitere Optionen können über ein Optionsobjekt übergeben werden.

input = new Alvine.Package.UI.Dialog.Input('name', 'i18n:name',
     {'handler': 'value', 'registry': 'myformdataset | name', 'attach': 'change'}));

Schlüssel	Beschreibung	Default	Beispiel
action	Aktionen im Dataset	undefined	append
aria-describedby		undefined
attach	Verknüpfung des Controls mit einem Event zum automatischen Datenaustausch	undefined	click:#addbutton
class	Klasse des Input-Feldes	form-control
class-control-wrapper	Input-Umschliessendes Div	undefined	col-xs-8
class-feedback	Klasse des Feedbacks	form-control-feedback
class-group	Klasse des umschließenden Div	form-group
class-help	Klasse des Hilfstextes	form-text text-muted
class-label	Klasse des Labels	undefined	col-xs-4
feedback	Feedbacktext, meisst Fehlermeldung oder Warnungen	undefined
handler	Definition des Quellwert und einer optinalen Befehlspipe	undefined	value
help	Hilfstext zur Unterstützung des Benutzers	undefined
id	ID des Formular	zufällige ID	myID
label	Bezeichung	undefined
placeholder	Platzhalter-Text	undefined
registry	Schlüssel in der Registry	undefined
type	Input-Typ	text
value	Wert des Eingabefeldes	leere Zeichenkette
min	Kleinster Wert (nummerisch oder Datum) der erlaubt ist	undefined
max	Größter Wert (nummerisch oder Datum) das erlaubt ist	undefined
minlength	Minstelänge an Zeichen für die Typen text, email, search, password, tel, oder url	undefined
maxlength	Maximale Länge an Zeichen für die Typen text, email, search, password, tel, oder url	undefined
pattern	Regulärer Ausdruck für die Felder text, search, tel, url oder email	undefined
step	Schrittgröße in Verbindung mit min und max	undefined
required	Markierung als Pflichtfeld	undefined
spellcheck	Rechtschreibprüfung	undefined	true
inputmode	Angabe welche virtuelle Tastatur eingeblendet werden soll	undefined	latin
autocomplete	Automatische Vervollständigung	undefined	on
accept	Für den Type file	undefined

Hinweis

Weitere Details zu den Feldwerten können auf der Webseite developer.mozilla.org nachgelesen werden.

Um ein Input-Feld an einen Wert in der Registry zu binden kann folgender Code verwendet werden. Jede Änderung im Eingabefeld wird mit dem Versand des change-Events in die Registry ins Feld firstname eingetragen.

(function () {
    var map = new Alvine.Types.Map();
    Alvine.Registry.set('formdata', map);
    map.set('firstname', 'Hans');
})();

form.addControl(new Alvine.Package.UI.Dialog.Input(
                            'firstname', 'Name', {
                                'placeholder': 'Geben Sie Ihren Vornamen ein',
                                'handler': 'value',
                                'attach': 'change',
                                'registry': 'formdata | firstname'
                            }));

Die Funktionalität zum Verknüfen von Formularen mit einem Dataset sind der Framework-Dokumentation zu entnehmen. Die Änderungen am Formularfeld können über folgende Anweisung ausgelesen werden:

Alvine.Registry.get('formdata').get('firstname');

Ein Eingabefeld kann auch über das Grid-System gelayoutet werden. Hierzu müssen die entsprechenden Grid-Klassen in den Feldern class-control-wrapper class-group und class-label gesetzt werden.

form.addControl(new Alvine.Package.UI.Dialog.Input(
                            'surname', 'Name', {
                                'placeholder': 'Geben Sie Ihren Namen ein',
                                'handler': 'value',
                                'attach': 'change',
                                'registry': 'formdata | surname',
                                'class-control-wrapper': 'col-10',
                                'class-group': 'form-group row',
                                'class-label': 'col-2',
                                'help': 'Geben Sie in dieses Feld Ihren Namen ein'
                            }));

Das Benutzerfeedback kann über die Methoden Form.setDanger(message) und Form.setWarning(message) aktiviert werden. Über die Methode Form.removeFeedback() kann die Meldung wieder deaktiviert werden.

Vorgefertigte Eventhandler

Über vorgefertigte EventHandler können bestimmte Funktionen impementiert werden.

Validierung

Dieser Eventhandler erlaubt es zu überprüfen, ob ein Input-Feld ausgefüllt wurde.

// Initalisierung eines Eingabefeldes
 view.on('change', 'input', Alvine.Package.UI.Dialog.Input.eventHandlerValidateNotEmpty);

Über die Methode getInstanceFromDataset wird eine Instance von einem Alvine.DOM.Dataset zurück geliefert.

json = {
        "id": "surname",
        "label": 'Name',
        "options": {
            'placeholder': 'Geben Sie Ihren Namen ein',
            'handler': 'value',
            'attach': 'change',
        }
}
input = new Alvine.Package.UI.Dialog.Input.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));

Textarea

Das Textarea Objekt wird über die ID und das Label definiert.

input = new Alvine.Package.UI.Dialog.Textarea(id, label, options);

Weitere Optionen können über ein Optionsobjekt übergeben werden.

input = new Alvine.Package.UI.Dialog.Textarea('name', 'i18n:name',
     {'handler': 'value', 'registry': 'myformdataset | name', 'attach': 'change'}));

Schlüssel	Beschreibung	Default	Beispiel
id	ID des Elements	zufällige ID	myId
label	Bezeichung	undefined
value	Wert	leere Zeichenkette
type		text
aria-describedby		undefined
placeholder	Platzhalter-Text	undefined
class-help	Klasse des Hilfstextes	form-text text-muted
class-group	Klasse des umschließenden Div	form-group
class	Klasse des Input-Feldes	form-control
col	HTML-Attribute col	undefined
row	HTML-Attribute row	undefined
class-label	Klasse des Labels	undefined	col-4
class-feedback	Klasse des Feedbacks	form-control-feedback
class-control-wrapper	Input-Umschliessendes Div	undefined	col-8
registry	Schlüssel in der Registry	undefined
handler	Definition des Quellwert und einer optinalen Befehlspipe	undefined	value
action	Aktionen im Dataset	undefined	append
attach	Verknüpfung des Controls mit einem Event zum automatischen Datenaustausch	undefined	click:#addbutton
feedback	Feedbacktext, meisst Fehlermeldung oder Warnungen	undefined
help	Hilfstext zur Unterstützung des Benutzers	undefined

Um das Control an einen Wert in der Registry zu binden kann folgender Code verwendet werden. Jede Änderung im Eingabefeld wird mit dem Versand des change-Events in die Registry ins Feld text eingetragen.

(function () {
    var map = new Alvine.Types.Map();
    Alvine.Registry.set('formdata', map);
    map.set('text', 'Lorem Ipsum');
})();

form.addControl(new Alvine.Package.UI.Dialog.Textarea(
                            'firstname', 'Name', {
                                'placeholder': 'Geben Sie einen Text ein',
                                'handler': 'value',
                                'attach': 'change',
                                'registry': 'formdata | text'
                            }));

Die Funktionalität zum Verknüfen von Formularen mit einem Dataset sind der Framework-Dokumentation zu entnehmen. Die Änderungen am Formularfeld können über folgende Anweisung ausgelesen werden:

Alvine.Registry.get('formdata').get('text');

Das Control kann auch über das Grid-System gelayoutet werden. Hierzu müssen die entsprechenden Grid-Klassen in den Feldern class-control-wrapper class-group und class-label gesetzt werden.

form.addControl(new Alvine.Package.UI.Dialog.Textarea(
                            'text', 'Text', {
                                'placeholder': 'Geben Sie einen Text ein',
                                'handler': 'value',
                                'attach': 'change',
                                'registry': 'formdata | text',
                                'class-control-wrapper': 'col-10',
                                'class-group': 'form-group row',
                                'class-label': 'col-2'
                            }));

Das Benutzerfeedback kann über die Methoden Form.setDanger(message) und Form.setWarning(message) aktiviert werden. Über die Methode Form.removeFeedback() kann die Meldung wieder deaktiviert werden.

Über die Methode getInstanceFromDataset wird eine Instance von einem Alvine.DOM.Dataset zurück geliefert.

json = {
       "id": "12234",
        "label": "Textarea 1",
        "options": {}
}
textarea = new Alvine.Package.UI.Dialog.Textarea.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));

Select

Das Select Objekt wird über die ID und das Label definiert.

input = new Alvine.Package.UI.Dialog.Select(id, label, options);

Weitere Optionen können über ein Optionsobjekt übergeben werden.

input = new Alvine.Package.UI.Dialog.Select('select1', 'Select',
     {'handler': 'value', 'registry': 'myformdataset | select', 'attach': 'change'}));

Schlüssel	Beschreibung	Default	Beispiel
action	Aktionen im Dataset	undefined	append
aria-describedby		undefined
attach	Verknüpfung des Controls mit einem Event zum automatischen Datenaustausch	undefined	click:#addbutton
class	Klasse des Input-Feldes	form-control
class-control-wrapper	Input-Umschliessendes Div	undefined	col-8
class-feedback	Klasse des Feedbacks	form-control-feedback
class-group	Klasse des umschließenden Div	form-group
class-help	Klasse des Hilfstextes	form-text text-muted
class-label	Klasse des Labels	undefined	col-4
class-option-label	Klasse für das extra-Label hinter der Checkbox	form-check-label
feedback	Feedbacktext, meisst Fehlermeldung oder Warnungen	undefined
handler	Definition des Quellwert und einer optinalen Befehlspipe	undefined	value
help	Hilfstext zur Unterstützung des Benutzers	undefined
id	ID des Elements	zufällige ID	myId
label	Bezeichung	undefined
options	Optionen die in der Auswahl angezeigt werden	undefined
registry	Schlüssel in der Registry	undefined
type		text
value	Wert	leere Zeichenkette

Um das Control an einen Wert in der Registry zu binden kann folgender Code verwendet werden. Jede Änderung im Eingabefeld wird mit dem Versand des change-Events in die Registry ins Feld select eingetragen.

(function () {
    var map = new Alvine.Types.Map();
    Alvine.Registry.set('formdata', map);
    map.set('select', 'index2');
})();

Die Auswahlfelder für das Select werdne über den options Schlüssel definiert. Als Option kann entweder ein Standard-Javascript-Objekt oder ein Objekt vom Typ Alvine.Types.Map übergeben werden.

var = selectOptions = new Alvine.Types.Map();
selectOptions.set('index1','Value1');
selectOptions.set('index2','Value2');
selectOptions.set('index3','Value3');

form.addControl(new Alvine.Package.UI.Dialog.Select(
                            'select', 'Select', {
                                'handler': 'value',
                                'attach': 'change',
                                'registry': 'formdata | select',
                                'options': selectOptions
                            }));

Select-Feld mit Javascript-Objekt als Options

form.addControl(new Alvine.Package.UI.Dialog.Select(
                            'select', 'Select', {
                                'options': {'index1': 'Value1', 'index2': 'Value2', 'index3': 'Value3', 'index4': 'Value4'}
                            }));

Die Funktionalität zum Verknüfen von Formularen mit einem Dataset sind der Framework-Dokumentation zu entnehmen. Die Änderungen am Formularfeld können über folgende Anweisung ausgelesen werden:

Alvine.Registry.get('formdata').get('select');

Das Control kann auch über das Grid-System gelayoutet werden. Hierzu müssen die entsprechenden Grid-Klassen in den Feldern class-control-wrapper class-group und class-label gesetzt werden.

form.addControl(new Alvine.Package.UI.Dialog.Select(
                            'select', 'Auswahl', {
                                'handler': 'value',
                                'attach': 'change',
                                'registry': 'formdata | select',
                                'help': 'Hilfstext',
                                'class-select-wrapper': 'col-10',
                                'class-label': 'col-2',
                                'class-group': 'form-group row',
                                'options': {'index1': 'Value1', 'index2': 'Value2', 'index3': 'Value3', 'index4': 'Value4'}
                            }));

Das Benutzerfeedback kann über die Methoden Form.setDanger(message) und Form.setWarning(message) aktiviert werden. Über die Methode Form.removeFeedback() kann die Meldung wieder deaktiviert werden.

Vorgefertigte Eventhandler

Über vorgefertigte EventHandler können bestimmte Funktionen impementiert werden.

Validierung

Dieser Eventhandler erlaubt es zu überprüfen, ob das Select-Control einen Wert besitzt.

// Initalisierung eines Eingabefeldes
 view.on('change', 'input', Alvine.Package.UI.Dialog.Select.eventHandlerValidateSelected);

Über die Methode getInstanceFromDataset wird eine Instance von einem Alvine.DOM.Dataset zurück geliefert.

json = {
       "id": "12234",
        "label": "Select 1",
        "options": {
            "options": {"index1": "Value1", "index2": "Value2", "index3": "Value3", "index4": "Value4"}
        }
}
select = new Alvine.Package.UI.Dialog.Select.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));

Checkbox

Das Checkbox Objekt wird über die ID und das Label definiert.

input = new Alvine.Package.UI.Dialog.Checkbox(id, label, options);

Weitere Optionen können über ein Optionsobjekt übergeben werden.

input = new Alvine.Package.UI.Dialog.Checkbox('checkbox1', 'checkbox',
     {'handler': 'value', 'registry': 'myformdataset | checkbox', 'attach': 'change'}));

Schlüssel	Beschreibung	Default	Beispiel
id	ID des Elements	zufällige ID	myId
label	Bezeichung	undefined
value	Wert	leere Zeichenkette
type		text
aria-describedby		undefined
class-help	Klasse des Hilfstextes	form-text text-muted
class-group	Klasse des umschließenden Div	form-group
class	Klasse des Input-Feldes	form-control
class-label	Klasse des Labels	undefined	col-4
class-feedback	Klasse des Feedbacks	form-control-feedback
class-control-wrapper	Input-Umschliessendes Div	undefined	col-8
registry	Schlüssel in der Registry	undefined
handler	Definition des Quellwert und einer optinalen Befehlspipe	undefined	value
action	Aktionen im Dataset	undefined	append
attach	Verknüpfung des Controls mit einem Event zum automatischen Datenaustausch	undefined	click:#addbutton
feedback	Feedbacktext, meisst Fehlermeldung oder Warnungen	undefined
help	Hilfstext zur Unterstützung des Benutzers	undefined
option-label	Label hinter der Checkbox
class-option-label	Klasse für das extra-Label hinter der Checkbox	form-check-label

Um das Control an einen Wert in der Registry zu binden kann folgender Code verwendet werden. Jede Änderung im Eingabefeld wird mit dem Versand des change-Events in die Registry ins Feld checkbox eingetragen.

(function () {
    var map = new Alvine.Types.Map();
    Alvine.Registry.set('formdata', map);
    map.set('checkbox', 'on');
})();

form.addControl(new Alvine.Package.UI.Dialog.Checkbox(
                            'checkbox', 'Checkbox', {
                                'handler': 'value',
                                'attach': 'change',
                                'registry': 'formdata | checkbox'
                            }));

Die Funktionalität zum Verknüfen von Formularen mit einem Dataset sind der Framework-Dokumentation zu entnehmen. Die Änderungen am Formularfeld können über folgende Anweisung ausgelesen werden:

Alvine.Registry.get('formdata').get('checkbox');

Das Control kann auch über das Grid-System gelayoutet werden. Hierzu müssen die entsprechenden Grid-Klassen in den Feldern class-control-wrapper class-group und class-label gesetzt werden. Mit Hilfe von class-label wird die Checkbox eingerückt. Außerdem kann über die Eigenschaft option-label noch ein Label hinter die Checkbox gesetzt werden.

form.addControl(new Alvine.Package.UI.Dialog.Checkbox(
                            'checkbox', 'Checkbox 1', {
                                'handler': 'value',
                                'attach': 'change',
                                'registry': 'formdata | checkbox1',
                                'label-option': 'Checkbox',
                                'class-label': 'col-sm-2',
                                'help': 'Hilfstext',
                                'class-control-wrapper': 'col-sm-10',
                                'class-group': 'form-group row'
                            }));

Das Benutzerfeedback kann über die Methoden Form.setDanger(message) und Form.setWarning(message) aktiviert werden. Über die Methode Form.removeFeedback() kann die Meldung wieder deaktiviert werden.

Vorgefertigte Eventhandler

Über vorgefertigte EventHandler können bestimmte Funktionen impementiert werden.

Validierung

Dieser Eventhandler erlaubt es zu überprüfen, ob die Checkbox angehackt wurde.

// Initalisierung eines Eingabefeldes
 view.on('change', 'input', Alvine.Package.UI.Dialog.Checkbox.eventHandlerValidateChecked);

Über die Methode getInstanceFromDataset wird eine Instance von einem Alvine.DOM.Dataset zurück geliefert.

json = {
     "id": "12234",
     "label": "Checkbox 1"     
}
select = new Alvine.Package.UI.Dialog.Checkbox.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));

Radiobox

Das Radio Objekt wird über die ID und das Label definiert.

input = new Alvine.Package.UI.Dialog.Radio(id, label, options);

Weitere Optionen können über ein Optionsobjekt übergeben werden.

input = new Alvine.Package.UI.Dialog.Radio('radio1', 'radio',
     {'handler': 'value', 'registry': 'myformdataset | radio', 'attach': 'change'}));

Schlüssel	Beschreibung	Default	Beispiel
action	Aktionen im Dataset	undefined	append
aria-describedby		undefined
attach	Verknüpfung des Controls mit einem Event zum automatischen Datenaustausch	undefined	click:#addbutton
class	Klasse des Input-Feldes	form-control
class-control-wrapper	Input-Umschliessendes Div	undefined	col-8
class-feedback	Klasse des Feedbacks	form-control-feedback
class-group	Klasse des umschließenden Div	form-group
class-help	Klasse des Hilfstextes	form-text text-muted
class-label	Klasse des Labels	undefined	col-form-legend col-sm-2
class-option-label	Klasse für das extra-Label hinter dem Control	form-check-label
feedback	Feedbacktext, meisst Fehlermeldung oder Warnungen	undefined
handler	Definition des Quellwert und einer optinalen Befehlspipe	undefined	value
help	Hilfstext zur Unterstützung des Benutzers	undefined
id	ID des Elements	zufällige ID	myId
label	Bezeichung	undefined
options	Auswahlliste	undefined
registry	Schlüssel in der Registry	undefined
type		radio
value	Wert	leere Zeichenkette

Um das Control an einen Wert in der Registry zu binden kann folgender Code verwendet werden. Jede Änderung im Eingabefeld wird mit dem Versand des change-Events in die Registry ins Feld radio eingetragen.

(function () {
    var map = new Alvine.Types.Map();
    Alvine.Registry.set('formdata', map);
    map.set('radio', 'on');
})();

form.addControl(new Alvine.Package.UI.Dialog.Radio(
                            'radio', 'Radio', {
                                'handler': 'value',
                                'attach': 'change',
                                'registry': 'formdata | radio'
                            }));

Die Funktionalität zum Verknüfen von Formularen mit einem Dataset sind der Framework-Dokumentation zu entnehmen. Die Änderungen am Formularfeld können über folgende Anweisung ausgelesen werden:

Alvine.Registry.get('formdata').get('radio');

Das Control kann auch über das Grid-System gelayoutet werden. Hierzu müssen die entsprechenden Grid-Klassen in den Feldern class-control-wrapper class-group und class-label gesetzt werden. Mit Hilfe von class-label wird das Control eingerückt.

form.addControl(new Alvine.Package.UI.Dialog.Radio(
                            'radio', 'Radio 1', {
                                'handler': 'value',
                                'attach': 'change',
                                'registry': 'formdata | checkbox1',
                                'options': {'index1': 'Value1', 'index2': 'Value2', 'index3': 'Value3', 'index4': 'Value4'},
                                'class-label': 'col-sm-2',
                                'help': 'Hilfstext',
                                'class-control-wrapper': 'col-sm-10',
                                'class-group': 'form-group row'
                            }));

Das Benutzerfeedback kann über die Methoden Form.setDanger(message) und Form.setWarning(message) aktiviert werden. Über die Methode Form.removeFeedback() kann die Meldung wieder deaktiviert werden.

Über die Methode getInstanceFromDataset wird eine Instance von einem Alvine.DOM.Dataset zurück geliefert.

json = {
    "id": "12234",
    "label": "Radio1",
    "options": {
           "options": {"index1": "Value1", "index2": "Value2", "index3": "Value3", "index4": "Value4"}
    },   
}
radio = new Alvine.Package.UI.Dialog.Radio.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));

Vorgefertigte Eventhandler

Über vorgefertigte EventHandler können bestimmte Funktionen impementiert werden.

Aktuell liegt kein vorgefertigter Eventhandler vor.

TagsInput

Über das TagsInput-Kontroll lässt sich ein Tag-Eingabefeld realisieren.

form.addControl(new Alvine.Package.UI.Dialog.TagsInput(
            'myidid', 'myfield', {
            'handler': 'value',
            'attach': 'change',
            'registry': registryKey+' | current | name'
            }));

Schlüssel	Beschreibung	Default	Beispiel
action	Aktion im Dataset	undefined
allowDuplicates	Schalter ob Dupplikate erlaubt sind	false
aria-describedby		undefined
attach	Attachment	undefined
class	CSS-Klasse des Input-Controls	form-control
class-control-wrapper	CSS-Klasse des Wrappers	undefined
class-feedback	CSS-Klasse des Feedbacks	form-control-feedback
class-group	CSS-Klasse der Gruppe	form-group
class-help	CSS-Klasse der Hilfe	form-text text-muted
class-label	CSS-Klasse des Labels	undefined
confirmKeys	Bestätigungs Schlüsselcode	[13,14]
feedback	Feedback	undefined
handler	Handler	undefined
help	Hilfstext	undefined
id	ID des Controls	zufällige ID
label	Label	undefined
maxChars	Maximale Anzahl an Zeichen	undefined
maxTags	Anzahl der maximalen Tags	undefined
placeholder	Platzhalter	undefined
readonly	Schreibgeschützt	undefined
registry	Schlüssel in der Registry	undefined
type	Typ des Eingabefelds	text
value	Wert des Controls	leere Zeichenkette

json = {
     "id": "12234",
     "label": "TagsInput",
     "options": {} 
}
tagsInput = new Alvine.Package.UI.Dialog.TagsInput.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));