Mein letzter Artikel in der dojo-Serie ist ja nun schon ein wenig her. XPages und ein bisschen Urlaub haben mich beschäftig gehalten.

Zur Erinnerung - zuletzt hatten wir einen dijit.Dialog genutzt, um Referenteninformationen anzuzeigen. Das Beispiel wollen wir ein wenig weiter ausbauen und weil es schon so lange her ist, machen wir auch eine kleine Wiederholung.

Ziel ist es, die Referenteninformation auch anzuzeigen, wenn auf das Bild des Referenten geklickt wird. Da wir einen Teil des Codes vom letzten Mal wieder verwenden werden, habe ich ihn der Einfachheit halber in diesem Blog-Eintrag noch einmal eingefügt.//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();
}
In der erste Zeile wird das dojo-Package für den dijit.Dialog nachgeladen.

Wir benötigen ein dijit.Dialog-Objekt, das wir später mit Inhalten befüllen können. Die Funktion prepareDialog() erzeugt solch ein neues dijit.Dialog-Objekt. Als Parameter wird im Konstruktor des Objektes ein Konfigurationsobjekt übergeben. Wir legen zunächst einmal nur den Titel, die ID und die Breite fest.

Wie letztes Mal schon erwähnt, kann ein dijit.Dialog nicht einfach im luftleeren Raum hängen. Es hilft sich immer mal wieder klar zu machen, dass dojo und JavaScript keine eigenen GUI-Objekte im eigentlichen Sinn erzeugen. Sie setzten lediglich CSS und HTML so geschickt ein, dass beim Anwender der Eindruck entsteht. Für einen modalen Dialog, wie ihn dijit.Dialog vermeintlich erzeugt, werden zwei Div-Element erzeugt. Das eine Div-Element ist absolut positioniert und liegt per Z-Index über allen anderen Elementen der Seite. Das anderen Div-Element liegt zwischen dem ersten Div-Element und dem Rest der Seite und ist für die Abschattung des Seiteninhaltes zuständig. Über die Zeile dojo.byId("sessions").appendChild(myDijit.domNode); wird der DOM-Knoten des Dialoges in der Seite verankert. Diese Verankerung ist notwendig, damit der Dialog mit der HTML-Seite interagieren kann.

Wenn die Referenten-Info angezeigt werden soll, wird die Funktion showSpeakerRefByName() aufgerufen. Mittels dijit.byId liefert der dijit-Manager zunächst einmal unseren dijit.Dialog zurück. Achtung! dijit.byId() ist nicht zu verwechseln mit dojo.byId(). Letztere Methode findet einen DOM-Knoten anhand seiner ID. Zunächst bauen wir in der Variablen path die URL zu der Referentenbeschreibung zusammen. Das Geniale an dem dijit.Dialog ist, dass wir lediglich diesen String in das Attribute "href" schrieben müssen und beim Aufruf der Methode dialogDijit.show() wird der Inhalt der URL automatsich per AJAX nachgeladen und angezeigt.

Nun müssen wir lediglich in der dojo.addOnLoad-Funktion ein onClick-Event auf das Referentenbild regisitrieren.//add the behavior to the speaker picture to show the dialog
dojo.behavior.add({
"div.session img.speakerPicture": {
onclick: function(evt){
var imageURL = evt.target.src;
var speakerNameEncoded = imageURL.replace(/.*SpeakerByName\/(.*)\/\$File.*/g, "$1");
showSpeakerRefByName(speakerNameEncoded);
}
}
});

//add style to name for pointer
dojo.query("div.session img.speakerPicture").style("cursor", "pointer");
Für den Aufruf der Funktion showSpeakerRefByName benötigen wir den Namen des Referenten in seiner websicheren Form. Damit es einfacher ist, den nachfolgenden Trick zu verstehen, will ich vorher noch einmal den HTML-Code zeigen, der aus unserer Notes-Ansicht stammt. 1. <div class="session" id="Track%201%20-%20Session%203">
2. <span class="sessionNr">Track 1 - Session 3</span>
3. <img class="speakerPicture" src="/Projekte/Konferenzen/dojo.nsf/SpeakerByName/Maureen%20Leland/$File/Ref-maureen-leland.jpg">
4. <h1>Domino Designer and XPages 8.5.1: A Perfect Match!</h1>
5. <span class="speakerName" id="Maureen%20Leland">Maureen Leland</span>
6. <div class="sessionDescription" id="descTrack%201%20-%20Session%203">In 8.5.1, XPages roared into the Notes client and realized the dream of write once, run in both the Web and the Notes client. We'll review the new capabilities in 8.5.1 and how they streamline XPage development, and also take a look at some of the features that will be delivered "next."
7. </div>
8. </div>
In der dritten Zeile steht die URL zu dem Bild des Referenten. Der Names des Referenten wird in der URL als Suchschlüssel für die Ansicht verwendet. Unser Trick besteht nun darin, dass wir uns über evt.target.src die URL des angeklickten Bildes in die Variable imageURL schreiben. Danach helfen uns reguläre Ausdrücke, um den Namen zu extrahieren. Dass Hinzufügen des CSS-Styles cursor:pointer bewirkt, dass das Referentenbild auch 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 7|SpeedAgendaing-7" und der JavaScript Bibliothek "SpeedAgendaing-Step7.js".

Der nächste Artikel bringt ein spannendes neues Thema: Drag & Drop, welches verblüffend einfach umzusetzen ist.