Wie man eigene Dijits/Dojo Widgets schreibt (HowTo)

Dojo erfreut sich immer größerer Beliebtheit, so auch die Dijits aus der Dojo-Dijit-Bilbiothek. Nun ist man nicht auf die vor gefertigten Dijits beschränkt, sondern kann auch eigene erstellen. Dazu benötigt man HTML und JavaScript-Erfahrungen.

So, nicht viel geschwafel, sondern direkt los legen. Zuerst importiert man die Basisklassen:

dojo.require("dijit._Widget");
dojo.require("dijit._Templated");

dijit._Widget ist die Basisklasse für Dijits generell und dijit._Templated ist ein sehr nützlicher Dijit-Zusatz zur Markup-Verwaltung.

Danach erstellt man seine Klasse mittels dojo.declare, wobei wir uns der zuvor geladenen “Mix-Ins” bedienen. In die hinteren geschweiften Klammern kommt gleich unser eigentlicher Code.

dojo.declare("my.widget", [ dijit._Widget, dijit._Templated ], {});

In dem Beispiel hier werden wir einfach “Hallo Welt” ausgeben, um zu verstehen wie Dijits aufgebaut sind. Dazu schreiben wir uns erst ein bisschen Markup (HTML) in die Code-Klammern:

{
    templateString: "<div data-dojo-attach-point='ausgabeDiv'></div>",
    postCreate: function () {}
}

Die Namen, die man Elementen via data-dojo-attach-point gibt, lassen sich nach postCreate als Eigenschaften in this verwenden. postCreate ist also so zu sagen der Konstruktor.

Dennoch schreiben wir uns erst eine Funktion, welche “Hallo Welt” in unser Div schreiben soll:

    schreibHalloWelt: function ()
    {
        this.ausgabeDiv.innerHTML = "Hallo Welt!";
    }

Dann rufen wir das ganze im postCreate einfach auf:

this.schreibHalloWelt();

Sodass der gesamte Code am Ende so aussieht:

dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.declare("my.widget", [ dijit._Widget, dijit._Templated ], {
    templateString: "<div data-dojo-attach-point='ausgabeDiv'></div>",
 
    postCreate: function () 
    {
        this.schreibHalloWelt();
    },
 
    schreibHalloWelt: function ()
    {
        this.ausgabeDiv.innerHTML = "Hallo Welt!";
    }
});

Ein solches Dijit erstellt man später ganz normal durch den Namen, den man Ihm gegeben hat, in HTML z.B. so:

<div data-dojo-type="my.widget" data-dojo-props=""></div>

Über die data-dojo-props lassen sich Eigenschaften der Klasse ändern, da in diesem Beispiel aber keine Eigenschaften vorhanden sind, klappt das hier auch nicht.

Viel Erfolg, und eigene Erfahrungen und Infos gerne in den Kommentaren schreiben!