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.
FormControl¶
Das FormControl
Objekt bildet die Grundlage aller Controls
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
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 |
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 |
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 |
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()
Das HR-Objekt verfügt über keine Parameter und keine Optionen.
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)
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.
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 |
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()
.
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()
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 |
target | Ziel des Menüeintrages | # | |
label | Bezeichnung des Menüeintrages | - | Liste |
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 |
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 |
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.
buttonGroup = 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'
}
], [
// 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'
}
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 |
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 |
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.
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 |
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 () {
// ...
});
Container¶
Die Container-Objekte bilden das Grid-System von Bootstrap ab.
// Zwei Spalten
col1 = new Alvine.Package.UI.Dialog.ContainerColumn('col01', {'class': 'col-xs-1'});
col2 = new Alvine.Package.UI.Dialog.ContainerColumn('col01', {'class': 'col-xs-1'});
// 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-xs-1">col01</div>
<div class="col-xs-1">col01</div>
</div>
</div>
Über Hilfsfunktionen können Inhalte schneller und ohne das Erstellen der übergeordneten Struktur hinzugefügt werden. Die Methode
Container.addContent(content, options)
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');
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');
ContainerColumn¶
Eine Spalte lässt sich über ContainerColumn(content, options)
erstellen. Der Inhalt der Spalte wird
über das Argument content
hinzugefügt.
row = 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-xs | |
id | ID der Zeile | undefined |
Formular¶
Das Formularobjekt 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 Optionsobjekt 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.
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 |
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-xs-10',
'class-group': 'form-group row',
'class-label': 'col-xs-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);
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-xs-4 |
class-feedback | Klasse des Feedbacks | form-control-feedback | |
class-control-wrapper | Input-Umschliessendes Div | undefined | col-xs-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-xs-10',
'class-group': 'form-group row',
'class-label': 'col-xs-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.
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-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 |
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-xs-10',
'class-label': 'col-xs-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);
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-xs-4 |
class-feedback | Klasse des Feedbacks | form-control-feedback | |
class-control-wrapper | Input-Umschliessendes Div | undefined | col-xs-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);
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-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-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.
Vorgefertigte Eventhandler¶
Über vorgefertigte EventHandler können bestimmte Funktionen impementiert werden.
Aktuell liegt kein vorgefertigter Eventhandler vor.
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 |
---|---|---|---|
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.
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)
erstellen.
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.
Datatable¶
Eine Datentabelle 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.
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 |
---|---|---|---|
argument-page | Name des Arguments | page | |
argument-query | Name des Arguments | query | |
class | CSS-Klasse der Liste | layout-container | |
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 | ['#'] |
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.
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) {});
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.
`