Free - Community EditionLizenz erwerben

Die Komponente

1. Was benötige ich für die Entwicklung einer eigenen Komponente?

Eine jsCow Komponente besteht im Wesentlichen aus 4 Klassen.

 

Die allgemeine Komponenten-Klasse

Die Komponenten-Klasse stellt die letztendliche Instanz einer Kompoente dar und trägt das Model, den Controller und gegebenenfalls auch den View in sich.
Sämtliche dem User zur Verfügung gestellten Methoden zur Benutzung einer Instanz einer Komponente werden in dieser Klasse definiert.

Das Model der Komponente

Das Model hält alle Daten der Komponente und ist Bestandteil zur allgemeinen Datenverarbeitung aller Daten der Komponente.

Der Controller der Komponente

Der Controller steht in besonderem Bezug auf das Model oder den View der Komponente.
Ein Controller ist sozusagen der Verwalter der reinkommenden Befehle und entscheidet, ob eine Methode vom View oder eine Methode vom Model ausgeführt wird.

Weiterhin spielt der Controller eine entscheidende Rolle in der Verwendung von Events. Wird beispielsweise ein globales Event auf eine Komponente gefeuert, so wird der Event-Manager versuchen, eine entsprechende Event-Handler-Methode im Controller aufzurufen. Existiert eine solche Handler-Methode dort nicht, so wird nichts aufgerufen.

Mehr Informationen zu diesem Thema finden Sie im Punkt 4 auf dieser Seite. 

Der View der Komponente

Der View ist die Präsentationsschicht und wird für die Darstellung aller benötigten Daten genuzt.
Zudem werden hier sämtliche Logiken hinterlegt, die für das Rendern oder das Manipulieren des DOM benötoigt werden.

 

Wie ein Entwickler seine Methoden oder die leztendliche Geschäftslogik umsetzt, bleibt grundsätzlich Ihm überlassen.
Die Definitionen auf dieser Seite sind daher ehr als Empfehlung zu betrachten.

Die hier gezeigten Anwendungen haben sich als relativ verlässlich im Bezug auf jsCow herausgestellt.


2. Wie wird eine Komponente beim Initialisieren verarbeitet und was ist zu beachten?

Beim Initialisieren einer neuen Komponente werden folgende Methoden der Reihenfolge nach abgearbeitet.
Durch die vorhandenen Strukturen im Web, werden zur entgültigen Initialisierung und Rendern einer Komponente 2 Wege benötig.


Erste Richtung von Außen nach Innen ( Init ):

Wird die Methode run () in der Eltern-Application ausgeführt, wird als erstes der Komponentenbaum von Außen nach Innen durchlaufen.

- Wenn eine Extension-Methode init () existiert, dann wird diese ausgeführt.

- Existiert eine oder mehrere Kind-Komponenten, so wird die Initialisierung dieser angestoßen.

 

Zweite Richtung von Innen nach Außen ( Show ):

Wird beim ersten Durchlauf keine weitere Kind-Komponente gefunden, so wird der Komponenten-Baum wieder von Innen nach Außen durchlaufen.

- Ist das Model verfügbar, so wird die init () Methode vom Model aufgerufen.

- Sind alle Komponenten der gleichen Ebene fertig, so wird die show () Methode der Eltern-Komponente aufgerufen.

 

Wann, oder in welcher Reihenfolge weitere Methoden im Bezug auf den View ausgeführt werden sollen, steht dem Entwickler frei.
 

Init des View im richtigen Moment ausführen:

Für den Aufruf der init () Methode des View, wird folgender Aufruf über die init () Methode des Model empfohlen:
Jeder Controller wird bei Erzeugung automatisch um weitere Methoden erweitert.

 

Darunter auch die Methode handleViewInit (). 
Die Methode handleViewInit () nimmt das Event "viewInit" entgegen und wird versuchen die View-Methode init () auszuführen.

 

init: function() {
    // ... Model init codes ...
   this.globalEvents.trigger("viewInit", this.getConfig(), this.getCmp());
}
 

In diesem Beispiel wird das Event "viewInit" getriggert.
Als Parameter wird die aktuelle Konfiguration des Model übergeben.
Der letzte Parameter gibt eine Referenz auf Komponenten-Object an, welches dieses Event direkt entgegennehmen soll.

In diesem Beispiel bezieht sich this auf die Instanz der Komponente und .getCmp () auf die Instanz des Models.

 

Die Event-Parameter werden im Punkt 4 noch einmal ausführlich beschrieben.


Init des Controller:
 

Die init () Methode eines Controller wird direkt nach setzen des Controller ( Methode setController () ) bzw. der Erzeugung dessen Instanz in der Komponente ausgeführt.


3. Visuelle Übersicht einer Komponente.

Komponenten Struktur

4. Events

Das Event-System in jsCow ist in seiner Anwendung sehr einfach gestaltet.

Es wird zwischen 2 Typen von Events unterschieden: 

Globale Events 

Standard Events

 

Der Unterschied beider Varianten ist technisch gesehen zwar nicht so groß, zeigt aber in verschiedener Anwendung sehr spezifische Unterschiede auf.

 

Standard Events:

Der Unterschied zu den globalen Events liegt in der Richtung, in der man sie einsetzt.

Zusätzlich ist es hier möglich eine benutzerdefinierte Funktion oder ein globales Event als Ausführungsparameter zu definieren.

 

Beispiele für Standard Events:

 



Globale Events:

Im Einsatz von globalen Events muss dem Entwickler immer bewusst sein, dass ein solches Event von jeder Komponente entgegen genommen werden kann.

Man sollte sich also im Klaren sein, welche Daten eine Komponente bei welchem globalen Event erwartet.

Ist dies nicht immer der Fall, so sollten die Komponenten in Ihren Handler-Methoden immer entsprechende Sicherheitsabfragen auf die übergebenen Event-Daten haben.

 

Der Controller könnte ist hier beispielsweise der Daten-Filter aller Event-Daten sein, bevor eine entsprechende Model-Methode ausgeführt wird. 

Ob die ensprechenden Abfragen im Controller oder im Model definiert werden, steht dem Entwickler natürlich frei.

 

Beispiele für globale Events:

 


Beispiele für Global-Event-Bubbling:

 

5. Beispiele und Aufbau einer Komponente

Struktur der allgemeinen Komponenten-Klasse:

 

Struktur einer Model-Klasse:

 

Struktur einer View-Klasse:

 

Struktur einer Controller-Klasse:

 


Empfehlung:

Bei Verwendung einzelner Komponenten, empfiehlt es sich alle Klassen einer Komponente in einer *.js Datei abzulegen und diese im HTML Header einzubinden.

Natürlich könnte man je nach Projekt auch die einzelnen MVC Klassen einer Komponente in weitere Dateien auszulagern aber dies macht ein solches Projekt eigentlich nur unnötig kompliziert.

6. Anwendung der zuvor erstellten Komponente