Zum Inhalt

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>

Sequenzdiagramm

My super diagram

Kommentare