One way of using a dijit.Dialog is to
invoke it with a DOM node as content. Another more interesting way of using
it is to specify an URL. The content of this URL is then loaded via AJAX.
All the complexity needed for that is capsulated by the object. As an application
developer you just have to use it. It is simply genial.
For our sample application we will use
the dialog for showing some speaker information after clicking on the speaker
name. As always we start with a look at the code we need. //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();
}
The first line should be a no-brainer
by now. It tells dojo to load the dijit.Dialog package.
The function prepareDialog() creates
a new dijitDialog object. The constructor needs a configuration object.
This is a common technique for a lot of dojo objects. At this time we just
specify the title, an id and the width of the dialog.
The next line looks quite unimpressive.
But it is absolutely necessary to make this work and it is important to
understand the concepts behind it. While creating the dijit.Dialog object
a DOM node for this dialog is created. This DOM node is initially not part
of the current HTML document. Only be making it a child node of an existing
node in the DOM tree the dialog could interact with the DOM tree.
It is crucial to understand that at
the end all dijits are plain HTML, CSS and JavaScript. Our dialog is nothing
more than an absolute positioned div element that overlay all other elements
in the web page. Directly underneath is another div element with half opacity
which covers the page to increase the modal effect of the dialog. Why do
I emphasize this aspect? Because sometimes while dealing with dijits people
seems to forget that dojo can't change the principles of web applications.
The function showSpeakerByRefName()
gets a handle to our dijit.Dialog object by asking the dijit manager for
it with the method dijit.byId. Don't confuse this method with dojo.byId
which returns a DOM node with the given id. The variable path contains
the URL with the speaker description. We place the URL in the attribute
"href" of the dijit.Dialog. While calling the method dialogDijit.show()
two things happen. First of all the dialog while appear on the web page.
Then the content from the URL is loaded using an AJAX request. As soon
as the content is loaded it will be displayed in the dialog box. If the
server connection isn't fast enough you might see one of those typical
animated images telling you that something is going on.
To make the speaker name react on a
click we have to register this event. The following lines of code in our
dojo.addOnLoad function will do it.//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");Every speaker name is enclosed
in a span element with a CSS class "speakerName". We use this
class not only to change the appearance but also to find all DOM nodes
for our dojo.behavior object. To make life it little bit easier all the
spans have an id with the speaker name encoded. This id will be used in
the showSpeakerRefByName() function. The last line changes the style of
the speaker name span elements to make them look like 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
6 | SpeedAgendaing-6" and the JavaScript library "SpeedAgendaing-Step6.js".
We while enhance our sample in the next
article so that a click on the
speaker picture will also show the dialog with the speaker description.
