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'}));

Input

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'}));

Textarea

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'}));

Select

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'}));

Checkbox

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'}));

Radio

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));