Package¶
Die Objekte und Funktionen im Bereich Packages erlauben es Funktionen über Webcomponents bereitzustellen.
Base¶
Das Basisobjekt ist der Prototyp Packessystems.
Module¶
Das Modulesystem sorgt für die Einbindung eines HTML-Dokuments in die Seite. Diese Technik die unter HTML-Import fimiert, erlaubt die Kapselung von Funktionen, Templates und externen Javascript und Style-Dateien. Die Funktionen werden in einer Componentenklasse gekapselt.
Eine beispielhafte Datei ist im folgenden zu sehen. Die als Modul test-modul importierte Datei erstellt erst eine Komponente um im Anschluß ein View zu erstellen. Das View wird in der Komponente registriert um auf die Templates zugreifen zu können.
<template id="template">
<div>
<h2 data-replace="dataset:headline">dummy</h2>
</div>
</template>
<script>
!(function() {
var component, view;
component = Alvine.Package.Factory.createComponent('test-module');
view = component.createView('Alvine.Package.Test.MyModule.MyView', '#template');
})();
</script>
Im Hauptdokument wird das Modul mit der Anweisung new Alvine.Package.Module('test-module')
eingebunden. Hier wird auch das
Dataset definiert und das View an den Zeilort (ID mycontainer) gerendert.
<div id="mycontainer"></div>
<script>
jQuery(window).on('loadmodule.DONE', function(event, eventModule) {
var dataset;
/** Nur das definierte Modul prüfen */
if(eventModule===module) {
dataset = new Alvine.DOM.Dataset({"headline": "MyHTML"});
Alvine.Registry.set('myelementimporttest', dataset);
Alvine.Registry.get('Components')
.get('test-module')
.getView('Alvine.Package.Test.MyModule.Element')
.appendTo('#mycontainer', dataset);
done();
}
});
module = new Alvine.Package.Module('test-module');
<script>
Alle Module werden in der Registry unter dem Schlüssel Module registriert.
modules = Alvine.Registry.get('Modules');
// -> Alvine.Types.Map
getBaseURL()¶
Mit der Methode Module.getBaseURL() lässt sich die Basis-URL des Moduls abfragen. Dies ist besonders für das Nachladen von Resourcen und Bildern sinnvoll.
executeOnModulesAvailable¶
Mit Hilfe der Methode executeOnModulesAvailable(moduleNames, callback, args) kann Code, der auf das vorhandensein eines Modules angewiesen ist, nach dem Laden ausgeführt werden.
Alvine.Package.executeOnModulesAvailable('MyModule', function() { /** */ }, args);
Die definierte Funktion wird nur ausgeführt, wenn das Modul MyModul erfolgreich geladen wurde.
Extension¶
Eine Erweiterung erweitert die Tagstruktur. Diese Funktionalität ist auf Grund der aktuell fehlenden Browserunterstützung noch nicht implementiert.
Component¶
Eine Komponente bündelt die Funktionen, die über ein Modul eingebunden wurde.
Jede Komponente kann mit der Methode Component.getDefaults() eigene Defaultwerte definieren.
Component.getDefaults = function() {
return {
'myvalue': 1
};
}
Über die Factory-Methode Alvine.Package.Factory.createComponent
können Komponenten
erstellt werden. Diese Methode bündelt alle Schritte zur Erstellung einer Komponente. Die Methode
verbindet das Komponentenobjekt mit dem Modul und setzt den entsprechenden Dokumentenkontext.
Die Komponenten werden über diese Funktion ausserdem in der Registry unter dem Schlüssel Components
registriert.
components = Alvine.Registry.get('Components');
// -> Alvine.Types.Map
Mit Hilfe der Methode Component.getContainerSelector()
kann der Selector des Containers
ermittelt werden. Diese Methode liefert - falls gesetzt - den im Modul definierten Wert zurück.
Mit der Methode Component.getModul()
lässt sich das dazugehörige Modul ermitteln.
Um von einer Komponente verwendete Daten aufräumen zu können besitzt die Komponente
die Methode Component.cleanUp()
. Diese muss überschrieben werden und von der Anwendung
aufgerufen werden.
View¶
Ein View bündelt in einer Komponente ein Dataset und ein Template um eine Ausgabe zu erzeugen. Ein View kann über den Konstruktor erstellt werden.
view = new Alvine.Package.View();
Um den View nicht manuell einrichten zu müssen, sollte die Factory-Methode Alvine.Package.Component.createView()
verwendet werden. Diese Methode erwartet als Parameter den Namen des Views name
und einen Selektor
templateSelector
. Optional können Eigenschaften über properties
übergeben werden. Die initCallback
Funktion wird beim initialisieren aufgerufen. Der activateCallback
Alvine.Package.Component.createView(name, templateSelector, properties, initCallback, activateCallback);
Im folgenden Beispiel wird eine Komponenten-Objekt erstellt und
ein View-Objekt erzeugt. Das View wird im Anschluß mittels View.appendTo()
in das DOM eingehängt.
component = Alvine.Package.Factory.createComponent('Alvine.Package.Test.MyModule');
view = component.createView('Alvine.Package.Test.MyModule.MainView', '#template');
var dataset = new Alvine.DOM.Dataset({"headline": "MyHTML"});
Alvine.Registry.set('myelementimporttest', dataset);
view.appendTo(component.getContainerSelector(), dataset);
Einem View können über die Methode View.addContent()
Inhalte hinzugefügt werden. Diese Inhalte
werden in der Render-Phase dem View hinzugefügt.
Alle Inhalte können mit View.clear()
wieder gelöscht werden.
Da sich Inhalte im View ändern können, ist es sinnvoll Inhalte Eventhandler nicht an die einzelnen
Objekte zu binden, sondern zentral im View zu registrieren. Hierzu ist die Methode View.on()
da.
view.on('shown.bs.tab', '.tab', function (e) {
// ...
});
Als zweiter Parameter kann entweder ein Selector oder ein Objekt vom Type Alvine.UI.Control übergeben werden. Wird ein Control übergeben, ist daraf zu achten welcher Event verwendet wird.
Über die Methode View.appendConten()
können dem View Inhalte hinzugefügt werden. Die Inhalte werden beim Aufruf von
View.appendTo()
ebefalls ins DOM eingefügt.
Wichtiger Hinweis
Die Node, die die Inhate aufnehmen soll, muss das Attribute data-container
besitzen.
<template id="template">
<div data-container></div>
</template>