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.