Während der letzte Artikel in der dojo-Serie nur eine kleine Anpassung war, beschäftigen wir uns heute mit dijits. Mit dijits bezeichnet man Oberflächenelemente in dojo (dojo interface widgets = dijit). Aus dem vielfältigen Angebot verwenden wir in unserem Beispiel den dijit.Dialog. Der dijit.Dialog erzeugt einen modalen Dialog und ist ein gutes Beispiel für die Genialität von dojo.

Dem dijit.Dialog kann kann der anzuzeigende Inhalt als HTML-Knoten übergeben werden. Wenn statt desen dem Dialog-Objekt eine passende URL übergeben wird, wird der Inhalt automatisch per AJAX nachgeladen und angezeigt. Die ganze Komplexität, die dafür notwendig ist, ist in dem Objekt gekapselt. Als Anwendungsentwickler muss man lediglich das Objekt verwenden. Es ist einfach genial.

In unserer Beispielanwendung wollen wir den Dialog nutzen, um die Daten des Referenten als Dialog darzustellen, sobald auf den Namen des Referenten geklickt wird. Wie immer schauen wir uns erst einmal den dazu notwendigen Code an.//Loads a dialog
dojo.require("dijit.Dialog");

//Prepare the dialog
function prepareDialog(){
//creates a new dialog
var myDijit = new dijit.Dialog({title: "Referent", id:"dialog", style:"width:300px"});
//appends the dialog to an existing DOM node
dojo.byId("sessions").appendChild(myDijit.domNode);
//the dialog is hidden until called
}

function showSpeakerRefByName(speakerNameEncoded){
//get the dialog
var dialogDijit = dijit.byId("dialog");
var path = webPath + "/SpeakerDescriptionByName/" + speakerNameEncoded;
dialogDijit.attr('href', path);
dialogDijit.show();
}
Die erste Zeile sollte inzwischen jeder verstehen. Es wird das dojo-Package für den dijit.Dialog nachgeladen.

Die Funktion prepareDialog() erzeugt zunächst ein neues dijit.Dialog-Objekt. Wie schon häufiger bei dojo-Objekten gesehen, wird als Parameter im Konstruktor des Objektes ein Konfigurationsobjekt erwartet. In unserem Fall spezifisieren wird den Titel, vergeben eine ID und legen die Breite fest.

Die Zeile danach sieht zunächst unscheinbar aus, ist aber für das Funktionieren und insbesondere für das Verständnis von dijits von absoluter Wichtigkeit. Der HTML-Knoten, der für den Dialog erzeugt wurde, hat zunächst keine Verbindung zum aktuellen HTML-Dokument. Erst dadurch, dass er als Kindobjekt an das die Session umschließende Div angehängt wird, besteht eine Verbindung zwischen dem Dialog und dem HTML-Dokument.

Man muss sich immer wieder klar machen, dass alle dijits im Endeffekt nur aus HTML, CSS und JavaScript bestehen. Unser Dialog ist also nur ein absolut positioniertes Div-Element mit dem anzuzeigenden Inhalt, das im Z-Index über allen anderen Elemente der Webseite liegt, und einem zweiten Div-Element, welches sich zwischen der HTML-Seite und dem Dialog-Div legt und so für die Abschattung des Seiteninhaltes sorgt. Wieso ist diese Erkenntnis so wichtig? Weil man bisweilen vor lauter dijits vergisst, dass dojo die Grundprinzipien von Webanwendungen nicht ändern kann.

Die Funktion showSpeakerRefByName() holt sich per dijit.byId über den dijit-Manager zunächst einmal unseren dijit.Dialog. Der Befehl ist nicht zu verwechseln mit dojo.byId, der einen DOM-Knoten anhand einer ID findet. In der Variablen path wird die URL zu der Referentenbeschreibung zusammengestellt. Die URL wird dann in das Attribute "href" geschrieben. Mit der Methode dialogDijit.show() wird der Dialog angezeigt. Das ist auch der Moment in dem per AJAX der anzuzeigende Inhalt geladen wird. Je nachdem wie schnell die Serveranbindung ist, kann man eventuell noch eine kleine "Fortschrittsaninmation" sehen, bis der eigentliche Inhalt angezeigt wird.

Damit auch tatsächlich beim Klick auf den Referentennamen der Dialog angezeigt wird, müssen wir das onClick-Event regisitrieren. Dazu erweiteren wird unsere dojo.addOnLoad-Funktion um die folgenden Zeilen.//add the behavior to the speaker name to show the dialog
dojo.behavior.add({
"div.session span.speakerName": {
onclick: function(evt){
var speakerNameEncoded = evt.target.id;
showSpeakerRefByName(speakerNameEncoded);
}
}
});

//add style to name for pointer
dojo.query("div.session span.speakerName").style("cursor", "pointer");Alle Referentennamen sind in einem Span-Element mit der CSS-Klasse "speakerName" eingeschlossen. Neben der Formatierung hilft uns diese Entscheidung auch dabei, für das dojo.behavior-Objekt alle passenden DOM-Knoten zu finden. Um uns das Leben ein wenig einfacher zu machen, haben die DOM-Knoten mit den Referentennamen als ID den Namen in seiner websicheren Form. Diese ID wird beim Aufruf der showSpeakerByRefName()-Funktion übergeben. Die letzte Zeile sorgt dafür, dass der Referentenname auch wirklich als Link wahrgenommen werden kann.

Wie immer kann man sich das Beispiel live ansehen.

In der zu dieser Artikelserien gehörenden Beispieldatenbank finden sie den Inhalt dieses Artikels in der Maske "webSpeedAgendaing-Step 6|SpeedAgendaing-6" und der JavaScript Bibliothek "SpeedAgendaing-Step6.js".

Beim nächsten Artikel werden wir unser Beispiel dahingehend erweitern, dass beim Klick auf das Referentenbild ebenfalls der Dialog angeziegt wird.