dojo und Notes: Artikel 3 - Vorstellung des Anwendungsszenarios "SpeedAgendaing" und der erste Schritt dahin

von Bernd Hort,
assono GmbH, Standort Hamburg,

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.
A picture named M2

A picture named M3

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.
A picture named M4

Die Ansicht wird als embedded view in eine Maske eingefügt.
A picture named M5

Bisher ist alles Standard-Notes-Webentwicklung. Der Stand ist, mit Hilfe von ein bisschen CSS, nicht hässlich. Aber auch noch nichts ungewöhnliches.


A picture named M6 Der erste Schritt der Webseite ein bisschen mehr Leben einzuhauchen, verbirgt sich in der Funktion start(), die über das onLoad-Event im Body-Attribute aufgerufen wird.
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. wink.gif

Die Beispiel-Anwendung kann selbstverständlich herunter geladen werden.
zip.gif
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.

Fachbeitrag IBM Domino Entwicklung JavaScript

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

Sie wollen eine individuelle Lösung? Kontaktieren Sie uns

Weitere interessante Artikel

IBM Cognos Analytics 11.0.9 (R9)

IBM Cognos Analytics 11.0.9 (R9)

Erst Mitte November hatten wir über Neuerung in der Version 11.0.8 gebloggt. Knapp ein Monat später veröffentlicht IBM die Version 11.0.9 … Mehr

von
Filip Meyer
,

Sie haben Fragen? Wir sind für Sie da.

Wenn Sie mehr über unsere Angebote erfahren möchten, können Sie uns jederzeit kontaktieren. Sie können uns auf verschiedene Weisen für eine unverbindliche Erstberatung erreichen:

assono GmbH

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

Standort Hamburg
assono GmbH
Bornkampsweg 58
22761 Hamburg

Telefonnummern:
Zentrale: +49 4307 900 407
Techn. Hotline: +49 4307 900 403
Vertrieb: +49 4307 900 402

E-Mail-Adressen:
kontakt@assono.de
bewerbung@assono.de