Ajax steht für „Asynchronous JavaScript and XML“ und beschreibt die Kommunikation zwischen Client und Server, ohne die Seite neu laden zu müssen. Das Konzept bietet auch für TYPO3 zahlreiche Chancen, die schon jetzt genutzt werden. Der Artikel liefert drei kurze Beispiele, die den Einstieg in Ajax und TYPO3 erleichtern sollen.

Im TYPO3-Backend kann Ajax die Arbeit des Redakteurs vereinfachen und beschleunigen. Seit Version 4.0 wird der Seitenbaum mit Hilfe von Ajax erstellt, was das Auf- und Zuklappen, aber auch das Verschieben der Seiten deutlich beschleunigt. Mit Version 4.1 wurde das so genannte Inline Relational Record Editing, kurz IRRE, in den TYPO3-Kern aufgenommen. IRRE vereinfacht das Bearbeiten von Datensätzen, die mit anderen in Verbindung stehen, wesentlich – unter anderem durch den Einsatz von Ajax.

Mit der Extension „AJAX Backend Drag And Drop“ (gb_bedraganddrop) lassen sich Contentelemente in der Seitenansicht komfortabel per Drag & Drop verschieben. „TV Drag And Drop“ (nh_tvdragndrop) bietet eine ähnliche Funktion für TemplaVoila. Alle genannten Funktionen setzen auf das JavaScript-Framework Prototype, das TYPO3 mitliefert.

Für das Frontend hat das Extension Repository wesentlich mehr Erweiterungen zu bieten, die eine TYPO3-Website um Ajax-basierte Funktionalitäten erweitern. Ein prominentes Beispiel ist die so genannte Lightbox, die zur Präsentation von Fotos und Abbildungen dient. Extensions für diesen Einsatzzweck sind „pmkslimbox“ und „perfectlightbox“. Aber auch für Bildergalerien lässt sich diese Technologie verwenden. Extensions dafür sind „rgsmoothgallery“, „wt_gallery“, „fb_flickr“ und „eco_gal“. Neu hingegen ist die Präsentation von kompletten Content-Elementen mit Ajax, etwa mit den Extensions „rgtabs“ oder „rgaccordion“.

Bevor man sich an die Entwicklung einer eigenen Extension mit Ajax wagt, sollte man sich die diversen existierenden Frameworks und Bibliotheken genauer ansehen. Diese nehmen dem Entwickler sehr viel Arbeit ab und stellen unterschiedlichste Effekte Out-of-the-box bereit. Bekannte Vertreter sind Mootools (t3mootools), Scriptaculous (jm_scriptaculous), Ext JS (extjs), jQuery (jquery) und viele andere. Die Namen in Klammern geben den Key der Extension an, die die jeweilige Bibliothek in TYPO3 integriert. Allerdings lassen sich die unterschiedlichen Bibliotheken auch direkt einbinden, ohne den Umweg einer Extension.

Egal, für welchen Weg man sich entscheidet, den gleichzeitigen Einsatz mehrerer Bibliotheken sollte man vermeiden, da sich diese untereinander oft nicht vertragen. Die Beispiele dieses Artikels setzen auf Mootools und können allesamt auch online betrachtet werden [1]. Auf der Mootools-Website finden sich zudem zahlreiche weitere einfache Beispiele.

Mootools lässt sich über die oben genannte Extension oder direkt per TypoScript einbinden. Für die folgenden drei Beispiele müssen zusätzlich die Dateien „t3nmenu.js“ (Beispiel 1), „t3nresize.js“ (Beispiel 2) und „t3nnewsticker.js“ (Beispiel 3) eingebunden werden.

page.includeJS.file1  =  fileadmin/dev/temp/mootools.js
page.includeJS.file2  =  fileadmin/dev/temp/t3nmenu.js
page.includeJS.file3 =   fileadmin/dev/temp/t3nresize.js
page.includeJS.file4 =   fileadmin/dev/temp/t3nnewsticker.js

Sämtliche Dateien finden Sie auf der Heft-CD und unter [1], die Bibliothek selbst (mootools.js) gibt es auch auf der Mootools-Website, wobei man zum Entwickeln immer die komplette Bibliothek verwenden sollte.

Das erste Beispiel zeigt ein einfaches Menü, das mit Hilfe von Ajax animiert wird. Zunächst erstellen Sie per TypoScript ein simples Listenmenü, anschließend brauchen Sie nur noch dieses JavaScript einzubinden.

01 window.addEvent('domready', function(){
02 	var list = $$('.t3nmenu li');
03 	list.each(function(element) {
04 		var fx = new Fx.Styles(element, {duration:200, wait:false});
05 		element.addEvent('mouseenter', function(){
06 			fx.start({
07 				'margin-left': 5,
08 				'background-color': '#666',
09 				color: '#ff8'
10 				});
11 			}); 
12 		element.addEvent('mouseleave', function(){
13 			fx.start({
14 				'margin-left': 0,
15 				'background-color': '#333',
16 				'color': '#888'
17 				});
18 			});
19 		});
20 	});

