dojo and Notes: Article 9 - dijit.Dialog - A little trick as an enhancement

by Bernd Hort,
assono GmbH, Standort Hamburg,


dojo-Logo It has been quite some time since my last article in this little dojo series. XPages and some vacation kept me busy. wink.gif

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.

Technical article IBM Domino JavaScript Development

Sie haben Fragen zu diesem Artikel? Kontaktieren Sie uns gerne: blog@assono.de

Do you want an individual solution? Contact us

More interesting entries

Any questions? Contact us.

If you want to know more about our offers, you can contact us at any time. There are several ways to contact us for a non-binding first consultation.

We don’t sell your data. 100% guaranteed. See: Privacy Policy
assono GmbH

Location Kiel (headquarters)
assono GmbH
Lise-Meitner-Straße 1–7
24223 Schwentinental

Location Hamburg
assono GmbH
Bornkampsweg 58
22761 Hamburg

Phone numbers:
Human resources department: +49 4307 900 407
Marketing department: +49 4307 900 402

E-Mail adresses:
contact@assono.de
bewerbung@assono.de