Bootstrap UI-Komponenten¶
Die Bootstrap-UI-Komponenten stellen Objekte für die Darstellung von Formularen, Navigationen und Layouts zur Verfügung. Die Komponenten sind alle vom Control-Objekt abgeleitet und erben somit dessen Funktionalität.
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.
Typography¶
Headings¶
Die Überschriften-Controls stellen eine einfache Möglichkeit bereit, Überschriften zu definieren.
Über die Klassen-Eigenschaft kann die Display-Größe von Bootstrap gesetzt werden.
// Große Überschrift
heading = new Alvine.Package.UI.Dialog.H1('Bootstrap Display 1',{'class':'display-1'}));
// Normale Überschirft
heading = new Alvine.Package.UI.Dialog.H1('Bootstrap Heading 1');
Über den Parameter options
kann folgender Wert definiert werden:
Schlüssel | Beschreibung | Default | Beispiel |
---|---|---|---|
class | Klasse der Überschrift | undefined | display-1 |
Abgeleitet von Heading sind die Objekte H1
,H2
,H3
,H4
,H5
,H6
Über die Methode getInstanceFromDataset
wird eine Instance von einem Alvine.DOM.Dataset
zurück geliefert.
json = {
"title": "Bootstrap Display 1",
"options": {}
}
heading = new Alvine.Package.UI.Dialog.H1.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));
Paragraph¶
Das Paragraph-Control ist ein einfacher Textblock, der in
Tags eingebunden wird.
// Lead-Paragraph
lead = new Alvine.Package.UI.Dialog.Paragraph('Lorem ipsum dolor sit amet, ...', {'class': 'lead'}));
// Normaler Paragraph
paragraph = new Alvine.Package.UI.Dialog.Paragraph('Lorem ipsum dolor sit amet, ...'));
Über den Parameter options
kann folgender Wert definiert werden:
Schlüssel | Beschreibung | Default | Beispiel |
---|---|---|---|
class | Klasse des Paragraphen | undefined | lead |
Über die Methode getInstanceFromDataset
wird eine Instance von einem Alvine.DOM.Dataset
zurück geliefert.
json = {
"text": "Lorem ipsum dolor sit amet, ...",
"options": {}
}
heading = new Alvine.Package.UI.Dialog.Paragraph.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));
Zitat/Blockquotes¶
Das Zitat-Control ist ein Textblock, der in <blockquotes>
Tags eingebunden wird. Das Objekt wird über den Konstruktor Alvine.Package.UI.Dialog.Blockquote()
erstellt.
// Lead-Paragraph
lead = new Alvine.Package.UI.Dialog.Blockquote('Lorem ipsum dolor sit amet, ...', {'class': 'lead'}));
// Normaler Paragraph
paragraph = new Alvine.Package.UI.Dialog.Blockquote('Lorem ipsum dolor sit amet, ...'));
Über den Parameter options
können folgende Wert definiert werden:
Schlüssel | Beschreibung | Default | Beispiel |
---|---|---|---|
class | Klasse des Controls | blockquote | blockquote m-b-2 |
footer | Zitat Fußzeile | undefined | Albert Einstein |
class-footer | Klasse der Fußzeile | blockquote-footer | m-y-2 |
Über die Methode getInstanceFromDataset
wird eine Instance von einem Alvine.DOM.Dataset
zurück geliefert.
json = {
"text": "Lorem ipsum dolor sit amet, ...",
"options": {}
}
heading = new Alvine.Package.UI.Dialog.Blockquote.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));
Liste¶
Eine einfache Liste kann über das List-Objekt Alvine.Package.UI.Dialog.List()
erstellt werden.
// Ohne Optionen
list = new Alvine.Package.UI.Dialog.List(['Lorem ipsum dolor sit amet', 'Consectetur adipiscing elit', 'Integer molestie lorem at massa']));
// Mit Optionen
list = new Alvine.Package.UI.Dialog.List(['Lorem ipsum dolor sit amet', 'Consectetur adipiscing elit', 'Integer molestie lorem at massa'], {'class':'list-unstyled'}));
Über den Parameter options
können folgende Wert definiert werden:
Schlüssel | Beschreibung | Default | Beispiel |
---|---|---|---|
class | Klasse des Controls | list-unstyled |
Über die Methode getInstanceFromDataset
wird eine Instance von einem Alvine.DOM.Dataset
zurück geliefert.
json = {
"rows":[
'Lorem ipsum dolor sit amet',
'Consectetur adipiscing elit',
'Integer molestie lorem at massa'
],
"options": {}
}
list = new Alvine.Package.UI.Dialog.List.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));
HR - Trenner¶
Der horizontale Trennstrich erlaubt eine Trennung von unterschiedlichen Elementen. Das Control fügt ein <hr>
Element in das DOM ein.
hr = new Alvine.Package.UI.Dialog.HR({'class':'my-4'});
Schlüssel | Beschreibung | Default | Beispiel |
---|---|---|---|
class | Klasse des Elements | undefined | my-2 |
Über die Methode getInstanceFromDataset
wird eine Instance von einem Alvine.DOM.Dataset
zurück geliefert.
json = {
"options": {}
}
heading = new Alvine.Package.UI.Dialog.HR.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));
Code¶
User-Input (Keyboard)¶
Die Steuerung über die Tastatur kann über Shortcuts definiert werden. Diese Tastenkombinationen können in einer Komponente über die keyboard-Objekte eingebunden werden.
keyboard = new Alvine.Package.UI.Dialog.Keyboard('ctrl + ,')
Das Keyboard-Objekt kann auch in andere Controls, wie dem Paragraph, eingebunden werden.
keyboard = new Alvine.Package.UI.Dialog.Paragraph('Lorem ipsum '+(new Alvine.Package.UI.Dialog.Keyboard('ctrl + ,'))+', sed diam ...'));
Das Keyboard-Objekt verfügt über keine Optionen.
Tabelle¶
Das Tabellen-Objekt Alvine.Package.UI.Dialog.Table(options)
erlaubt es Tabellen in die Komponente einzubinden.
// Neue Tabelle erstellen
table = new Alvine.Package.UI.Dialog.Table({'id':'myID'});
Über den Parameter options
können folgende Wert definiert werden:
Schlüssel | Beschreibung | Default | Beispiel |
---|---|---|---|
id | ID der Tabelle | myId | |
class | Tabellenklasse | table | table table-sm |
class-responsive | Responsive-Feature | table-responsive |
Das Aussehen der Tabelle kann über verschiedene Kasse gesteuert werden. Die Details sind auf der Bootstrap-Webseite nachzulesen.
Einige Klassen verfügbare Klassen sind: table-inverse
, table-striped
, table-bordered
, table-hover
, table-sm
. Das folgende Beispiel verwendet die Klassen: table table-bordered table-inverse
Die einzelnen Zeilen und Zellen werden über Methoden zur Tabelle hinzugefügt.
table = new Alvine.Package.UI.Dialog.Table(undefined, {'class':'table table-bordered table-inverse'});
row1 = new Alvine.Package.UI.Dialog.TableRow();
// Inhalte können direkt als Zeichenkette eingeben werden
row1.addCell('#1');
// Oder per TableCell-Objekt
row1.addCell(new Alvine.Package.UI.Dialog.TableCell('Mark'));
row1.addCell(new Alvine.Package.UI.Dialog.TableCell('Otto'));
// Oder als
// row zur Tabelle hinzufügen
table.addRow(row1);
Tabellen lassen sich auch über Arrays oder Collections initialisieren. Beim Aufruf Table.initFrom(data, firstRowIsHeader, lastRowIsFooter)
wird der bisherige Inhalt der Tabelle gelöscht
und die Daten aus dem Array oder der Collection genommen. Wird im Parameter firstRowIsHeader
true übergeben, so wird die erste Zeile aus dem Dataset als Überschrift genommen. Das gleiche Verhalten
ist für den footer mit dem Flag lastRowIsFooter
möglich.
table = new Alvine.Package.UI.Dialog.Table();
table.initFrom([
['#', 'First Name', 'Last Name', 'Username'],
['1', 'Mark', 'Otto', '@mdo'],
['2', 'Jacob', 'Thornton', '@fat'],
['3', 'Larry', 'the Bird', '@twitter']
], true, false); // Header + Daten
Will man manuell einzelne Zeilen hinzufügen kann man Table.addRow(row)
verwenden. row
kann dabei vom Typ TableRow
, TableCell
oder String
sein. Der HEader und Footer wird über Table.setHeader(header)
und
Table.setFooter(footer)
bearbeitet.
Über die Methode Table.clearRows()
können alle Zeilen gelöscht werden. Ein definierter Header und Footer bleiben davon uberührt. Diese können mit der Methode Table.clearHeader()
und Table.clearFooter()
gelöscht werden.
Einzelne Zeilen lassen sich per Table.updateRow(index, data)
updaten.
Vorgefertigte Eventhandler¶
Über vorgefertigte EventHandler können bestimmte Funktionen impementiert werden.
Zeilenwähler¶
Dieser Eventhandler erlaubt es Zeilen auszuwählen
// Initalisierung eines Tabellen-Selectors
view.on('click', 'table.table tr', Alvine.Package.UI.Dialog.Table.eventHandlerSelectTable);
Die selektierten Tabellen-Zeilen können über jQuery('tr.table-active')
ausgelesen werden. Ausserdem
können die Änderungen über folgende Events abonniert werden. Als Parameter wird die Tabelle und die
gewählten TR-Elemente übergeben.
- selectallrows.ALVINE.TABLE (es wurden alle Zeilen ausgwählt)
- deselectallrows.ALVINE.TABLE (die Auswahl wurde für alle Zeilen aufgehoben)
- deselectrow.ALVINE.TABLE (die Auswahl einer Zeile wurden aufgehoben)
- selectrow.ALVINE.TABLE (es wurden eine Zeile ausgewälht)
getInstanceFromDataset¶
{
"name": "Alvine.Package.UI.Dialog.Table",
"dataset": {
"options": {},
"header":
{
"name": "Alvine.Package.UI.Dialog.TableRow",
"dataset": {
"options": {},
"cells": [
{
"name": "Alvine.Package.UI.Dialog.TableCell",
"dataset": {
"content": "H1",
"options": {}
}
},
{
"name": "Alvine.Package.UI.Dialog.TableCell",
"dataset": {
"content": "H2",
"options": {}
}
},
{
"name": "Alvine.Package.UI.Dialog.TableCell",
"dataset": {
"content": "H3",
"options": {}
}
}
]
}
},
"rows": [
{
"name": "Alvine.Package.UI.Dialog.TableRow",
"dataset": {
"options": {},
"cells": [
{
"name": "Alvine.Package.UI.Dialog.TableCell",
"dataset": {
"content": "ABS",
"options": {}
}
},
{
"name": "Alvine.Package.UI.Dialog.TableCell",
"dataset": {
"content": "123",
"options": {}
}
},
{
"name": "Alvine.Package.UI.Dialog.TableCell",
"dataset": {
"content": "uuu",
"options": {}
}
}
]
}
},
{
"name": "Alvine.Package.UI.Dialog.TableRow",
"dataset": {
"options": {},
"cells": [
{
"name": "Alvine.Package.UI.Dialog.TableCell",
"dataset": {
"content": "ABS",
"options": {}
}
},
{
"name": "Alvine.Package.UI.Dialog.TableCell",
"dataset": {
"content": "123",
"options": {}
}
},
{
"name": "Alvine.Package.UI.Dialog.TableCell",
"dataset": {
"content": "uuu",
"options": {}
}
}
]
}
}
],
"footer":
{
"name": "Alvine.Package.UI.Dialog.TableRow",
"dataset": {
"options": {},
"cells": [
{
"name": "Alvine.Package.UI.Dialog.TableCell",
"dataset": {
"content": "F1",
"options": {}
}
},
{
"name": "Alvine.Package.UI.Dialog.TableCell",
"dataset": {
"content": "F2",
"options": {}
}
},
{
"name": "Alvine.Package.UI.Dialog.TableCell",
"dataset": {
"content": "F3",
"options": {}
}
}
]
}
},
}
}
Tabellen-Zeile (TableRow)¶
Eine Tabellen-Zeile dient als Container für die einzelnen Inhalte und kann über TableRow(options)
erstellt werden.
row = new TableRow();
row.addCell(new TableCell('hallo Welt'));
Schlüssel | Beschreibung | Default | Beispiel |
---|---|---|---|
class | Tabellenklasse | undefined |
Mittels TableRow.clear()
werden alle Spalten entfernt. Mit TableRow.getCells()
erhält man eine Collection mit allen Spalten. TableRow.addCell(cell)
fügt eine Spalte hinzu.
Tabellen-Spalte (TableCell)¶
Eine Tabellen-Zeile dient als Container für die einzelnen Inhalte und kann über TableCell(content, options)
erstellt werden.
col = new TableCell('hallo Welt');
Schlüssel | Beschreibung | Default | Beispiel |
---|---|---|---|
class | Tabellenklasse | undefined |
Panel¶
En Panel ist ein einfacher Container und kann über Panel(title, options)
erstellt werden.
Schlüssel | Beschreibung | Default | Beispiel |
---|---|---|---|
id | ID der Tabliste | undefined | myId |
title | Titel | leere Zeichenkette |
Über die Methode Panel.addContent(content)
können weitere Inhalte hinzugefügt werden. content
kann entweder eine Zeichenkette oder ein Control
-Objekt sein.
Über die Methode getInstanceFromDataset
wird eine Instance von einem Alvine.DOM.Dataset
zurück geliefert.
json = {
"title": "Hallo Welt",
"options": {},
"content": []
}
panel = new Alvine.Package.UI.Dialog.Panel.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));
Buttons¶
Button¶
Bootstrap-Buttons können über den Konstruktor Alvine.Package.UI.Dialog.Button(content, options)
erstellt werden.
button = new Alvine.Package.UI.Dialog.Button('OK', options);
Über Optionen können verschiedene Aspekte des Buttons definiert werden.
Schlüssel | Beschreibung | Default | Beispiel |
---|---|---|---|
autofocus | Dieses Element soll den Autofocus erhalten | undefined | |
class | CSS-Klasse des Buttons | btn btn-primary | btn btn-secondary |
class-icon-prefix | Icon-Klasse, das vor dem Inhalt angezeigt wird | undefined | |
class-icon-suffix | Icon-Klasse die nach den Inhalt angezeigt wird (wird für Spinner verwendet) | undefined | |
content | Schatfläche des Buttons | OK | |
disabled | Sperren des Buttons | undefined | WAHR |
form | ID des zugehörigen Formulars | undefined | |
formaction | Aktion des Formulars | undefined | |
formenctype | Encoding des Formulars | undefined | |
formmethod | Methode des Formulars | undefined | |
formtarget | Zeil im Formular | undefined | |
id | ID des Buttons | zufällige ID | myID |
on | Übergabe von Eventhandler an den button | undefined | click': function(event) |
placement | Position (wird bei Tooltip aus dem tooltipPosition übernommen) | undefined | |
target | Setzt den Wert data-target und wird zum Beispiel zum öffnen für Modal-Dialoge verwendet. | undefined | #myid |
title | Im Falle eines Tooltips wird title mit dem Wert aus tooltipText überschrieben | undefined | |
toggle | Alternatives Toggle zum Beispiel für Dropdown oder Collapse | undefined | |
tooltipPosition | Positon des Tooltips | top | bottom |
tooltipText | Text des Tooltips | undefined | Das ist ein Tooltip |
type | Typ des Buttons | undefined | submit |
value | Wert der mit dem Button übertragen werden soll | undefined | submit |
Wird ein Tooltip über tooltipText definiert, so kann keine andere Funktion (Dropdown, Collapse) definiert werden.
Die Methode Button.showSpinner()
zeigt ein Spinner-Icon an und deaktiviert den Button. Mit Button.hideSpinner()
kann der Spinner wieder deaktiviert werden.
Neben dem Spinner kann auch ein Erfolgsicon mit Button.showSuccess()
und ein Icon für den Fehlerfall mit Button.showFailure()
angzeigt werden.
Die Methode Button.removeIcons()
entfertn alle Icon-Klassen und aktiviert den Button. Die Methode Button.hideSpinner()
ist ein Alias für Button.removeIcon()
.
Über die Methode getInstanceFromDataset
wird eine Instance von einem Alvine.DOM.Dataset
zurück geliefert.
json = {
"content": "OK",
"options": {},
}
button = new Alvine.Package.UI.Dialog.Button.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));
json = {
"icons": ['fal fa-file', 'fal fa-angle-right', 'fal fa-save'],
"options": {},
}
button = new Alvine.Package.UI.Dialog.Button.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));
DropDownButton¶
Ein DropdownButton besitzt ein Menü, das durch Klick auf den Button geöffnet wird und verschiedene Menüeinträge enthalten kann.
button = new Alvine.Package.UI.Dialog.DropdownButton(content, options);
Über Optionen können verschiedene Aspekte des Buttons definiert werden, siehe hierzu die Tabelle bei Buttons.
Hinweis
Ein Dropdown-Button kann keinen Toltip enthalten.
Neue Menüeinträge können über die Methode DropdownButton.addItem(item)
dem Button hinzugefügt werden. Über die Methode
DropdownButton.hasItem(item)
kann geprüft werden, ob ein Item enthalten ist und über DropdownButton.removeItem(item)
kann ein Eintrag wieder entfernt werden. Mit Hilfe der Methode DropdownButton.getItem()
kann ein Eintrag ausgelesen werden.
Alle Items bekommt man über die Methode DropdownButton.getItems()
Über die Methode getInstanceFromDataset
wird eine Instance von einem Alvine.DOM.Dataset
zurück geliefert.
json = {
"content": "OK",
"options": {},
"items": [
{
"name": "Alvine.Package.UI.Dialog.DropdownButtonItem",
"dataset": {
"value":"wert1",
"label":"Item 1",
"options": {}
}
},
{
"name": "Alvine.Package.UI.Dialog.DropdownButtonItem",
"dataset": {
"value":"wert2",
"label":"Item 2",
"options": {}
}
}
]
}
dropdownButton = new Alvine.Package.UI.Dialog.DropdownButton.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));
json = {
"icons": ['fal fa-file', 'fal fa-angle-right', 'fal fa-save'],
"options": {},
"items": []
}
dropdownButton = new Alvine.Package.UI.Dialog.DropdownButton.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));
DropdownButtonItem¶
Menüeinträge des DropdownButton
sind Objekte vom Typ DropdownButtonItem
.
button = new Alvine.Package.UI.Dialog.DropdownButton(options);
button.addItem(new Alvine.Package.UI.Dialog.DropdownButtonItem(target, label, options));
Ein Menüeintrag kann folgende Optionen besitzen:
Schlüssel | Beschreibung | Default | Beispiel |
---|---|---|---|
id | ID des Buttons | zufällige ID | myID |
value | Ziel des Menüeintrages | # | |
label | Bezeichnung des Menüeintrages | - | Liste |
class | CSS-Klasse des Eintrages | dropdown-item |
Über die Methode getInstanceFromDataset
wird eine Instance von einem Alvine.DOM.Dataset
zurück geliefert.
json = {
"target":"#dasisteinziel",
"label":"Item 1",
"options": {}
}
dropdownButtonItem = new Alvine.Package.UI.Dialog.DropdownButtonItem.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));
ButtonGroup¶
Mehrere Buttons können mit Hilfe einer ButtonGroup
zusammengefasst werden. Über die Methde ButtonGroup.addButton(button)
werden
Buttons zur Gruppe hinzugefügt. Über ButtonGroup.getButtons()
können alle Buttons der Gruppe ermittelt werden. Über
ButtonGroup.hasButton(button)
kann geprüft werden ob ein Button bereits enthalten ist und über ButtonGroup.removeButton(button)
kann ein Button entfernt werden. hasButton und removeButton prüfen vom Button die ID und den Inhalt, sind diese identisch, so
werden die Buttons als gleich angesehen.
group = new Alvine.Package.UI.Dialog.ButtonGroup();
group.addButton(new Alvine.Package.UI.Dialog.Button(content));
Eine ButtonGroup besitzt nur die Eigenschaft id
:
Schlüssel | Beschreibung | Default | Beispiel |
---|---|---|---|
id | ID der Gruppe | undefined | myId |
Über die Methode getInstanceFromDataset
wird eine Instance von einem Alvine.DOM.Dataset
zurück geliefert.
json = {
"options": {},
"buttons": [
{
"name": "Alvine.Package.UI.Dialog.Button",
"dataset": {
"content":"A",
"options": {}
}
},
{
"name": "Alvine.Package.UI.Dialog.Button",
"dataset": {
"content":"B",
"options": {}
}
}
]
}
buttonGroup = new Alvine.Package.UI.Dialog.ButtonGroup.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));
ButtonToolbar¶
Mehrere ButtonGroup-Objekte können zu einer ButtonToolbar(options)
zusammengefasst werden. Neue Gruppen werden über die Methode
ButtonToolbar.addButtonGroup(buttongroup)
hinzugefügt.
toolbar = new Alvine.Package.UI.Dialog.ButtonToolbar();
toolbar.addButtonGroup(new Alvine.Package.UI.Dialog.ButtonGroup());
Eine ButtonGroup besitzt nur die Eigenschaft id
:
Schlüssel | Beschreibung | Default | Beispiel |
---|---|---|---|
id | ID der Gruppe | undefined | myId |
class | CSS-Klasse der Gruppe | undefined | btn-toolbar |
createButtonToolbar()¶
Mit Hilfe der Funktion createButtonToolbar()
kann schnell und einfach eine ButtonToolbar definiert werden.
Die Funktion erwartet als einziges Argument ein Array von einfachen Javascript Objekt-Array mit der gewünschten
Konfiuration. Die Werte im Objekt sind identisch mit den Standardwerten eines Buttons.
buttonToolbar = Alvine.Package.UI.Dialog.createButtonToolbar([
[
{
'id': 'editorbuttonSave',
'icons': ['fa fa-file-o', 'fa fa-angle-right', 'fa fa-floppy-o'],
'tooltip': 'i18n:editorbuttonsave'
},
{
'id': 'editorbuttonSaveAll',
'icons': ['fa fa-files-o', 'fa fa-angle-right', 'fa fa-floppy-o'],
'tooltip': 'i18n:editorbuttonsaveall',
'tooltipPosition': 'bottom'
},
{
'id': 'opendSessionButton',
'type': 'DropdownButton',
'icons': ['fal fa-folder-open'],
'items': [
{
"target": "#target1",
"label": "Ziel 1"
},
{
"target": "#target2",
"label": "Ziel 2"
}
],
'tooltip': 'i18n:tooltip.sessions'
}
], [
// weitere Buttons ...
]
]);
Dropdown-Buttons lassen sich über diese Funktion ebenfalls einfach hinzufügen:
{
'id': 'opendSessionButton',
'type': 'DropdownButton',
'icons': ['fa fa-folder-o'],
'items': [
{'target': '#1', 'label':'Item 01'},
{'target': '#2', 'label':'Item 02'}
],
'tooltip': 'i18n:opendsessionbutton'
}
Über die Methode getInstanceFromDataset
wird eine Instance von einem Alvine.DOM.Dataset
zurück geliefert.
json = {
"options": {},
}
buttonToolbar = new Alvine.Package.UI.Dialog.ButtonToolbar.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));
json = {
"options": {},
"definition":[
[
{
'id': 'editorbuttonSave',
'icons': ['fa fa-file-o', 'fa fa-angle-right', 'fa fa-floppy-o'],
'tooltip': 'i18n:editorbuttonsave'
},
{
'id': 'editorbuttonSaveAll',
'icons': ['fa fa-files-o', 'fa fa-angle-right', 'fa fa-floppy-o'],
'tooltip': 'i18n:editorbuttonsaveall',
'tooltipPosition': 'bottom'
},
{
'id': 'opendSessionButton',
'type': 'DropdownButton',
'icons': ['fal fa-folder-open'],
'items': [
{
"target": "#target1",
"label": "Ziel 1"
},
{
"target": "#target2",
"label": "Ziel 2"
}
],
'tooltip': 'i18n:tooltip.sessions'
}
]
]
}
buttonToolbar = new Alvine.Package.UI.Dialog.ButtonToolbar.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));
Chart¶
Das Chartcontroll kapselt den Zugriff auf die Chartjs-Bibliothek. Die Komponente wird über den
Konstruktor Alvine.Package.UI.Dialog.Chart(type, data, options)
erstellt. Für den Typ sind die in
chartjs vorhanden Typen line
, bar
, radar
, pie
, doughnut
, polarArea
,
bubble
, scatter
oder area
verwendbar. Die Typen lassen sich auch mixen.
Schlüssel | Beschreibung | Default | Beispiel |
---|---|---|---|
id | ID des Elements | zufällige ID | myID |
class | Klasse des Containers | undefined | |
style | Styleangaben im Container, Hauptsächlich für Breitenangabe | width:99% | |
responsive | Responsives Layout verwenden | WAHR | |
options | Optionen von chartjs | undefined |
;
Dieser Chart kann über das folgende Beispiel erstellt werden. Eine Detailbeschreibung der Chartjs Optionen ist hier zu finden.
type = 'line';
data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
backgroundColor: '#fe57ae',
borderColor: '#fe57ae',
data: [
4, 5, 6, 7, 2, 8, 90
],
fill: false
}, {
label: "My Second dataset",
fill: false,
backgroundColor: '#212529',
borderColor: '#212529',
data: [
90, 1, 4, 5, 6, 7, 8
]
}]},
options = {
style: 'width:400px',
responsive: true,
options: {
title: {
display: true,
text: 'Chart.js Line Chart'
},
tooltips: {
mode: 'index',
intersect: false
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Value'
}
}]
}
};
};
new Alvine.Package.UI.Dialog.Chart(type, data, options);
Objektreferenz¶
Chart(type, data, options)
Beschreibung
Erstellt ein neues Chart-Objekt
Parameter-Liste
type (String)
Ein Wert aus der Liste:
line
,bar
,radar
,pie
,doughnut
,polarArea
,bubble
,scatter
oderarea
data (Object)
Datenobjekt gemäss Spezifikation von chartjs
options (Object)
Optionen (siehe Tabelle oben)
Rückgabewert
Neues Chart-Objekt
Chart.destroy()
Beschreibung
Zerstört das Char-Objekt
Rückgabewert
Chart-Objekt
FileUpload¶
Das FileUpload Control erlaubt es Dateien an eine URL zu übertragen. Als Basis kommt Dropzone zum Einsatz. Das
Fileupload-Controll wird über den Konstruktor Alvine.Package.UI.Dialog.FileUpload(options)
erstellt. Die einzelnen Optionen können der
folgenden Tabelle entnommen werden.
Schlüssel | Beschreibung | Default | Beispiel |
---|---|---|---|
action | undefined | ||
addRemoveLinks | Hinzufügen eines Löschlinks | WAHR | |
aria-describedby | undefined | ||
attach | undefined | ||
autoQueue | Inhalte sollen automatisch hochgeladen werden | WAHR | |
capture | null | ||
class | Klasse des Elements | dropzone container-fluid | |
clickable | Clickbereich | undefined | |
createImageThumbnails | WAHR | ||
filesizeBase | 1000 | ||
handler | undefined | ||
id | ID des Elements | zufällige ID | |
maxFiles | Maximale Anzahl von Dateien | undefined | |
parallelUploads | Anzahl der Parallelen Uploads von Bilder | 4 | |
previewsContainer | undefined | ||
registry | Registry | undefined | |
renameFile | Funktion zum Umbenennen der Datei | null | |
resizeHeight | Höhe in die das Image vor dem Upload umgerechnet werden soll. | null | |
resizeMethod | Methode der Neuberechnung | contain | |
resizeMimeType | MimeType der umzurechnenden Datei | null | |
resizeQuality | Qualität der Umrechnung | 0.8 | |
resizeWidth | Breite in die das Image vor dem Upload umgerechnet werden soll. | null | |
thumbnail-alt | undefined | ||
thumbnail-class | card-img-top d-flex mr-4 | ||
thumbnail-style | undefined | ||
thumbnail-title | undefined | ||
thumbnailHeight | Höhe des Thumbnails | 180 | |
thumbnailMethod | Methode wie das Thumbnail erstellt werden soll | contain | |
thumbnailWidth | Breite des Thumbnails | 180 | |
totalprogress | 0 | ||
totalprogress-class | progress-bar progress-bar-striped bg-success | ||
url-delete | URL an die der Dateiname der gelöschten Datei gesendet wird | undefined | |
url-get | URL, von der die Dateiliste geholt wird | undefined | |
url-post | URL, an die eine neue Datei gesendet wird | undefined |
94e74a73-5ab8-42e5-a5a6-401c366d26dc
Objektreferenz¶
FileUpload(options)
Beschreibung
Erstellt ein neues File-Upload-Objekt.
Parameter-Liste
options (Object)
Objekt mit Werten aus der oberen Tabelle
Rückgabewert
Neues FileUpload-Objekt
Tag¶
Tags sind HTML-Elemente die zum Hervorheben von Informationen dienen. Tags können an verschiedenen Stellen zum Einsatz kommen.
tag = new Alvine.Package.UI.Dialog.Tag(value, type, options);
defaultTag = new Alvine.Package.UI.Dialog.Tag('Default', 'default');
primaryTag = new Alvine.Package.UI.Dialog.Tag('Primary', 'primary');
successTag = new Alvine.Package.UI.Dialog.Tag('Success', 'success');
infoTag = new Alvine.Package.UI.Dialog.Tag('Info', 'info');
warningTag = new Alvine.Package.UI.Dialog.Tag('Warning', 'warning');
dangerTag = new Alvine.Package.UI.Dialog.Tag('Danger', 'danger');
value
definiert den Inhalt des Tags und type
das Aussehen. Die verschiedene
Types können auf der Bootstrap-Webseite
nachgeschlagen werden. Über den Parameter options
können folgende Werte definiert werden:
Schlüssel | Beschreibung | Default | Beispiel |
---|---|---|---|
class | Klasse / Typ des Tags | badge badge-default | |
value | Angezeigter Wert im Tag |
Über die Methode getInstanceFromDataset
wird eine Instance von einem Alvine.DOM.Dataset
zurück geliefert.
json = {
"value": "Default",
"type": "default",
"options": {}
}
tag = new Alvine.Package.UI.Dialog.Tag.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));
Icon¶
Icons sind HTML-Elemente die als Sinnbild für eine Aktion oder Information stehen. Icons können an verschiedenen Stellen zum Einsatz kommen. Icons sind einfach -Tags die über eine Klasse mit Icons versehen werden. Font Awesome Icons können durch die Klasse fa definiert werden.
icon = new Alvine.Package.UI.Dialog.Icon();
child = new Alvine.Package.UI.Dialog.Icon('fa fa-child');
comment = new Alvine.Package.UI.Dialog.Icon('fa fa-comment');
cube = new Alvine.Package.UI.Dialog.Icon('fa fa-cube');
car = new Alvine.Package.UI.Dialog.Icon('fa fa-car');
value
definiert den Inhalt des Tags und type
das Aussehen. Die verschiedene
Types können auf der Bootstrap-Webseite
nachgeschlagen werden. Über den Parameter options
kann folgender Werte definiert werden:
Schlüssel | Beschreibung | Default | Beispiel |
---|---|---|---|
class | Klasse / Typ des Tags | fa fa-font-awesome | fa fa-car |
Über die Methode getInstanceFromDataset
wird eine Instance von einem Alvine.DOM.Dataset
zurück geliefert.
json = {
"className": "fa fa-child",
"options": {}
}
icon = new Alvine.Package.UI.Dialog.Icon.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));
SpinnerIcon¶
Über die Methode getInstanceFromDataset
wird eine Instance von einem Alvine.DOM.Dataset
zurück geliefert.
json = {
"options": {}
}
spinnerIcon = new Alvine.Package.UI.Dialog.SpinnerIcon.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));
Image¶
Images sind HTML-Elemente die zur Darstellung von Bilden dienen.
image = new Alvine.Package.UI.Dialog.Image("http://www.example.com/blume.jpg",{});
Über den Parameter options
kann folgender Werte definiert werden:
Schlüssel | Beschreibung | Default | Beispiel |
---|---|---|---|
class | Klasse | rounded | |
width | Breite | 150 | |
height | Höhe | 150 | |
alt | Alt Text | i18n:image-alt | Blume |
Über die Methode getInstanceFromDataset
wird eine Instance von einem Alvine.DOM.Dataset
zurück geliefert.
json = {
"source": "http://www.example.com/blume.jpg",
"options": {}
}
Image = new Alvine.Package.UI.Dialog.Image.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));
Tab-Liste¶
Eine Tabliste stellt mehrere Inhalte übersichtlich über horizontale Tabs dar
und dient als Container für die einzelnen Tabs. Eine Tabliste wird über die
Konstruktorfunktion Alvine.Package.UI.Dialog.TabList()
erstellt.
tablist = new Alvine.Package.UI.Dialog.TabList(options);
Über den Parameter options
kann folgender Wert definiert werden:
Schlüssel | Beschreibung | Default | Beispiel |
---|---|---|---|
id | ID der Tabliste | zufällige ID | myId |
Das nachfolgende Beispiel erstellt eine Tabliste und fügt drei Tabs hinzu.
tablist = new Alvine.Package.UI.Dialog.TabList();
tab1 = new Alvine.Package.UI.Dialog.Tab('Tab1', 'Content ...');
tab2 = new Alvine.Package.UI.Dialog.Tab('Tab2', 'Content ...');
tab3 = new Alvine.Package.UI.Dialog.Tab('Tab2', 'Content ...', {'close':true});
tablist.addTab(tab1);
tablist.addTab(tab2);
tablist.addTab(tab3);
Das Ergebnis dieser Anweisungen sieht folgendermaßen aus:
Mit Hilfe von TabList.addTab(tab)
kann ein Tab hinzugefügt werden. Über TabList.removeTab(tab)
können Tabs wieder entfernt werden. Als Argument kann entweder ein Tab-Objekt
oder der Index des Tabs angegeben werden. Im folgenden Beispiel wird der erste Tab und der Tab mit dem Objekt tab2 entfernt.
tablist.removeTab(0);
tablist.removeTab(tab2);
Eventbearbeitung¶
TabList.updateLocation¶
Mit dem Eventhandler TabList.updateLocation wird die ID des Tabs im Kontextargument tab gesetzt.
Über die Methode getInstanceFromDataset
wird eine Instance von einem Alvine.DOM.Dataset
zurück geliefert.
json = {
"options": {},
"tabs":[
{
"name": "Alvine.Package.UI.Dialog.Tab",
"dataset": {
"options": {},
"label": "Tab 1",
"content":
{
"name": "Alvine.Package.UI.Dialog.Blockquote",
"dataset": {
"text": "Lorem ipsum dolor sit amet, ...",
"options": {}
}
}
}
},
{
"name": "Alvine.Package.UI.Dialog.Tab",
"dataset": {
"options": {},
"label": "Tab 2",
"content":
{
"name": "Alvine.Package.UI.Dialog.Blockquote",
"dataset": {
"text": "TEST",
"options": {}
}
}
}
}
]
};
tabList = new Alvine.Package.UI.Dialog.TabList.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));
Tabs¶
Tabs werden über die Konstruktorfunktion Alvine.Package.UI.Dialog.Tab(label, content, options)
erstellt und über TabList.addTab(tab)
einer Tabliste hinzugefügt.
Ein Tab besteht dabei aus einem Label und einem Inhalt. Als Inhalte können reine Zeichenketten oder Objekte vom Typ Control verwendet werden.
tab = new Alvine.Package.UI.Dialog.Tab('Tab1', 'Content ...', options);
Über den Parameter options
können folgende Werte definiert werden:
Schlüssel | Beschreibung | Default | Beispiel |
---|---|---|---|
class | Klasse des Tab-Labels | nav-link | myclass |
close | Wenn true, dann wird ein Icon zum Schließen eingeblendet | false | true |
id | ID des Tabs | zufällige ID | myID |
Über die Methode getInstanceFromDataset
wird eine Instance von einem Alvine.DOM.Dataset
zurück geliefert.
json = {
"options": {},
"label": "Tab 1",
"content": {
"name": "Alvine.Package.UI.Dialog.Blockquote",
"dataset": {
"text": "Lorem ipsum dolor sit amet, ...",
"options": {}
}
}
}
tab = new Alvine.Package.UI.Dialog.Tab.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));
Eventbearbeitung¶
Werden Tabs hinzugefügt oder entfernt, so werden auch alle Eventhandler die an den Tabs hängen gelöscht. Deshalb ist es wichtig die Eventhandler nicht an die Tabs zu binden, sondern an den View und über den Filter
jQuery('#viewid').on('shown.bs.tab', '[href="#tab1"]' ,function () {
// ...
});
Cards¶
Cards bilden einen flexiblen und erweiterbaren Inhaltscontainer. Cards können einen Header und Footer, sowie unterschiedliche Inhalte besitzen.
Schlüssel | Beschreibung | Default | Beispiel |
---|---|---|---|
class | Klasse der Card | card | myclass |
id | ID des Tabs | undefined | myID |
Objektreferenz¶
Card(options)
Beschreibung
Der Konstruktor erstellt ein neues Card-Objekt
Parameter-Liste
option (Object)
Optionen
Rückgabewert
Card-Objekt
Card.addBody(content)
Beschreibung
Inhalte der Card hinzufügen
Parameter-Liste
content (Alvine.UI.Control|String)
Inhalt, der im Body angezeigt werden soll.
Rückgabewert
Card-Objekt
Card.setHeader(content, headerClass)
Beschreibung
Der Konstruktor erstellt ein neues Card-Objekt
Parameter-Liste
content (Alvine.UI.Control|String)
Inhalt, der im Head-Bereich angezeigt werden soll.
headerClass (String)
Css-Klassen die dem Header hinzugefügt werden sollen
Rückgabewert
Card-Objekt
Card.setFooter(content, footerClass)
Beschreibung
Der Konstruktor erstellt ein neues Card-Objekt
Parameter-Liste
content (Alvine.UI.Control|String)
Inhalt, der im Footer angezeigt werden soll.
footerClass (String)
Css-Klassen die dem Footer hinzugefügt werden sollen
Rückgabewert
Card-Objekt
CardContainer¶
Mit Hilfe von CardContainer lassen sich Cards wie bei Masonry auf einer Seite ausfüllend positionieren.
Schlüssel | Beschreibung | Default | Beispiel |
---|---|---|---|
class | Klasse des Containers | card-columns | myclass |
id | ID des Tabs | undefined | myID |
container = new Alvine.Package.UI.Dialog.CardContainer();
card1 = new Alvine.Package.UI.Dialog.Card();
card1.setHeader('Header 1');
card1.addBody(new Alvine.Package.UI.Dialog.Blockquote('Lorem ipsum dolor sit amet, ...', {'class': 'lead'}));
container.addCard(card1);
card2 = new Alvine.Package.UI.Dialog.Card();
card2.addBody(new Alvine.Package.UI.Dialog.Blockquote('Lorem ipsum dolor sit amet, ...', {'class': 'lead'}));
container.addCard(card2);
Objektreferenz¶
CardContainer(options)
Beschreibung
Der Konstruktor erstellt ein neues CardContainer-Objekt
Parameter-Liste
option (Object)
Optionen
Rückgabewert
CardContainer-Objekt
CardContainer.addCard(card)
Beschreibung
Fügt ein Card-Objekt zum Container hinzu
Parameter-Liste
card (Card)
Card-Objekt
Rückgabewert
CardContainer-Objekt
Container¶
Die Container-Objekte bilden das Grid-System von Bootstrap ab.
// Zwei Spalten
col1 = new Alvine.Package.UI.Dialog.ContainerColumn('col01', {'class': 'col'});
col2 = new Alvine.Package.UI.Dialog.ContainerColumn('col01', {'class': 'col'});
// Eine Zeile
row = new Alvine.Package.UI.Dialog.ContainerRow();
row.addColumn(col1);
row.addColumn(col2);
// Ein Container
container = new Alvine.Package.UI.Dialog.Container();
container.addRow(row);
Diese Anweisungen ergeben folgende HTML-Struktur.
<div class="container-float">
<div class="row">
<div class="col">col01</div>
<div class="col">col01</div>
</div>
</div>
Schlüssel | Beschreibung | Default | Beispiel |
---|---|---|---|
class | Klasse des Containers | row | |
id | ID der Zeile | zufällige ID |
Über Hilfsfunktionen können Inhalte schneller und ohne das Erstellen der übergeordneten Struktur hinzugefügt werden. Die Methode
Container.addContent(content, rowOptions, colOptions)
fügt einen Inhalt zum Container hinzu und fügt diesen automatisch in ein ContainerColumn
und ContainerRow
ein. Mit dieser Funktion ist immer nur eine Spalte pro Zeile verwendbar.
container = new Alvine.Package.UI.Dialog.Container();
container.addContent('Inhalt');
Funktionsreferenz¶
Container(options)
Beschreibung
Der Konstruktor erstellt ein neues Container-Objekt
Parameter-Liste
options (Objekt)
Rückgabewert
Container-Objekt
addContent(content, rowOptions, colOptions)
Beschreibung
Diese Methode fügt den übergebenen Inhalt
content
in die entsprechende Struktur aus Rows und Columns ein.
Parameter-Liste
content (Array | ContainerRow | String | HtmlFragment)
Der einzufügende Inhalt, Wird ein Array übergeben, so werden jeweils 12 Inhalte in eine Zeile gepackt.
rowOptions (Object)
Konfiguration der Zeile
colOptions (Object)
Konfiguration der Spalten
Rückgabewert
Container-Objekt
addRow(row)
Beschreibung
Fügt dem Container eine Reihe hinzu.
Parameter-Liste
content (ContainerRow | String | HtmlFragment)
Der einzufügende Inhalt
row (ContainerRow)
Rückgabewert
Container-Objekt
Über die Methode getInstanceFromDataset
wird eine Instance von einem Alvine.DOM.Dataset
zurück geliefert.
json = {
"options": {},
"content": [
{
"name": "Alvine.Package.UI.Dialog.ContainerRow",
"dataset":{
"options": {},
"columns": []
}
}
]
};
container = new Alvine.Package.UI.Dialog.Container.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));
ContainerRow¶
Eine Zeile lässt sich über ContainerRow(options)
erstellen.
row = new Alvine.Package.UI.Dialog.ContainerRow({'id':'myID'});
Die optionalen Options können der folgenden Tabelle entnommen werden.
Schlüssel | Beschreibung | Default | Beispiel |
---|---|---|---|
class | Klasse der Zeile | row | |
id | ID der Zeile | zufällige ID |
Auf Ebene der Zeile kann ebenfalls mit einer Hilfsfunktion schnell ein Inhalt erstellt werden. Hierzu muss die Methode ContainerRow.addContent(content, options)
aufgerufen werden. Über die optionalen Optionen kann das ContainerColumn
angepasst werden.
row = new Alvine.Package.UI.Dialog.ContainerRow();
row.addColumn(col1);
Mit Hilfe der Methode ContainerRow.getRows()
lässt sich die aktuelle Zeilenstruktur auslesen.
Über die Hilfsfunktion ContainerRow.addContent(content, options)
kann eine neue Spalte ohne die Definition des ContainerColumn
eingefügt werden.
row = new Alvine.Package.UI.Dialog.ContainerRow();
row.addContent('Mein Inhalt');
Über die Methode getInstanceFromDataset
wird eine Instance von einem Alvine.DOM.Dataset
zurück geliefert.
json = {
"options": {},
"columns": [
{
"name": "Alvine.Package.UI.Dialog.ContainerColumn",
"dataset": {
"options": {},
"content": {}
}
},
{
"name": "Alvine.Package.UI.Dialog.ContainerColumn",
"dataset": {
"options": {},
"content": {}
}
}
]
};
row = new Alvine.Package.UI.Dialog.ContainerRow.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));
ContainerColumn¶
Eine Spalte lässt sich über ContainerColumn(content, options)
erstellen. Der Inhalt der Spalte wird
über das Argument content
hinzugefügt.
col = new Alvine.Package.UI.Dialog.ContainerColumn('content',{'id':'myID'});
Die optionalen Options können der folgenden Tabelle entnommen werden.
Schlüssel | Beschreibung | Default | Beispiel |
---|---|---|---|
class | Klasse der Zeile (Flexbox ohne Zahl) | col | |
id | ID der Zeile | undefined |
getInstanceFromDataset¶
json = {
"options": {'class': 'col-12 col-md-8'},
"content": {
"name": "Alvine.Package.UI.Dialog.H2",
"dataset": {
"title": "Überschrift H2"
}
}
};
col = new Alvine.Package.UI.Dialog.ContainerColumn.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));
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));
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.
QuillEditor¶
Der QuillEditor ist ein RTE1-Editor.
form.addControl(new Alvine.Package.UI.Dialog.QuillEditor({
'id': 'texteditor',
'handler': 'value',
'attach': 'change',
'registry': registryKey+' | current | name'
});
Schlüssel | Beschreibung | Default | Beispiel |
---|---|---|---|
id | ID des Controlls | zufällige ID | myID |
class | CSS-Klasse | my-1 | |
placeholder | Platzhalter | leere Zeichenkette | Bitte ausfüllen |
theme | Aussehen des Editors | snow | bubble |
aria-describedby | undefined | ||
toolbar | Toolbar | Buttons | |
registry | Schlüssel in der Registry | undefined | |
handler | Handler | undefined | |
action | Aktion im Dataset | undefined | |
attach | Attachment | undefined |
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));
Submit-Button¶
Für das Formular gibt es keinen gesonderten Submit-Button. Vielmehr kommt der Standardbutton Alvine.Package.UI.Dialog.Button
zum Einsatz. Der Button erhält den
Typ submit. In der Variante mit Grid-System müssen die entsprechenden Klassen gesetzt werden.
form.addControl(new Alvine.Package.UI.Dialog.Button('absenden', {
'type': 'submit',
'class': 'btn btn-primary offset-sm-2',
'value': 'submit'
}));
Soll das Formular direkt abgesendet werden, so muss data-prevent
im Formular-Tag entfernt weren.
PageStepper¶
Das Pagestepper-Objekt erlaubt es mehrseitige Dialoge abzubilden. Der Pagestepper setzt sich dabei aus zwei Navigationselementen zusammen. Das Hauptelement ist eine Seiten-Gruppe mit den einzelnen Seiten (page), das andere Element ist eine Hilfsnavigation um das Blättern zu unterstützen.
pagestepper = new Alvine.Package.UI.Dialog.PageStepper(options);
Die über options definierbaren Werte sind der folgenden Tabelle zu entnehmen.
Schlüssel | Beschreibung | Default | Beispiel |
---|---|---|---|
id | undefined | ||
aria-label | undefined | ||
class | Klasse des Pagesteppers | pagestepper | |
class-navigation | Klasse der Hilfsnavigation | pagination m-r-1 | |
class-pages | Klasse der Seitennavigation | pagination | |
context-argument | Name des Arguments, das über den Event in der URL gesetzt wird | page | |
first-key | Schlüssel für den Index | first | |
first-label | Bezeichnung für den Index | |« | |
id | ID der Zeile | zufällige ID | |
last-key | Schlüssel für den Index | last | |
last-label | Bezeichnung für den Index | »| | |
maxpages | Anzahl der Seiten pro Darstellung | 10 | |
next-key | Schlüssel für den Index | next | |
next-label | Bezeichnung für den Index | » | |
prev-key | Schlüssel für den Index | prev | |
prev-label | Bezeichnung für den Index | « |
Im folgenden Beispiel wird ein kompletter PageStepper mit drei Einträgen und einem vor- und zurück-Button definiert.
pagestepperOptions = {};
pagestepper = new Alvine.Package.UI.Dialog.PageStepper(pagestepperOptions);
// Alle Navigationselemente aktivieren
pagestepper.initNavigation(true, true, true, true);
// Pagestepper Seiten hinzufügen (Start 0, 300 Objekte, 10 pro Seite)
pagestepper.initPages(0, 300, 10);
Über die Methode PageStepper.initNavigation(hasFirst, hasPrev, hasNext, hasLast)
können die Buttons
für die entsprechenden Funktionen ein- (true) und ausgeblendet (false) werden. Im Standard sind die Navigationen
eingeblendet. Die Methode PageStepper.initPages(startPage, totalItems, itemsPerPage)
initialisiert hingegen
die Buttons für die einzelnen Seiten. Die Parameter totalItems
und itemsPerPage
müssen nur einmal angegeben werden.
bei jedem weiteren Aufruf reicht der Parameter startPage
für den Offset.
PageStepper.getPageCount()
liefert die Anzahl der Seiten die aktuell angezeigt werden und PageStepper.getNavigationeCount()
die Anzahl
der Navigations-Buttons. Mit PageStepper.addPage(link)
kann man eine Seite hinzufügen und über PageStepper.addNavigation(link)
kann man
einen Navigationsbutton hinzufügen.
PageStepper.getIndex(index)
liefert die Seite mit dem übergebenen Index zurück.
Über die Methode PageStepper.activate(index)
kann ein Link aktiviert werden. Dieser Link
erhält damit die Klasse active, bei allen anderen Elemente wird die Klasse active zurückgesetzt.
Hinweis
Werden mehrere unabhängige Pagestepper auf einer Seite verbaut, so müssen unterschiedliche
Kontext-Argumente context-argument
für jeden Pagestepper vergeben werden.
Vorgefertigte Eventhandler¶
Über vorgefertigte EventHandler können bestimmte Funktionen impementiert werden.
Click-Handling¶
Dieser Eventhandler verarbeitet Clicks auf den Pagestepper.
// Klick-Events des Pagesteppers
view.on('click touch', '.pagestepper .page-link', Alvine.Package.UI.Dialog.PageStepper.eventHandlerOnClick);
PageStepperLink¶
Die einzelnen Links eines Pagesteppers sind als PageStepperLink(url, label, options)
Objekt abgebildet.
new Alvine.Package.UI.Dialog.PageStepperLink('#1', '1', {'class':'page-item active'})
Die Optionen sind der folgenden Tabelle zu entnehmen.
Schlüssel | Beschreibung | Default | Beispiel |
---|---|---|---|
class | Klasse des Links | page-item | page-item active |
label | Bezeichnung des Links | . | |
screenreader-label | Label zur Darstellung im Screenreader | . | |
url | URL auf die gezeigt werden soll | # |
AceEditor¶
Mit Hilfe des AceEditor lassen sich Quelltexte bearbeiten. Ein neuer Editor wird über AceEditor(options)
erstellt.
Schlüssel | Beschreibung | Default | Beispiel |
---|---|---|---|
class | Klasse des Editor | aceeditor | |
id | ID des Editor | undefined |
Der Editor verfügt über eine große Anzahl von Methoden, die über die AceEditor-Methode AceEditor.execCommand(command)
aufgerufen werden können.
Eine Session läst sich über AceEditor.createSession(key, content, extension)
erstellen. Der erste Parameter key
definiert den eindeutigen
Schlüssel der Session, der zweite Parameter definiert den Inhalt und über den optionale dritte Parameter kann der Modus z.B. .html
definiert werden.
Mittels AceEditor.resetSessionChangeState(key)
können die Sessions zurückgesetzt werden. Wird kein Argument übergeben, so werden alle Sessions gelöscht. Mit der Kurzfunktion
AceEditor.resetCurrentSessionChangeState()
wird die aktuelle Session gelöscht. Über die Methode AceEditor.areSessionsChanged()
kann geprüft werden, ob es geänderte Sessions gibt.
Hingegen prüft die Methode AceEditor.isCurrentSessionChanged()
ob die aktuelle Session geändert wurde. Über die Methode AceEditor.getCurrentSessionKey()
erhält man den
Key der aktuellen Session. Die Methode AceEditor.getCurrentSession()
ermittelt hingegen die aktuelle Session. Mittels AceEditor.closeCurrentSession()
lässt sich die aktuelle Session schliessen.
Eine beliebige Session lässt sich mit AceEditor.closeSession(key)
schließen.
Eine Session wird dem Editor über AceEditor.assignSession(key)
zugewiesen.
Alle offenen Session erhält man mittels AceEditor.getOpendSessions()
. Eine spezifizische offene Session kann man mittels AceEditor.getOpendSession()
abrufen.
Der AceEditor lässt sich mit AceEditor.focus()
aktivieren.
FileList¶
Die FileList erlaubt es eine Baumstruktur für die Auswahl von Dateien festzulegen. Eine neue Liste wird über FileList(options)
erstellt.
Schlüssel | Beschreibung | Default | Beispiel |
---|---|---|---|
class | CSS-Klasse der Liste | undefined | |
id | ID der Liste | undefined | myID |
root | Verzeichnis auf dem Server | / | |
script | Script | # |
Wenn ein Eintrag ausgewählt wurde, wird der Event change.ALVINE.FILETREE
gefeuert. Als Parameter wird das Objekt und die ausgewählte Datei übergeben.
Tree¶
Zur Dartsellung von Bäumen kann das Tree-Objekt zum Einsatz kommen. Die Daten von dem Tree kommen in der Standardkonfiguration über eine url
. In der
URL können die Platzhalter ${id}
, ${parent}
und ${text}
verwendet werden. Das Objekt erwartet immer eine Ebene der Daten, so daß
in der URL die Ebene mitgegeben werden muß: http://example.com/datay?parent=${id}
.
Das Ergebnis vom Server wird über die Methode Tree.mapDataToNode(map)
in das vom Tree verwendete Format gebracht. Das Mapping erfolgt in dieser Funktion über die
Schlüssel map.key
, map.label
, map.parent
und map.rootsign
. Die Funktion kann aber auch komplett selbst implementiert werden.
Wird eine Node ausgewählt, so wird das Event select.ALVINE.TREE
mit den Parametern Tree-Instanz und der gewählten Node gefeuert.
filelist = new Alvine.Package.UI.Dialog.Tree(
{
'map.key': 'id',
'map.label': 'name',
'map.parent': 'parent',
'url': 'http://example.com/data?parent=${id}'
});
Alternativ können die Daten auch direkt bereitgestellt werden. Hierzu muss die Eigenschaft fetchData
gesetzt werden.
options = {
'fetchData': function(node, callback) {
if(node.id==='#') {
callback.call(this,
[{id:'14',text:'Root 1', icon:'fa fa-cog'}, 'Root 2']);
} else {
callback.call(this,
['Child 1', 'Child 2']);
}
}
};
Schlüssel | Beschreibung | Default | Beispiel |
---|---|---|---|
class | CSS-Klasse der Baumstruktur | undefined | |
fetchData | Konfiguration des Datenabrufs | undefined | |
id | ID des Baums | undefined | |
url | URL des Datasets | undefined | |
multiple | Mehrfachselektion im Baum | false | |
plugins | Verwendung von Erweiterungen | ['changed', 'state', 'unique'] | |
map.key | Name des Schlüssels im Datensatz vom Server | undefined | |
map.label | Name des Datenfeldes das angezeigt werden soll | undefined | |
map.parent | Name des Elements das auf die Elternstruktur zeigt | undefined | |
map.rootsign | Wie wird die Rootnode vom Server geliefert | 0 | |
themes.name | Name des Theme, oder flase für das Default-Theme | false | |
themes.icons | Ob Icons anzeigt werden sollen | false | |
themes.ellipsis | Ob Ellipsen angezeigt werden sollen | true | |
themes.stripes | Ob Striche angezeigt werden sollen | false | |
themes.dots | Ob Punkte angezeigt werden sollen | true | |
response.subkey | Unterschlüssel, in dem die Datensätze liegen | dataset |
Datatable¶
Eine Datentabelle (datatable) ist eine komplexe Darstellung von tabellarischen Werten mit optionalem Pagestepper und Filter.
In eine Zeile lassen sich Formulare einblenden. Eine Datentabelle wird über Datatable(options, formCallback)
erstellt.
Der formCallback
ist für die Bereitstellung des Formulars verantwortlich.
In der Anleitung Arbeiten mit Listen wird ein komplettes Beispiel Schritt für Schritt erklärt.
datatable = new Alvine.Package.UI.Dialog.Datatable({'registry-key': 'datatable-data', 'filter-button-label': 'Go'},
function (index) {
var form, submit;
form = new Alvine.Package.UI.Dialog.Form();
form.addControl(new Alvine.Package.UI.Dialog.Input(
'id-' + index, 'ID', {
'placeholder': 'Geben Sie Ihren Vornamen ein',
'handler': 'value',
// ...
form.addControl(submit);
form.bindDataset(Alvine.Registry.get('datatable-data').get('collection').getIndex(index));
return form;});
Schlüssel | Beschreibung | Default | Beispiel |
---|---|---|---|
id | ID der Datentabelle | new Alvine.Util.UUID() | |
argument-page | Name des Arguments für duie aktuelle Seite | page | |
argument-query | Name des Arguments für die Filterung | query | |
argument-items-per-page | Anzahl der Items pro Seite | count | |
class | Klasse | container-float | |
extra-open-column | undefined | ||
filter-button-id | ID des Filter-Buttons | filter | |
filter-button-label | Bezeichnung des Filterbuttons | i18n:filter | |
filter-flag | Filter sichtbar schalten | WAHR | |
filter-input-id | ID des Eingabefeldes des Filters | filter-text | |
items-per-page | Anzahl der Einträge pro Seite | 20 | |
pagestepper-flag | Pagestepper sichtbar schalten | WAHR | |
registry-key | Der Schlüssel in der Registry | datatable | |
reset-button-id | ID des Reset-Buttons | reset | |
reset-button-label | Bezeichnung des Resetbuttons | i18n:reset | |
table-header | Spaltenüberschriften | ['#'] | |
data-callback | Funktion für das Handling der Daten | function |
Mit der Methode Datatable.addPageStepper()
wird der Pagestepper hinzugefügt. Mit Datatable.addTable()
wird die Tabelle eingefügt und mit Datatable.addFilter()
der Filter.
Mit Datatable.getTable()
kommt man an das Tabellen-Objekt mit Datatable.getPageStepper()
an den Pagestepper und mit Datatable.getFilterInput()
an das Input-Control.
Mit Datatable.getIndexOf(element)
kann der index des Elements abgefragt werden.
Hinweis
Werden mehrere unabhängige Datentabellen auf einer Seite verbaut, so müssen die URL-Parameter
argument-page
und argument-query
für jede Liste einzeln gesetzt werden.
Eventbearbeitung¶
Die vorgefertigte Eventbearbeitung erlaubt es bestimmte Benutzereingaben standardisiert zu verarbeiten.
view.on('click touch', 'button#filter', Alvine.Package.UI.Dialog.Datatable.eventHandlerFilterData);
view.on('click touch', 'button#reset', Alvine.Package.UI.Dialog.Datatable.eventHandlerResetFilter);
view.on('click touch', 'table.table tr', Alvine.Package.UI.Dialog.Datatable.eventHandlerOpenForm);
Die Verarbeitung von Änderungen im Formular können folgendermaßen abgefangen werden:
view.on('click touch', 'button.change-button', function (event) {});
Hinweis
Werden mehrere Listen auf einer Seite verbaut, so müssen die Selektoren der Eventhandler die ID der Datentabelle enthalten. Siehe auch Arbeiten mit Listen.
Datatable.eventHandlerOpenForm¶
Mit dem Eventhandler Datatable.eventHandlerOpenForm
wird das Öffnen eines Formulars gesteuert.
Datatable.eventHandlerResetFilter¶
Mit Datatable.eventHandlerResetFilter
kann das Verhalten des Reset-Buttons abgebildet werden.
Datatable.eventHandlerFilterData¶
Mit Datatable.eventHandlerFilterData
wird die Filterung gesteuert.
Layouter¶
Ein Layouter erlaubt es den Dialog in unterschiedliche Bereiche zu splitten. Ein Layouter wird mittels Layouter(options)
erstellt.
Schlüssel | Beschreibung | Default | Beispiel |
---|---|---|---|
class | CSS-Klasse der Liste | layout-container | |
id | ID der Liste | undefined | myID |
plugin-options | Optionen des Plugins | undefined |
Die Inhalte der einzelnen Bereiche können über die Methoden Layouter.setNorth(content)
,Layouter.setWest(content)
,Layouter.setEast(content)
,Layouter.setSouth(content)
und Layouter.setCenter(content)
gesetzt werden. Über die Methode Layouter.resizeAndShowAll()
kann ein neues Rendering mit Positionierung angestoßen werden.
Die Methoden des Plugins lassen sich über Layouter.callPlugin(args)
aufrufen.
Modal-Dialog¶
Der Modal-Dialog fokusiert die weitere Bearbeitung auf einen Dialog, den der Benutzer beantworten muss. Der Dialog wird über die Konstruktor-Methode Modal(title, options)
definiert.
modal = new Alvine.Package.UI.Dialog.Modal('Titel', {'id': 'myID'});
Der Dialog wird in das DOM eingefügt und entweder über Javascript oder einen Event angezeigt.
Schlüssel | Beschreibung | Default | Beispiel |
---|---|---|---|
aria-label-close | close | ||
aria-labelledby | undefined | ||
class | CSS-Klasse des Dialoges | modal fade | |
id | ID der Liste | zufällige ID | myID |
Der Modal-Dialog lässt sich über Methoden anpassen. So lässt sich der Titel über die Set-Methoden der Eigenschaften anpassen.
modal.set('title', 'Willkommen!');
Der Inhalt und der Footer müssen über die Methoden Modal.addContent(content)
und Modal.addFooter(content)
angepasst werden. Über Modal.reset()
können die Inhalte zurückgesetzt und der Dialog neu befüllt werden.
`
Standarddialoge¶
Wegweiserdialog¶
Der Wegweiserdialog hebt Sackgassen in der Benutzerführung auf, indem er einen Weg mit sinnvollen Aktionen weisst.
¶
// Ausführliche Liste der button Optionen siehe bei Button
buttonOptions = {
autofocus: true,
'on': {
'click': function() {
// tue etwas
}
}
};
Alvine.Package.UI.Dialog.createPointTheWayDialog('i18n:mytext',
'i18n:add', buttonOptions, {
'id': 'containerid',
'icon': 'fal fa-info-square fa-3x'
});
Die Methode createPointTheWayDialog(text, buttonText, buttonOptions, options)
kann mit folgendne Optionen aufgerufen werden.
Schlüssel | Beschreibung | Default | Beispiel |
---|---|---|---|
id | ID des Containers | zufällige ID | my1425 |
icon | Anzuzeigendes Icon | fal fa-info-square fa-3x | fal fa-clock |
Referenzen¶
-
Rich Text Editor ↩