Mit dem Selektor „$$(‚.t3nmenu li‘)“ (Zeile 2) erhält man jedes Listen-Element innerhalb der Klasse „t3nmenu“ und weist anschließend jedem Element (Zeile 3) zwei Events zu: „mouseenter“ (Zeile 7) und „mouseleave“ (Zeile 15), die jeweils eine Animation auslösen. Für die Listen-Elemente der 2. Ebene wird ein, bis auf minimale Änderungen, identischer Code verwendet.

Die Mootools-Bibliothek stellt eine Funktion zur Verfügung, die es erlaubt, Elemente mit der Maus größer und kleiner zu ziehen [2].

window.addEvent('domready', function(){
	$('resizable1').makeResizable();
	});

In Zeile 2 wird mit dem Selektor „$(‚resizable1‘)“ dem Element mit der ID „resizeable1“ die Resize-Funktionalität gegeben.

Um dieses Beispiel zu realisieren, gibt es zahlreiche Wege. Das Element (z. B. ein div-Container) kann in einem Content-Element erstellt werden, rein mit TypoScript oder auch mittels einer Extension.
Mit folgendem TypoScript- und JavaScript-Code kann man jedes Content-Element vergrößern und verkleinern lassen:

tt_content.stdWrap.wrap = <div class="ce">|</div>

Jedes Content-Element wird von einem div-Container mit dem Attribut class="ce" umschlossen.

window.addEvent('domready', function(){
	var list = $$('.ce');
	list.each(function(element) {
		element.makeResizable();
	});
});

Mittels Selektor wird die Funktion „makeResizeable()“ jedem Element mit der Klasse „ce“ übergeben. Mit dem Wechsel von „element.makeResizable();“ zu „element.makeDraggable();“ lassen sich die Elemente auf der Seite verschieben – mit nur einer geänderten Zeile.

Mit TYPO3 lässt sich das Beispiel nach Belieben weiter ausreizen. So wäre beispielsweise eine zusätzliche Checkbox denkbar, die aktiviert sein muss, um einem Content-Element die Resize-Funktionalität zu geben.

Für Mootools gibt es zahlreiche fertige Beispiele, die per Suchmaschine oder im Mootools-Forum gefunden werden können. Der Newsticker in diesem Beispiel stammt aus diesem Forum [3].

Die Übertragung des Beispiels in die eigene TYPO3-Website ist auch in diesem Fall sehr einfach. Nach der Einbindung der nötigen JavaScript-Dateien wird die Klasse mit den notwendigen Parametern aufgerufen.

window.addEvent('domready', function() {
	var myTicker = new Ticker('eventsticker','toggle_eventsticker',{interval:6000});
	});

Spannend und interessant wird es, wenn es darum geht, die Inhalte für den Newsticker zu generieren: Hier kann TYPO3 seine Stärken voll ausspielen. Dafür muss man zunächst einen Blick auf die notwendige Syntax werfen:

<div id="eventsticker">
	<ul>
		<li>News 1</li>
		<li>News 2</li>
	</ul>
</div>

Diese Struktur muss beibehalten werden, andernfalls müsste der JavaScript-Code angepasst werden, da er diese Struktur voraussetzt. Es ist jedoch nicht relevant, wie die Struktur zustande kommt – hier können alle Möglichkeiten von TYPO3 verwendet werden, etwa das Content-Element „HTML“. Das ist zwar simpel, jedoch wenig elegant. Alternativ kann eine Extension die gewünschte Struktur generieren: Jede Extension, die Datensätze im Frontend in einer Liste ausgibt (etwa tt_news), kann verwendet werden, um Elemente für den Newsticker zu kreieren – einfach das Template auf das Notwendige reduzieren.

Eine weiterer Weg zur oben skizzierten Struktur ist reines TypoScript, was sich ebenso leicht realisieren lässt. Hier eignet sich das „cObj CONTENT“ und das „cObj RECORDS“ hervorragend, um aus Content-Elementen oder anderen Datensätzen Newsticker-Einträge zu erstellen.

Gerade ein Framework wie TYPO3 macht die Einbindung von Ajax sehr interessant, da eine optimale Aufgabenteilung existiert: TYPO3 kümmert sich um die Bereitstellung der Inhalte, Ajax um deren Manipulation. Ajax-Frameworks wie Mootools & Co nehmen dem Entwickler dabei eine Menge Arbeit ab, beschleunigen die Entwicklung und bieten Entwicklern wie Besuchern nicht nur schicke Effekte, sondern auch neuen Bedienkomfort.

Der Autor

Georg Ringer studiert Wirtschaftsinformatik in Linz, ist seit drei Jahren mit dem TYPO3-Virus infiziert, engagiert sich vor allem auf www.typo3.net (aka just2b) und hat bereits zahlreiche Extensions veröffentlicht, die auf www.just2b.com und [1] beschrieben werden. Seit kurzem verstärkt er die Firma cyberhouse (www.cyberhouse.at) in Linz.