As a reminder - most recently we used
a dijit.Dialog to display some speaker information. In this blog entry
we enhance our sample and repeat some parts of the blog entry before.
Our aim is to show the speaker information
also when a user clicks on the picture of a speaker. Since we use parts
of the code from last time, I decided to add the code to this blog entry
again. //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 the first line we load the dojo package
for the dijit.Dialog.
We need a dijit.Dialog object, which
we can fill with content later. The function prepareDialog() creates a
new dijit.Dialog object. As a parameter a configuration object is given
in which we specify the title, the id and the width.
As we mentioned last time a dijit.Dialog
has to be connected to a HTML document. From time to time it is necessary
to remember that dojo and JavaScript don't have GUI elements of their own.
All they do is to use CSS and HTML in a way that the user gets the impression
of GUI elements. For a modal dialog, which a dijit.Dialog supposedly is,
two div elements are needed. One div is absolutely positioned and lays
above all other side elements because of its z-index. The other one lays
between the first div and the rest to give this schading look. With the
line dojo.byId("sessions").appendChild(myDijit.domNode); the
DOM node of the dialog is added to the HTML document. The dialog has to
be part of the HTML document in order to interact with it.
To actually show the dialog the function
showSpeakerRefByName() is called. With dijit.byID() the dijit manager returns
the dijit.Dialog object. Don't confuse dijit.byId() with dojo.byId(). The
latter finds a DOM node by its id. In the variable path we build the url
to the speaker information. The genius of the dijit.Dialog is that the
only think we have to do is to set the attribute "href". As soon
as the method dialogDijit.show() is called the content from the url is
loaded via AJAX and shown.
In the dojo.addOnLoad function we register
the onClick-Event for the speaker picture.//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");
To be able to call showSpeakerByRefName()
we need the name of the speaker in a websafe notation. To better understand
the trick we use to get the name of the speaker from its picture I show
you the HTML code we get from that Notes view. 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 the third line the url of the picture
can be seen. We use the name of the speaker in an encoded notation as a
key for the Notes view. So the trick is to get the url of the picture from
evt.target.src. With the help of a regular expression we extract the name
of the speaker. In the last line we add some CSS to the picture so that
the cursors is shown as it would be a link.
As always the sample
can be tested live.
In the sample
database belonging to this series
of articles you can find the content of this article in the form "webSpeedAgendaing-Step
7 | SpeedAgendaing-7" and the JavaScript library "SpeedAgendaing-Step7.js".
I'm really looking forward to the next
article where we introduce drag
& drop which is astonishingly easy.
