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.

Headings

Ü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({'class':'my-4'});
Schlüssel Beschreibung Default Beispiel
class Klasse des Elements undefined my-2

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

Tabelle

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

Tabelle

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
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.

Button mit Spinner

Die Methode Button.removeIcons() entfertn alle Icon-Klassen und aktiviert den Button. Die Methode Button.hideSpinner() ist ein Alias für Button.removeIcon().

Button

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

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

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

Chart;

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 oder area

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
ed6239cd-8d55-4772-a1f1-0086059c6eaa

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

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:

Formular-Tab

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 () {
  // ...
});

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

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.

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

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

Input

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

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

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

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

Input

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

Hinweis

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

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

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

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

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

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

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

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

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

Vorgefertigte Eventhandler

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

Validierung

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

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

Textarea

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

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

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

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

Textarea

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

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

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

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

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

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

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

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

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

Select

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

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

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

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

Select

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

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

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

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

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

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

Select-Feld mit Javascript-Objekt als Options

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

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

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

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

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

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

Vorgefertigte Eventhandler

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

Validierung

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

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

Checkbox

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

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

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

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

Checkbox

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

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

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

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

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

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

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

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

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

Vorgefertigte Eventhandler

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

Validierung

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

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

Radiobox

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

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

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

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

Radio

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

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

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

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

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

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

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

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

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

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

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.

Button

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

Pagestepper

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

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.

Tree

Tree-Element

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

Tree-Element mit Icon

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 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.

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

Modal-Dialog

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.


Wegweiser


// 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


  1. Rich Text Editor 

Kommentare