dojo and Notes: Article 3 - Use case "SpeedAgendaing" and the first step

by Bernd Hort,
assono GmbH, Standort Hamburg,

A picture named M2 In the last article we covered the parts of dojo. Before we finally get into the use of dojo in Lotus Notes applications, I will briefly introduce the sample application, which I will use in this article series. I originally developed it for the EntwicklerCamp. Rudi Knegt, the driving force behind the EntwicklerCamp and the AdminCamp,  came two or three years ago with the idea of SpeedAgendaing. On the morning of every conference day each speaker has short time to promote his session. For my SpeedAgendaing promotion I have taken the known situation to choose between parallel tracks at the same time slot.

So I listed all the session, which where parallel to my session. At first there was beside the title only the name of the speaker and a picture of the speaker. When the title has been clicked, the session description faded in. A click on the picture or the name of the speaker loaded the speaker vita via AJAX. To support the decision making process the session order could be rearranged via Drag & Drop. Finally the selected session could be dragged to the time slot.
The SpeedAgendaing website can be tried out live here.

The session descriptions and the speaker data are in separate Lotus Notes documents. (Otherwise this would not be a good example of a Lotus Notes web application.)
A picture named M2

A picture named M3

In a Notes view the content is merged to the following HTML code. 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>

It is important to check the option "Treat view contents as HTML" to prevent Domino from adding his own HTML code.
A picture named M4

The view is embedded into a Notes form.
A picture named M5

Sofar this is standard Notes web development. The resulting website is, with the help of some CSS, not ugly. But still nothing unusual.


A picture named M6 The first step to enhance the website is in the function start(), which is called from the onLoad event in the body attribute.
function start(){
 dojo.fadeIn({node: "headline",duration: 1000}).play();
}The method dojo.fadeIn() creates an animation object, which fade in HTML elements smoothly, and is in the base part of dojo, loaded with the dojo.js JavaScript library. That means we don't have to load any further packages to use this functionality. The exspected parameter is a JavaScript object, which is directly created with the following syntax.{
 node: "headline",
 duration: 1000
} This object has two attributes. The node attribute specifies the id of the HTML node. In this case the headline image "SpeedAgendaing" . The duration attribute controls the timing of the animation. The play() method of the created animation object is called directly to start the animation immediately.
The effect can be seen here.

I must admit that I had to use a little trick so that the effect is visible.<style type="text/css">
 div#headline{
   opacity: 0;
 }
</style>The css statement ensures that the headline is not visible at the beginning. wink.gif

The sample application can be downloaded.
zip.gif
dojo-Sample.zip
(433 KB)
In the next article we cover dojo.query(), a very powerfull tool the get a handle to all kinds of HTML nodes.

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