26.06.2010

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

>>Author:  Bernd Hort
>>Ort:     Hamburg

URL: http://www.assono.de/blog/d6plinks/dojo-and-Notes-article-3-Speed-Agendaing-And-First-Step

Category: dojo, Web-Entwicklung, Entwicklung, Lotus Domino

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

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.

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.

The css statement ensures that the headline is not visible at the beginning.