Dieser DHTML News Ticker von Scriptocean ist pflegeleicht und einzelne Komponenten lassen sich wieder verwenden. ZDNet erklärt wie er funktioniert, verändert und eingebaut werden kann.
Mit einem kleinen Feature kann so mancher Website eine gewisse Aktualität verliehen werden. Ein Nachrichtenticker vermittelt sicher das Gefühl von Aktualität an den Besucher, allerdings sollte dieses Feature einfach und pflegeleicht sein. Nach einiger Suche und Durchsicht verschiedener Scripts für Nachrichtenticker – einige in JavaScript und einige in Java geschrieben – fiel die Entscheidung auf den DHTML News Ticker[1] von ScriptOcean[2] entschieden.
Bei der Suche war allerdings einer der Hauptgesichtspunkte die Wiederverwendbarkeit einzelner Komponenten gewesen. Die Parameter, denen die Einträge in diesem Nachrichtenticker folgen, wurden in einem Datenfeld bereitgestellt und das Aussehen wurde über Variablen im Code der Anwendung bestimmt. Da der Rest des Scripts den gegebenen Vorstellungen entsprach und es leicht zu überarbeiten schien, beschloss man, das Script so zu verändern, dass die Nachrichten und das Aussehen für jede Seite, auf der sich ein Ticker befinden sollte, verändert werden konnte, während immer auf dasselbe Kernscript zurückgegriffen würde.
Neuorganisation des existierenden Codes
Zunächst wurde der Code durchgearbeitet und sein Layout geändert, um ihn leichter lesen und die gewünschten Veränderungen vornehmen zu können. Das Script wurde in regelmäßigen Abständen neu angeordnet und mit der im Download enthaltenen Beispieldatei überprüft. So konnte sichergestellt werden, dass bei der Übertragung in ein besser lesbares und ergänzbares Format nicht versehentlich die Funktion des Codes beeinträchtigt wurde. Der ursprüngliche Code findet sich in Listing A[3] und der überarbeitete Code in Listing B[4]. Ein Funktionsbeispiel der überarbeiteten Version findet sich unter Beispiel A[5].
Abgesehen davon, dass es so für den Gelegenheitssurfer erschwert wird, das Script ohne Angabe des Urhebers zu kopieren, ist das ursprüngliche Script auch kleiner, da es nicht wie Listing B Abstandhalter, etwa Tabulatoren oder Zeilenumbrüche, oder Kommentare enthält. In diesem Fall ist die Dateigröße dadurch um 1k angewachsen. Man kann in einigen Fällen eine Leistungssteigerung erzielen, wenn man auf den Lesekomfort für das menschliche Auge verzichtet, die Lesbarkeit für den Computer aber beibehält. Dies gilt für jeden Code, den man schreibt. Der Ticker auf dem Bildschirm besteht – wie in Beispiel A[5] zu sehen - aus drei Hauptteilen: dem Ticker-Kasten, in dem die Überschrift und Raum für die Meldung untergebracht ist, einem Kasten für die Schlagzeilen und einem Kasten für die Meldungen.
Nun, da sich das Script in einem zugänglicheren Format befindet, besteht die nächste Aufgabe darin, es in zwei Teile zu zerlegen. Der erste Teil besteht aus den Abschnitten, die einen Teil des Konfigurationsabschnitts und der statischen Code-Bibliothek für den Rest bilden werden. Für diesen Artikel nimmt man an, dass alle Optionen, die zum Konfigurationsabschnitt gehören werden, bei jeder Nutzung des Scripts einen Eintrag haben werden, auch wenn es sich dabei um eine Null oder einen leeren String handelt. Eventuell muss man ein Stück Code schreiben, das dies sicherstellt bzw. Situationen regelt, in denen dies nicht der Fall ist.
Im Script werden die folgenden Elemente dem Konfigurationsabschnitt zugeordnet:
Alles, was das Aussehen des Tickers bestimmt, also Farben, Schriften, etc. Alles, was auf die im Ticker anzuzeigenden Meldungen bezogene Daten enthält.
Nachdem diese Elemente entfernt wurden, wobei es sich effektiv um die ersten vierzig Zeilen des Scripts handelt, ist das Kernscript auf den in Listing C[6] gezeigten Umfang reduziert. Die entfernten Elemente sind in Listing D[7] aufgeführt. Dieser Code wird nun ausgeschnitten und als JavaScript in alle Seiten eingefügt, auf denen der Ticker verwendet werden soll.
Hier wurde angenommen, dass der Ticker jedes Mal ein komplett anderes Aussehen haben soll, obwohl man möglicherweise einige Element wie Farbe, Schrift und Größe vereinheitlichen und nur jeweils die Meldungen auf Instanzebene konfigurieren möchte. Man sollte vielleicht auch eine Fehlersuche einbauen, um sicherzugehen, dass die benötigten Parameter bestimmt wurden. Sollte dies nicht der Fall sein, muss man einen Standardwert eingeben, um JavaScript-Fehler zu vermeiden.
Jetzt, da der Ticker in seine beiden Bestandteile zerlegt ist, kann man zwei völlig unterschiedlich aussehende Ticker – siehe Beispiel B[8] und Beispiel C[9] – einrichten und dabei eine gemeinsame Quelldatei verwenden. Da dies nun funktioniert, soll nun geklärt werden, wie man die individuellen Elemente des Scripts so gestalten könnte, dass sie für den Endnutzer leichter zu verwenden sind, oder wie man sie sogar für mehrere Seiten bündeln könnte, wenn deren Aussehen und Inhalt gleich sein sollen. Am besten ist es die Elemente über eine XML DTD zu definieren, so dass jeder Ticker über eine XML-Datei gesteuert werden kann.
Die hierfür benötigte XML DTD ist relativ einfach, wie man in Listing E[10] sieht. Dabei wurde eine überarbeitete Version des JavaScript XML-Loadscripts verwendet, das in einem vorangegangenen Artikel zum Laden und Verarbeiten der XML-Datei mit den Daten für den Nachrichtenticker verwendet wurde. Mit diesem Code entsteht eine Funktion ähnlich der in Listing F[11] gezeigten, deren Ergebnis in Beispiel D[12] zu sehen ist.
Weitere Möglichkeiten
Hier wurde gezeigt, wie man einen für den einmaligen Gebrauch bestimmten DHTML-Nachrichtenticker in eine wiederverwendbare Komponente verwandeln kann und wie man diesem neuen Ticker die Parameter über XML mitteilt. Es gibt hierbei natürlich noch sehr viel Raum für Weiterentwicklungen, zum Beispiel könnte man das Aussehen über die XML-Datei bestimmen oder einen Handler einbauen, der Standardwerte liefert.
URLs in diesem Artikel:
[1] = http:/
[2] = http:/
[3] = http:/
[4] = http:/
[5] = http:/
[6] = http:/
[7] = http:/
[8] = http:/
[9] = http:/
[10] = http:/
[11] = http:/
[12] = http:/