Im letzten
Artikel haben wir uns mit den
Bestandteilen von dojo beschäftigt. Bevor wir nun endlich in den Einsatz
von dojo in Lotus Notes-Anwendungen einsteigen, will ich kurz die Beispiel-Anwendung
vorstellen, die ich verwenden werde. Ursprünglich habe ich sie für das
EntwicklerCamp
entwickelt. Rudi
Knegt, die treibende Kraft hinter
dem EntwicklerCamp
und AdminCamp,
kam vor zwei oder drei Jahren mit der Idee des SpeedAgendaing. Am
Morgen eines Konferenztages hat jeder Referent kurz Zeit, für seinen Vortrag
zu werben. Ich habe für meinen SpeedAgendaing Auftritt die Situation aufgegriffen,
vor der jeder Teilnehmer einer Konferenz steht: aus verschiedenen parallelen
Tracks auswählen zu müssen.
Dazu habe ich alle Session, die zur
gleichen Zeit, wie mein eigener Vortrag liefen, aufgelistet. Neben dem
Titel war zunächst nur ein Bild des Referenten und der Name zu sehen. Wurde
der Titel angeklickt, wurde die Sessionbeschreibung eingeblendet. Beim
Klick auf das Bild oder den Referentennamen wurde die Selbstbeschreibung
des Referenten per AJAX nachgeladen. Zur Entscheidungsfindung konnten die
einzelnen Sessions per Drag & Drop in eine neue Reihenfolge bringen.
Schlußendlich konnte die Entscheidung mit Drag & Drop auf die Sessionuhrzeit
zum Ausdruck gebracht werden.
Die fertige Webseite für das SpeedAgendaing
kann hier
live ausprobiert werden.
Wie es sich nicht anders gehört, befinden
sich die Sessionbeschreibungen und die Daten der Referenten in Notes Dokumenten.
Es gibt jeweils ein Dokument pro Session und ein Dokument pro Referent.
In einer Ansicht werden die Inhalte
zu folgendem HTML-Code zusammengefügt.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>
Wichtig ist, dass bei der Ansicht die
Option "Treat view contents as HTML" aktiviert ist, damit Domino
nicht seinen eigenen HTML-Code einfügt.
Die Ansicht wird als embedded view in
eine Maske eingefügt.
Bisher ist alles Standard-Notes-Webentwicklung.
Der Stand
ist, mit Hilfe von ein bisschen CSS, nicht hässlich. Aber auch noch nichts
ungewöhnliches.
function start(){
dojo.fadeIn({node: "headline",duration: 1000}).play();
}Die Methode dojo.fadeIn() erzeugt ein Animationsobjekt,
das HTML-Elemente sanft einblendet, und ist Bestandteil des mit dojo.js
geladenen base-Teiles von dojo. Das bedeutet, wir müssen keine weiteren
Packages laden, um diese Funktionalität nutzen zu können. Als Parameter
übergeben wir ein JavaScript-Objekt, dass wir direkt mit der folgenden
Notation erzeugen.{
node: "headline",
duration: 1000
} Das Objekt hat zwei Attribute. Das node-Attribute
bezeichnet die ID des HTML-Knotens, auf den die Animation angewendet werden
soll. In unserem Fall also die Überschrift SpeedAgendaing .Das duration-Attribute
gibt die Länge der Animation an. Von dem erzeugten Animationsobjekt wird
unmittelbar die Methode play() aufgerufen, um die Animation zu starten.
Den Effekt kann man sich hier
ansehen.
Ich muss zugeben, dass ich einen kleinen
Trick anwenden musste, damit der Effekt sichtbar wird.<style
type="text/css">
div#headline{
opacity: 0;
}
</style>Mit
dem CSS-Effekt stelle ich sicher, dass die Überschrift zuerst nicht sichtbar
ist. 
Die Beispiel-Anwendung kann selbstverständlich
herunter geladen werden.
dojo-Sample.zip
(433
KB)
Im nächten
dojo Artikel geht es um dojo.query(),
einem sehr mächtigen Werkzeug, um auf beliebige Mengen von HTML-Knoten
zugreifen zu können.
