vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbacknächstes Kapitel


Tag 4

Websites in Bewegung - clientseitige Verhaltensweisen

Der Stoff der vorausgegangen Tage hat sich ausschließlich mit der Erstellung statischer Websites beschäftigt. Statisch bedeutet, dass Inhalt und Erscheinungsbild eines HTML- Dokumentes durch anwenderseitige Aktionen weder beeinflusst noch verändert werden können. Zwar haben wir schon über die vorprogrammierten JavaScript-Objekte von UltraDev gesprochen, mit denen Sie HTML-Objekten dynamische Funktionalität verleihen können, doch haben wir sie bis jetzt noch nicht eingesetzt. Doch ab heute wird das anders, denn mit den DHTML-Objekten kommt Leben in die Website. Der Stoff des heutigen Tages im Überblick:

4.1 DHTML - Was hat man darunter zu verstehen und was nicht?

Der Begriff DHTML, die Abkürzung für dynamisches HTML, ist nicht ganz glücklich gewählt, denn er legt die Schlussfolgerung nahe, dass die bisher statische Auszeichnungssprache HTML nun um die Fähigkeit erweitert wurde, Objekte mit dynamischem Verhalten zu versehen. Liest man zum ersten Mal von DHTML, denkt man sich vielleicht: »Muss ich jetzt etwa schon wieder eine neue Programmiersprache lernen?« Tatsächlich ist DHTML nichts anderes als eine Mischung aus HTML, Stylesheets und JavaScript.

Wenn Ihre Website für ein möglichst breites Publikum und die unterschiedlichsten Plattformen zugänglich sein soll, dann verbietet sich unter Umständen der Einsatz von DHTML. Wenn Sie Ihre Website mit DHTML-Effekten ausstatten, muss der Browser des Anwenders bestimmte Voraussetzungen erfüllen (Browser der neueren Generation, Installation bestimmter Plug-Ins usw.). Bei Einsatz solcher Effekte laufen Sie also Gefahr, ein bestimmtes Publikum auszuschließen.

Stylesheets

Stylesheets, die wir in der morgigen Lektion ausführlich besprechen werden, ermöglichen die exakte Positionierung von Elementen auf der Seite sowie präzise Größenangaben. Auch die Verwendung von Ebenen ist weitgehend von der Verwendung von Stylesheets abhängig. Wenn Sie in ein HTML-Dokument Ebenen einsetzen und deren Eigenschaften definieren, haben Sie im Grunde ein Stylesheet für diese Ebene geschrieben. Im Fall von Ebenen werden die nötigen Stylesheets sozusagen stillschweigend im Hintergrund erzeugt, bei anderen Objekten müssen Sie jedoch die Ärmel aufkrempeln und selbst Hand anlegen.

Da Stylesheets die pixelgenaue Positionierung von Elementen ermöglichen, spielen sie eine zentrale Rolle bei der Erzeugung von dynamischen Effekten und Animationen. Ohne Stylesheets könnte z.B. JavaScript nicht auf die Attribute eines Objekts zugreifen und sie dynamisch verändern.

JavaScript

JavaScript ist eine Programmiersprache, die clientseitig im Browser arbeitet und sämtliche Objekte eines HTML-Dokuments ansprechen und verändern kann. JavaScript hat dabei aber nur auf die Eigenschaften eines Objektes Zugriff, die über HTML-Tags oder Stylesheets definiert sind. Sie können z.B. also nicht Helligkeit oder Kontrast einer Abbildung mit JavaScript verändern. Wenn Sie daher die Eigenschaften eines Objekts nicht per HTML oder Stylesheets ansprechen können, werden Sie auch mit JavaScript nicht weit kommen.

Das heißt natürlich nicht, dass JavaScript nutzlos ist. Die Fähigkeit, die Eigenschaften eines Objekts dynamisch ändern zu können, bedeutet, dass Objekte clientseitig, d.h. auf dem Rechner des Anwenders, manipuliert werden können. Mit ein paar Zeilen Code können Sie so Bilder und Text austauschen oder in der Größe verändern. Da die nötigen Operationen vom Rechner des Anwenders ausgeführt werden, muss der Server nur die Seite im Ausgangszustand sowie die nötigen Grafiken übertragen und wird somit entlastet.

Das DHTML-Problem

Wenn Sie nun sagen, dass DHTML eine tolle Erfindung ist, stimme ich Ihnen da durchaus zu. Theoretisch handelt es sich bei DHTML um eine wunderbare Möglichkeit, dem Anwender maßgeschneidert Feed-back zu geben, ohne serverseitige Scripts einsetzen oder schreiben zu müssen. Leider ist DHTML in der Praxis nicht so pflegeleicht, wie man sich das wünschen würde.

In der Einleitung zu diesem Buch habe ich das Thema Webbrowser und die Problematik der unterschiedlichen Umsetzung von HTML-Standards angesprochen. Die Browserhersteller haben sich in diesem Punkt mittlerweile weitgehend geeinigt und es hat sich ein verbindlicher HTML-Standard etabliert. Bei der Implementierung von JavaScript in den Browsern bleibt in puncto Standards jedoch noch ein gutes Stück Arbeit zu leisten.

Wenn Sie schon einmal ein JavaScript-Programm geschrieben haben, um es in eine Webseite einzubauen, haben Sie vermutlich auch einige Mühe darauf verwendet, dass Ihr fertiges Programm sowohl im Netscape Navigator als auch im Internet Explorer einwandfrei funktioniert. Und nach getaner Arbeit haben Sie sich stolz zurückgelehnt, mit sich und der Welt zufrieden, und an Freunde, Kollegen und Vorgesetzte schnell eine E- Mail geschickt mit der Bitte, doch mal einen Blick auf die tolle JavaScript-gepowerte Seite zu werfen. Aber welchen Browser Sie auch verwenden, um Ihre JavaScript-Seite zu testen, der Betrachter Ihrer Seite wird immer genau den anderen Browser verwenden und prompt funktioniert auch die Seite nicht wie erhofft.

Hier holt nicht nur das Schicksal mit harter Hand zu einem grausamen Schlag gegen uns aus, sondern der Hoffnung auf erfolgreiche Präsentation von DHTML-Seiten über alle Browser- und Plattformgrenzen hinweg ist hiermit ein jähes Ende bereitet. Jeder Browser spricht sozusagen seinen eigenen JavaScript-Dialekt. Die Hauptschwierigkeit liegt in der Verwendung von unterschiedlichen Document Object Models (DOM) bei der Implementierung von JavaScript in den verschiedenen Browsern.

Über das DOM wird geregelt, wie Objekte per JavaScript angesprochen und verändert werden. Zwischen dem DOM des Internet Explorers und demjenigen von Netscape klafft eine gewaltige Lücke. Um JavaScript-Code problemlos von einer Plattform auf die andere portieren zu können, ist Einiges an Vorausschau und Planung nötig. In vielen Fällen bedeutet das praktisch, dass Sie den Code für jeden Browser extra anpassen müssen.

Die Verwendung der DHTML-Funktionen von UltraDev enthebt uns dieser Notwendigkeit, denn das Programm erzeugt Code, der von beiden Plattformen fehlerfrei verstanden wird. Wenn Sie HTML-Objekten auf einer Seite dynamische Verhaltensweisen zuweisen, können Sie darüber hinaus spezifizieren, welche Browsergeneration unterstützt werden soll. Je nach Zielpublikum, das Sie anvisieren, haben Sie verschiedene Optionen zur Auswahl. Sollten Sie es drauf anlegen und Ihre Seiten ausschließlich für den IE 5.0 optimieren, steht Ihnen eine lange Liste von dynamischen Effekten zur Auswahl.

Soll ich nun DHTML verwenden oder nicht?

Wenn Sie DHTML-Effekte einsetzen, haben Sie zwar sicher die Bewunderer auf Ihrer Seite, doch Sie laufen Gefahr, dass Sie den Kreis Ihrer Adressaten unter Umständen erheblich einschränken. Wenn der Anwender nicht mindestens einen 4.0-Browser benutzt und JavaScript aktiviert hat, kann er sich DHTML-Websites schlichtweg nicht ansehen. Meiner Meinung nach wird der Einsatz von DHTML auf manchen Sites übertrieben, sodass sie oft schlecht navigierbar sind und auch dem Auge viel zumuten. Ich finde, der Einsatz von DHTML sollte die Botschaft, die Information einer Seite unterstützen und nicht zum Selbstzweck werden. Wenn Sie den Anwender durch die Anwendung von DHTML-Effekten nicht optisch erschlagen, spricht nichts gegen deren Einsatz. Effekte aber nur um ihrer selbst willen zu verwenden, einfach nur, weil sie machbar sind, ist in meinen Augen keine gute Gestaltungsphilosophie.

Es gibt viele Möglichkeiten, auf einer Webseite Animationen einzubauen - GIFs, Flash, Shockwave, Java, QuickTime usw. Diese verschiedenen Typen von Animationen werden in das HTML-Dokument eingebettet und benötigen ein Browser-Plug-In (außer GIFs), um angezeigt werden zu können. Anders bei DHTML-basierten Animationen: Sie sind Teil des HTML-Codes und brauchen zu ihrer Anzeige nur den Browser selbst.

Nun können aber mit DHTML nicht alle Effekte erzeugt werden, die mit anderen Animationstechniken möglich sind. Heute werden viele Browser zusammen mit dem Flash-Plug-In installiert, sodass sich für die Erstellung komplexerer Animationen die Verwendung von Flash empfiehlt.

4.2 Clientseitige Verhaltensweisen

Heute lernen wir ein neues Werkzeug kennen: die Verhaltenspalette. Wenn im Folgenden von Verhaltensweisen gesprochen wird, sind damit immer clientseitige Verhaltensweisen gemeint. Mit dieser Palette weisen sie Objekten eine Verhaltensweise zu - das heißt, Sie legen fest, wie ein Objekt auf bestimmte Ereignisse von Seiten des Anwenders, z.B. einen Mausklick, reagieren soll.

Die Funktionsweise dieses Werkzeugs wird am besten anhand eines praktischen Beispiels deutlich. Dazu brauchen wir auf unserer Seite zunächst ein JavaScript-Element. Das bekommen wir, wenn wir einen einfachen Rollover-Button auf unsere Seite setzen. Im nächsten Schritt öffnen Sie mit Fenster > Verhalten die Verhaltenspalette.

Die Verhaltenspalette

Der Inspector sollte zwei JavaScript-Aktionen anzeigen: onMouseOver und onMouseOut. Wenn alles glatt gegangen ist, sehen Sie auf Ihrem Monitor das in Abb. 4.1 gezeigte Fenster.

Die Verhaltenspalette zeigt eine Liste der aktuell einem Objekt zugewiesenen Ereignisse und der damit verbundenen Aktionen. Im Fall unseres Rollover-Bildes handelt es sich um ein onMouseOver-Ereignis, das die Aktion Bild austauschen auslöst. Umgekehrt wird durch das onMouseOut-Ereignis die Aktion Bildaustausch wiederherstellen ausgeführt. Das Zusammenspiel dieser beiden Ereignisse bewirkt, dass ein Bild ausgetauscht wird, wenn wir den Mauszeiger darauf setzen, und der ursprüngliche Zustand wiederhergestellt wird, wenn sich die Maus außerhalb der Bildfläche befindet.

Abbildung 4.1:  Verhaltensweisen sind JavaScript-basierte Aktionen.

Verhaltensweisen erstellen

In der Verhaltenspalette gibt es ein Popup-Menü Ereignisse zeigen für. Wenn Sie es anklicken, wird eine Liste der verschiedenen Browser angezeigt, aus der Sie die gewünschte Zielplattform auswählen. Diese Einstellung sollten Sie vornehmen, bevor Sie ein Ereignis zuweisen, denn je nach gewähltem Browser ist die Liste der angebotenen Ereignisse kürzer oder länger bzw. nur für diese Plattform erhältlich. Die Auswahlliste selbst bedarf wohl keiner Erklärung, ich möchte Ihnen aber empfehlen, die Einstellung Browser ab 3.0 zu verwenden, um größtmögliche Kompatibilität zwischen den Plattformen zu erzielen. Die Einstellung Browser ab 4.0 bietet sich an, wenn es um größtmögliche Kompatibilität und Zukunftssicherheit geht. In den folgenden Beispielen arbeiten wir immer mit der Einstellung Browser ab 4.0.

Eine Aktion zuweisen

Eine Aktion zuzuweisen ist recht einfach - Sie müssen lediglich das betreffende Objekt auswählen und dann zur Verhaltenspalette gehen. Klicken Sie dort auf das Plussymbol (+) und wählen Sie aus dem geöffneten Popup-Menü (siehe Abb. 4.2) die gewünschte Aktion aus.

Abbildung 4.2:  Aktionen warten auf ihren Einsatz.

Bei manchen Aktionen ist es offensichtlich, was sie tun, andere bedürfen der Erklärung. In Tabelle 4.1 finden Sie eine Liste sämtlicher Aktionen samt Beschreibung.

JavaScript-Funktion

Beschreibung

Audio abspielen

Spielt Sounddateien auf dem System des Anwenders ab.

Bild austauschen

Ersetzt ein Bild durch ein anderes. Wird benutzt, um Rollover-Effekte von Hand zu erstellen.

Bildaustausch wiederherstellen

Setzt für das vertauschte Bild wieder die ursprüngliche Grafik ein.

Bilder vorausladen

Lädt Bilder in den Cache, sodass sie im Bedarfsfall ohne weitere Ladezeit ausgetauscht werden können. UltraDev lädt Bilder für Rollover per Default im Voraus.

Browser überprüfen

Leitet den Browser je nach Typ (NN oder IE) bzw. Version zu entsprechend optimierten Seiten.

Browser-Fenster öffnen

Öffnet URL in neuem Browser-Fenster.

Ebene ziehen

Ermöglicht dem Anwender, eine Ebene im Browser-Fenster frei zu verschieben.

Ebenen ein-/ausblenden

Blendet Ebenen ein oder aus bzw. stellt die Standardsichtbarkeit wieder her.

Eigenschaft ändern

Ändert Eigenschaften eines Objekts. Nützlich zur Anpassung von Ebeneneigenschaften usw.

Formular überprüfen

Überprüft, ob Formularfelder, die Daten enthalten müssen, vom Anwender auch ausgefüllt worden sind, bevor es zum Server zur Bearbeitung übertragen wird.

Gehe zu URL

Leitet den Browser zu neuer URL um.

JavaScript aufrufen

Ruft eine selbst geschriebene JavaScript-Funktion auf.

Navigationsleistenbild
festlegen

Tauscht Bilder in der aktuellen Navigationsleiste aus.

Plug-In überprüfen

Prüft, ob das entsprechende Plug-In installiert ist und leitet den Anwender zur richtigen URL.

Popup-Meldung

Blendet ein Fenster mit einer frei definierten Warnmeldung ein.

Shockwave oder Flash-Film steuern

Steuert die Wiedergabe von Shockwave oder Flash-Filmen.

Sprungmenü

Ändert die Attribute eines Sprungmenüs.

Sprungmenü Gehe zu

Fügt dem Sprungmenü eine Gehe zu-Schaltfläche hinzu. Das entsprechende JavaScript-Element finden Sie in der Unterpalette Formulare der Werkzeugpalette.

Text definieren: Ebenetext festlegen

Ersetzt Inhalt und Formatierung einer vorhandenen Ebene.

Text definieren: Statusleistentext festlegen

Definiert Text zur Anzeige in der Statusleiste des Browsers.

Text definieren: Text von Textfeld einstellen

Ersetzt den Inhalt eines Textfeldes in einem Formular.

Text definieren: Text von Frame einstellen

Stellt Text eines Frames dynamisch ein.

Zeitleiste: Gehe zu Zeitleistenbild

Bewegt den Wiedergabekopf zu einem beistimmten Bild in der Zeitleiste.

Zeitleiste: Zeitleiste
abspielen bzw. Zeitleiste anhalten

Definiert, welche Aktion zu einem bestimmten Zeitpunkt ausgeführt werden soll. Über diese Funktion können Sie gezielt Punkte in der Zeitleiste anspringen und den zeitlichen Ablauf von Ereignissen steuern.

Tabelle 4.1: JavaScript-Funktionen und ihr Verwendungszweck  

Die meisten dieser Aktionen erfordern, dass das Objekt, auf das sie zugreifen, durch einen eindeutigen Namen identifizierbar ist, d.h., das Attribut name muss gesetzt sein. Falls Sie bisher Objekten keinen Namen zugewiesen haben, müssen Sie das nachholen, wenn Sie mit Verhaltensweisen arbeiten wollen. Wählen Sie hierzu das Objekt aus, und öffnen Sie den Eigenschafteninspektor. In der linken oberen Ecke der Palette befindet sich ein Eingabefeld, in das Sie den Namen des Objektes einsetzen.

Als JavaScript-Programmierer werden Sie vielleicht das Menü mit den Aktionen durchsehen und einwenden, dass es sich hier um keine eigentlichen JavaScript- Funktionen handelt. Der Einwand ist nicht unberechtigt. Bei der Verhaltensweisen- Bibliothek handelt sich um eine Sammlung fertig programmierter Verhaltensweisen, deren Ziel es ist, in allen Browsern und auf verschiedenen Plattformen zu funktionieren. Über die letzte Option im Popup-Menü Weitere Verhalten werden Sie mit der Website von Macromedia verbunden, von wo Sie zusätzliche Verhaltensweisen herunterladen können. Die Einbindung neuer Verhaltensweisen sowie die Erweiterung von UltraDev ist Stoff unserer morgigen Lektion.

Ereignisse zuweisen

Nachdem Sie in der Verhaltenspalette einem Objekt eine Aktion zugewiesen haben, müssen Sie noch definieren, durch welches Ereignis, d.h. durch welche Maus- bzw. Tastatureingaben des Anwenders, diese Aktion ausgelöst wird. Im Falle des Rollover-Bildes waren die auslösenden Ereignisse onMouseOver bzw. onMouseOut. Bestimmte Ereignisse sind nur in Verbindung mit bestimmten Objekten möglich, und je nach den Einstellungen, die Sie im Eingabefeld Ereignisse zeigen für der Verhaltenspalette getroffen haben, sind Sie entweder auf ein paar wenige Ereignisse beschränkt oder haben die ganze Batterie von IE-spezifischen Ereignissen zu Ihrer Verfügung.

Das auslösende Ereignis definieren Sie, indem Sie zunächst die betreffende Verhaltensweise auswählen und dann im Feld Ereignisse auf den kleinen, nach unten gerichteten Pfeil klicken, der rechts neben dem ausgewählten Ereignis angezeigt wird. Es öffnet sich das in Abb. 4.3 gezeigte Popup-Menü mit den möglichen Ereignissen.

Abbildung 4.3:  Aktionen ein auslösendes Ereignis zuweisen

Vielleicht haben Sie schon bemerkt, dass in manchen Fällen das Ereignis zwischen Klammern steht. Das bedeutet, dass dieses Ereignis in Verbindung mit dem ausgewählten Objekt nicht funktioniert, sondern nur in Verbindung mit einem zweiten Objekt, das das gewünschte Ereignis unterstützt. Das <IMG>-Objekt z.B. unterstützt eigentlich kein onMouseOver-Ereignis, es unterstützt nebenbei bemerkt fast überhaupt keine Ereignisse. Damit Grafiken überhaupt für Aktionen des Mauszeigers sensibel werden, legt UltraDev ein Anchor-Tag um das Bild (<A HREF><IMG></A>). Über diesen Umweg unterstützt die Grafik die gewünschte Funktion, und wir müssen uns nicht den Kopf zermartern, um uns wieder daran zu erinnern, welches Objekt welche Ereignisse unterstützt.

Mehr darüber, welcher Browser welche Ereignisse unterstützt, erfahren Sie auf den Websites der Hersteller.

Es folgt eine Übersicht der wichtigsten Ereignisse für 4.0-Browser und höher:

Da die meisten JavaScript-Aktionen von Maus-Ereignissen ausgelöst werden, steht gewöhnlich auch deren Verwendung im Mittelpunkt des Interesses.

Verhaltensweisen bearbeiten

Wenn Sie Objekten Aktionen zuweisen, die von bestimmten Ereignissen ausgelöst werden, können Sie die Auf- bzw. Ab-Pfeile in der Verhaltenspalette dazu verwenden, die Reihenfolge der Aktionen neu zu ordnen. Die Ereignisse werden von oben nach unten abgearbeitet.

Sie können über das Popup-Menü jederzeit neue Ereignisse als Auslöser für Aktionen zuweisen. Wenn Sie auf eine Aktion doppelklicken, öffnet sich ein Dialogfenster, über das Sie die Aktion selbst editieren können. Um eine Verhaltensweise zu löschen, müssen Sie nichts weiter tun als auf das Minussymbol (-) der Palette zu klicken.

Per Verhaltensweise Text in der Statuszeile ausgeben

Für unsere erste clientseitige Verhaltensweise nehmen wir eine einfache Aktion - wir weisen einem Rollover-Bild eine Verhaltensweise zu, die in der Statuszeile einen erklärenden Text zu diesem Bild bzw. Link ausgibt. Das ist eine ganz praktikable Methode, dem Anwender Feed-back zu geben, ohne dass man gleich Änderungen am HTML- Dokument vornehmen oder ein neues Browserfenster öffnen muss.

Hoffentlich haben Sie die Datei gespeichert, in die wir einen Rollover-Bild eingesetzt haben. Wenn ja, dann öffnen Sie sie bitte jetzt, wenn nicht, müssen Sie einen neuen Rollover-Effekt erzeugen. Nun brauchen wir die Verhaltenspalette. Wie bereits gesagt, sind für Rollover-Effekte zwei Verhaltensweisen vordefiniert, die auf onMouseOver- bzw. onMouseOut-Ereignissen basieren. Um Text in der Statuszeile auszugeben, brauchen wir eine dritte Verhaltensweise.

Aktion Statusleistentext festlegen

Klicken Sie in der Verhaltenspalette auf das Plussymbol (+), und wählen Sie aus dem Popup-Menü die Aktion Text definieren > Statusleistentext festlegen. Es öffnet sich das in Abb. 4.4 gezeigte Dialogfenster, in das Sie den Text eingeben, der in der Statusleiste angezeigt werden soll.

Abbildung 4.4:  Textmeldungen in der Statuszeile ausgeben lassen

Wenn Sie vielleicht schon ein bisschen mit den Verhaltensweisen experimentiert haben, wissen Sie bereits, dass zu den meisten Aktionen Dialogfenster angezeigt werden, um den Ablauf der Aktion zu konfigurieren. Die Einstellungen des Fensters Statusleistentext festlegen gehören zu den einfachsten, die man vornehmen muss.

Ereignis onMouseOver hinzufügen

Wenn Sie einem Objekt eine Aktion zuweisen, wird als auslösendes Ereignis standardmäßig onMouseOver gesetzt. Falls das sowieso Ihre Absicht war, brauchen Sie an der Einstellung nichts mehr zu verändern. Wenn Sie nun mit der Maus über die Grafik fahren, wird die Aktion Statusleistentext festlegen ausgeführt, und der Text, den Sie in der entsprechenden Dialogbox eingetippt haben, wird in der Statuszeile des Browsers ausgegeben. Sie könnten natürlich als auslösendes Ereignis auch onClick oder eines der anderen vordefinierten Ereignisse setzen. Wenn Sie alle Verhaltensweisen wie vorstehend definiert haben, müsste Ihre Verhaltenspalette so aussehen wie in Abb. 4.5 gezeigt.

Abbildung 4.5:  Dem Rollover-Bild sind nun drei Aktionen zugewiesen worden.

Es macht nichts, dass zwei onMouseOver-Ereignisse gesetzt wurden. Die Reihenfolge der Verhaltensweisen in der Liste bezeichnet die Reihenfolge, in der sie abgearbeitet werden (von oben nach unten). In der in Abb. 4.5 gezeigten Konfiguration werden zuerst die Bilder ausgetauscht und dann der Text der Statuszeile ausgegeben. Das Ganze jedoch geschieht so schnell, dass wir keine Verzögerung bemerken, und die Reihenfolge spielt eigentlich keine Rolle. Wenn Sie aber möchten, dass zuerst der Text der Statuszeile angezeigt wird, markieren Sie dieses Verhalten und verschieben es mit dem Nach-oben- Button an die erste Stelle.

Sie können die Reihenfolge der Ausführung nur bei bestimmten Ereignissen abändern. Sie können z.B. ein onMouseOver-Ereignis im Stapel nicht über ein onMouseOut-Ereignis legen, da es voneinander unabhängige Ereignisse sind. Die Reihenfolge von zwei onMouseOver-Ereignissen können Sie jedoch vertauschen.

Zum Abschluss unserer Bemühungen sollten wir unser Werk im Browser begutachten. Wenn alles gut gegangen ist, wird die Rollover-Grafik angezeigt, wenn Sie den Mauszeiger auf den Button setzen, und die eingestellte Nachricht wird in der Statuszeile angezeigt. So einfach geht das. Als Nächstes wollen wir eine ähnliche Funktionalität mit einer völlig anderen Verhaltensweise erreichen.

Es empfiehlt sich, Verhaltensweisen eines Objekts in verschiedenen Browsern zu testen. Sie werden feststellen, dass die Resultate unterschiedlich ausfallen. Das liegt an den unterschiedlichen JavaScript-»Dialekten«.

Bevor wir uns jedoch zu neuen Ufern wagen, möchten Sie vielleicht noch wissen, wie UltraDev diese und jene Kunststücke vollbringt. Lassen Sie uns daher einen Blick auf den JavaScript-Code werfen, den das Programm erzeugt hat, um den Objekten diese Verhaltensweisen zuzuweisen:

<script language="JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr;
for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v3.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments;
document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x;
if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

Die obigen vier Funktionen werden in jedes HTML-Dokument eingefügt, das Rollover- Bilder verwendet. Die generische Routine MM_findObj ist für jeden JavaScript- Programmierer höchst nützlich. Sie ermöglicht unabhängig von der verwendeten Browserplattform auf Objekte über deren Namen zuzugreifen. Wenn Ihnen das böhmische Dörfer sind, müssen Sie sich deswegen keine grauen Haare wachsen lassen. Die übrigen drei Funktionen, MM_preloadImages, MM_swapImage und MM_swapImgRestore, dienen dazu, die benötigten Bilder auf die Seite zu laden, das aktuelle Bild gegen sein Rollover-Bild zu tauschen und den Ausgangszustand wiederherzustellen.

Die folgende Funktion hat die Aufgabe, Text in der Statuszeile auszugeben:

function MM_displayStatusMsg(msgStr) { //v1.0
status=msgStr;
document.MM_returnValue = true;
}
//-->
</script>

Im <body>-Bereich des HTML-Codes finden wir die auslösenden JavaScript-Ereignisse. Durch das onMouseOver-Ereignis werden der Austausch der Grafiken und die Anzeige in der Statuszeile veranlasst, während durch das onMouseOut-Ereignis wieder das Ausgangsbild geladen wird.

<body bgcolor="#FFFFFF" onLoad="MM_preloadImages('but_koll.gif')">
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','but_koll.gif',1);
MM_displayStatusMsg('Informationen &uuml;ber das Institut');
return document.MM_returnValue"><img name="Image1" border="0" src="but_inst.gif" width="165" height="31"></a>
</body>

Mit jeder neuen Verhaltensweise wird dem Dokument auch neuer JavaScript-Code hinzugefügt. Auch wenn Sie selbst kein JavaScript-Programmierer sind, sollten Sie anhand der Namen der Funktionen erkennen, welche Routine zu welchem Verhalten gehört.

Benutzerhilfen einblenden

Erklärenden Test in der Statuszeile einzublenden ist durchaus ein gangbarer Weg, um dem Benutzer Feed-back zu geben, doch von einem echten Blickfänger kann man in diesem Zusammenhang nicht gerade sprechen. Die Information sollte schon ein bisschen besser ins Auge fallen. Sie kennen sicher alle die Tooltipps, die aus keiner neuen Software mehr wegzudenken sind. Wäre es nicht toll, wenn Sie mit etwas JavaScript auf Ihrer Website eine ähnliche Funktionalität anbieten könnten? (Natürlich wäre das toll!)

Tooltipps einrichten

Bevor Sie einen Tooltipp einrichten können, müssen Sie ein Objekt haben, zu dem dieser Tooltipp eingeblendet wird. Ich habe ein altgedientes Rollover-Bild aus meiner Sammlung genommen und es zweimal auf der Seite eingefügt. Welche Art von Objekt Sie verwenden ist egal, solange es onMouseOver-Ereignisse und onMouseOut-Ereignisse unterstützt.

Die Tooltipps selbst werden in Ebenen abgelegt. Da ich zwei Buttons habe, zeichne ich auch zwei Ebenen - je eine pro Tooltipp. Geben Sie Ihren Ebenen eindeutige Namen, die die Zuordnung erleichtern. Wenn Sie auf Ihrer Seite Button1 und Button2 verwenden, dann nennen Sie die Ebenen ebene1 und ebene2. Schreiben Sie nun in diese Ebenen den Text, der beim Rollover angezeigt werden soll. Positionieren Sie die Ebenen an der Stelle, an der sie später eingeblendet werden sollen. Abb. 4.6 zeigt zwei Buttons und den zugehörigen Ebenen.

Wenn Sie die Ebenen mit Text gefüllt und richtig positioniert haben, müssen für jede Ebene im Eigenschafteninspektor die Sichtbarkeit auf hidden stellen. Somit ist sichergestellt, dass der Anwender die Ebenen nicht sieht, wenn er Ihre Seite zum ersten Mal lädt, und nur die Buttons angezeigt bekommt. Im nächsten Schritt werden wir den Ebenen das entsprechende Verhalten zuweisen, sodass sie bei einem Rollover wie Tooltipps zu den jeweiligen Buttons eingeblendet werden.

Abbildung 4.6:  Positionieren Sie die Ebenen dort, wo sie später eingeblendet werden sollen.

Verhaltensweise Ebenen ein-/ausblenden zuweisen

Für jeden Tooltipp, der ein- und wieder ausgeblendet werden soll, müssen Sie der Verhaltensweise des übergeordneten Buttons die Aktion Ebenen ein-/ausblenden zuweisen. Wenn der Anwender mit der Maus den Button überfährt, sollte die entsprechende Ebene eingeblendet werden. Bewegt sich die Maus vom Button weg, sollte die Ebene wieder unsichtbar werden.

Wählen Sie einen Button aus, um ihm ein Verhalten zuzuweisen und öffnen Sie die Verhaltenspalette. Klicken Sie auf das Plussymbol (+) und wählen Sie die Aktion Ebenen ein-/ausblenden aus. Es öffnet sich ein Fenster, das eine Liste aller Ebenen und die verfügbaren Optionen anzeigt (siehe Abb. 4.7).

Abbildung 4.7:  Wählen Sie die Ebene aus, die angezeigt oder verborgen werden soll, und klicken Sie auf die entsprechende Schaltfläche.

Markieren Sie die Ebene, die zu dem Button oder Objekt gehört, das Sie gerade bearbeiten, und klicken Sie auf die Schaltfläche Ausblenden. Markieren Sie in der Verhaltenspalette das neu hinzugefügte Verhalten und ändern Sie das Ereignis auf onMouseOut. Damit stellen Sie sicher, dass die Ebene ausgeblendet wird, wenn der Anwender die Maus vom Button wegbewegt.

Wiederholen Sie diesen Schritt und weisen Sie dem Button eine weitere Aktion Ebenen ein-/ausblenden zu, nur dass Sie diesmal im Fenster Ebenen Ein-/Ausblenden die Option »Einblenden« wählen. Die Verhaltenspalette sollte nun zwei Aktionen Ebenen ein-/ausblenden (einmal einblenden, einmal ausblenden) enthalten, die die Ebene mit den Tooltipps des Buttons kontrollieren. Als auslösendes Ereignis für die Aktion Ebene einblenden setzen Sie onMouseOver. Dadurch wird die Ebene eingeblendet, wenn der Anwender die Maus auf den Button setzt. Wenn Sie sämtliche Verhaltensweisen zugewiesen haben, sollte die Palette so aussehen wie in Abb. 4.8 gezeigt.

Abbildung 4.8:  Das Endergebnis: zwei Buttons, zwei Tooltipps - vier Verhaltensweisen.

Für den zweiten Button wiederholen Sie die gesamte Prozedur, nur dass Sie natürlich die zu diesem Button gehörige Ebene verwenden. Mit geringem Aufwand haben Sie jetzt Ihrer Webseite dynamische Informationen verpasst, die nur angezeigt werden, wenn sie benötigt werden.

Viele Webdesigner erzeugen Tooltipps über das onMouseOver-Ereignis, indem sie Abbildungen gegen Grafiken mit erklärendem Text austauschen lassen. Das ist zwar möglich, ist aber keine so effektive Methode wie die eben verwendete Verhaltensweise Ebenen ein-/ausblenden. Als Grafik abgespeicherter Text braucht wesentlich länger um zu laden, außerdem können Sie diese Grafiken nicht so frei positionieren wie Ebenen. Auch in dem Fall, dass Ihre Tooltipps grafische Elemente enthalten, können Sie Ebenen verwenden, denn Ebenen können alle Arten von Objekten enthalten, auch Grafiken.

Popup-Fenster

Ein weiteres sehr beliebtes Mittel, um dem Anwender zusätzliche Informationen zu geben, sind Popup-Fenster. Das sind eigene Fenster, die über dem Hauptfenster des Browsers geöffnet werden, wenn der Anwender auf den entsprechenden Link klickt. Diese Technik bietet sich vor allem dann an, wenn kurze Informationen eingeblendet werden sollen, die bestimmte Inhalte im Hauptfenster näher erläutern sollen. Sie können natürlich auch ohne den Einsatz von Verhaltensweisen einen Link in einem neuen Fenster öffnen lassen. Hierzu müssen Sie dem Link im Eigenschafteninspektor nur das entsprechende Ziel zuweisen. Diese Methode hat allerdings den Nachteil, dass ein neues Browserfenster mit all seinen Menüs und Werkzeugleisten geöffnet wird. Das sind nicht nur relative schwere Geschütze, um wenig zusätzliche Information einzublenden, sondern auch das Hauptfenster wird verdeckt, was den Anwender irritieren kann.

Verhaltensweise Browserfenster öffnen

Im Arsenal der Verhaltensweisen von UltraDev findet sich auch eine Aktion, die das Öffnen von neuen Browserfenstern mit oder ohne die üblichen grafischen Steuerelemente ermöglicht. Zur Realisierung dieses Beispiels verwende ich diesmal ein einfaches Bild. Ziel dieser Übung ist es, den Mausklick des Anwenders abzufangen und daraufhin ein neues Fenster zu öffnen.

Im Beispiel mit den Tooltipps war der Text für die eingeblendete Information im gleichen HTML-Dokument gespeichert wie die aufrufende Verhaltensweise. Die Verhaltensweise Browserfenster öffnen zeigt jedoch auf die URL einer externen Datei, in der die entsprechenden Information liegen, und öffnet sie in einem neuen Fenster. Sie müssen also vorher ein neues Dokument anlegen. Ich habe zu diesem Zweck eine Datei namens help.html erzeugt.

Sobald Sie diese Datei erstellt haben, markieren Sie das Objekt, dem Sie das Verhalten zuweisen wollen und öffnen die Verhaltenspalette. Wählen Sie im Popup-Menü die Aktion Browserfenster öffnen. Es öffnet sich das in Abb. 4.9 gezeigte Dialogfenster, in dem Sie weitere Einstellungen vornehmen.

Abbildung 4.9:  Optionen für das neue Browserfenster festlegen

Durchsuchen Sie die Site nach der URL, die im neuen Fenster angezeigt werden soll, oder geben Sie sie direkt ein. Wenn Sie dem Fenster eine feste Höhe oder Breite zuweisen wollen, geben Sie die Werte in die entsprechenden Felder ein. Wenn das neue Fenster zusätzliche Informationen zur Hauptseite anzeigen soll, sollten Sie es nicht größer machen als die Hauptseite, sodass es der Anwender im Bedarfsfall verschieben kann, ohne das Hauptfenster zu verdecken. Mit den Kontrollfeldern setzen Sie die Attribute, mit denen das Popup-Fenster dargestellt werden soll.

Stellen Sie keine festen Fenstergrößen ein, auch wenn Sie mit vorgegebenen Auflösungen arbeiten. Das letzte Wort darüber, wie er seinen Browser konfiguriert, hat immer der Anwender. Wenn Sie Ihr Layout noch so präzise angelegt haben, kann der Anwender mit seinen Einstellungen Ihre sämtlichen Vorgaben überschreiben. Wenn Sie dem Anwender feste Auflösungen aufzwingen, wird es immer jemanden geben, dem Ihre Inhalte nicht zugänglich sind aus dem einfachen Grund, weil sie außerhalb des Anzeigebereichs liegen.

Zu guter Letzt möchten Sie dem Kind vielleicht noch einen Namen geben. Wenn Sie das Fenster benennen, können Sie dieses Fenster als Ziel für andere Links angeben. Schließt der Anwender dieses Fenster jedoch, verliert der Browser dieses Ziel, und alle Links, die auf dieses Fenster zielen, werden in ganz normalen neuen Browserfenstern geöffnet.

Damit haben wir alle nötigen Schritte durchgeführt. Bleibt uns nur noch, unser Popup- Fenster in Aktion zu bewundern. Rufen Sie die Browservorschau auf und klicken Sie auf das Objekt, dem Sie das Verhalten zugewiesen haben. Die Früchte meiner Arbeit sehen Sie in Abb. 4.10.

Abbildung 4.10:  Hiermit stehen die berüchtigten Popup-Fenster auch zu Ihrer Verfügung.

Sie kennen sicher genügend Websites, die sofort ein Popup-Fenster öffnen, wenn man auf die Homepage geht. Manchmal ist das ganz nützlich, manchmal nervt es auch bloß. Wollen Sie auf Ihrer Website dieses Feature einbauen, müssen Sie die Aktion Browserfenster öffnen dem onLoad-Ereignis im <BODY>-Tag zuweisen. Auch wenn diese Funktion wie gesagt in manchem Fällen ganz nützlich ist, sollten Sie sie nicht in jeder Ihrer Seiten einbauen - Hunderte von kleinen Browserfenstern verderben schnell den Spaß am Surfen.

Drag-and-Drop auf meiner Website?

Ja, das geht. Allein mit den Bordmitteln von UltraDev ist es möglich, auf einer Website volle Drag-and-Drop-Funktionalität zu realisieren. Mit dem folgenden Beispiel schließen wir unsere Erkundung der Verhaltenspalette ab und lernen ein paar der interessanteren Aktionen von UltraDev kennen.

Wie Sie gesehen haben, können Ebenen pixelgenau positioniert und ihre Attribute per JavaScript verändert werden. Es erhebt sich die Frage, ob man nicht Verhaltensweisen schreiben könnte, die eine Ebene im Fenster verschieben.

Zwar lassen sich auf diesem Weg keine hochkomplexen Anwendungen realisieren, aber für einfachere Lernprogramme, die dem Anwender Rückmeldung geben, reicht es allemal. Im Folgenden bauen wir mit der Funktion Ebene ziehen ein kleines Geschichtsquiz zusammen. Zu diesem Zweck habe ich die in Abb. 4.11 gezeigten Grafiken vorbereitet, denen wir dann das entsprechende Verhalten zuweisen.

Abbildung 4.11:  Mithilfe dieser Grafiken erstellen wir eine einfache Quizanwendung.

Ziel der folgenden Übung ist es, eine Anwendung zu erstellen, bei der die drei gezeigten Grafiken an die richtige Stelle in der Tafel oben verschoben werden müssen. Um die Elemente auf der Seite zu positionieren, habe ich Ebenen verwendet. Elemente, die verschoben werden sollen, können sowieso nur in Ebenen abgelegt werden. Der statische Teil, die »Tafel«, wurde ebenfalls mit Ebenen erzeugt. Dies wäre zwar nicht nötig, aber mit Ebenen geht es einfacher. Wenn Sie meine Anwendung nachbauen, sollte das fertige Dokument so aussehen wie in Abb. 4.12 gezeigt.

Abbildung 4.12:  Das Dokument besteht aus vier Ebenen, die obere enthält das Ablageziel.

Verhalten Ebene ziehen zuweisen

Die Grafiken sind platziert, nun müssen wir ihnen das Verhalten Ebene ziehen zuweisen. Jede Ebene muss einzeln eingerichtet werden, aber wenn Sie einmal alle Schritte durchgespielt haben, dürfte es keine Schwierigkeiten mehr geben.

Sie können zwar bewegliche Ebenen im Dokument platzieren, doch wie alle Verhaltensweisen braucht auch diese ein auslösendes Ereignis. Wenn Sie möchten, dass die Ebenen verschiebbar sind, sobald die Seite geladen ist, setzen ein onLoad-Ereignis im <BODY>-Tag.

Bevor Sie ein Verhalten zuweisen, sollten Sie die Ebenen, die Sie bearbeiten, an die Endposition ziehen (sofern es eine gibt), die als Ablageziel dient. Das wird später ganz praktisch sein, weil Sie die Ebenen dann von hier aus an die Startposition ziehen können, wenn Sie die Ziehbewegung definieren.

Setzen Sie nun das angesprochene onLoad-Ereignis im <BODY>-Tag des Dokuments, um ihm das Verhalten Ebene ziehen zuzuweisen. Es öffnet sich das in Abb. 4.13 gezeigte Dialogfenster.

Abbildung 4.13:  Definieren Sie die Ziehbewegung und das Ablageziel der Ebene.

Wählen Sie als Erstes im Popup-Menü die Ebene aus, die bewegt werden soll. Definieren Sie nun die Art der Bewegung, die die Ebene auf der Seite ausführen kann.

Den Bewegungsmodus von Ebenen einstellen

Wenn der Anwender Ebenen frei im Browserfenster verschieben können soll, lassen Sie die standardmäßige Voreinstellung im Eingabefeld Bewegung auf Unbeschränkt. Wenn Sie jedoch möchten, dass der Anwender die Ebene nur innerhalb eines vorgegebenen Bereichs nach links, rechts, oben oder unten verschieben kann, wählen Sie die Option Beschränkt.

In dieser Einstellung werden rechts neben dem Eingabefeld vier weitere Felder sichtbar. In diese Felder geben Sie ein, um wie viele Pixel die Ebene nach oben (O:), unten (U:), links (L:) und rechts (R:) ausgehend von ihrer Ursprungsposition verschoben werden kann. Das Eingabefeld akzeptiert nur positive Werte. Wenn ich nun z.B. möchte, dass der Anwender die Ebene nur nach oben oder unten verschieben kann, aber nicht nach links oder rechts, setze ich die Werte für L und R auf »0« und schränke damit die Bewegungsrichtung auf die Vertikale ein.

Ablageziele von Ebenen festlegen

Sie können Ebenen auch ein Ablageziel zuweisen. Weiter oben habe ich schon angedeutet, dass es sich empfiehlt, verschiebbare Ebenen an der Stelle zu positionieren, wo sie schließlich abgelegt werden sollen, bevor Sie ihnen ein Verhalten zuweisen. So können Sie nämlich über die Schaltfläche Aktuelle Pos. abrufen die exakten Koordinaten für das Ablageziel abrufen. Als Letztes können Sie im Feld Einrasten, falls innerhalb den Radius festlegen, innerhalb welchem die abgelegte Ebene am Ziel »einschnappt«, wenn die Ebene nicht exakt am Ablageziel platziert wird.

Als guter Wert für die Einrastfunktion hat sich die halbe Breite des verschiebbaren Objekts erwiesen. Damit ist sichergestellt, dass das Objekt einschnappt, wenn es nur zur Hälfte auf dem Ablageziel liegt.

Erweiterte Einstellungen

Die erweiterten Einstellungen der Aktion Ebene ziehen erhöhen das Maß an Interaktivität dieses Verhaltens. Standardmäßig gilt die gesamte Ebene als Anfasser, mit dem sie verschoben werden kann - der Anwender klickt das Objekt an irgendeiner Stelle an und verschiebt es über den Bildschirm. Für bestimmte Anwendungen ist es jedoch sinnvoller, Abbildungen mit einem als solchen erkennbaren Anfasser zu versehen. Wenn Sie z.B. eine Anwendung mit verschiebbaren Fenstern erstellen, könnten Sie am oberen Rand des Fensters eine Titelleiste anbringen, die als Anfasser dient. Zu diesem Zweck wählen Sie im Eingabefeld Ziehgriff die Option Bereich in Ebene. In dieser Einstellung werden vier zusätzliche Eingabefelder angezeigt. Die Koordinaten des Anfassers sowie seine Größe definieren Sie über den Abstand vom linken (L:) und oberen (T:) Rand der Ebene sowie über die Breite (B:) und Höhe (H:). Abb. 4.14 zeigt das Dialogfenster Ebene ziehen im Register Erweitert.

Abbildung 4.14:  Die erweiterten Einstellungen ermöglichen die Definition eines Anfassers sowie die Verknüpfung mit weiteren JavaScript-Funktionen.

Die Einstellungsoptionen neben Beim Ziehen steuern, wie die Ebene beim Ziehen behandelt wird. In der Standardeinstellung wird die gezogene Ebene in den Vordergrund gebracht und an oberster Stelle über allen anderen Ebenen abgelegt. Mit der Option Z-Index wiederherstellen wird die Ebene wieder in ihre ursprüngliche Position im Stapel zurückgebracht. Wenn während der Ziehaktion zusätzlicher JavaScript-Code ausgeführt werden soll, dann geben Sie das im Feld JavaScript aufrufen ein.

Über das Eingabefeld Wenn abgelegt: JavaScript aufrufen steuern Sie, ob und welche JavaScripts ausgeführt werden sollen, sobald der Anwender das gezogene Objekt abgelegt hat. Aktivieren Sie zusätzlich das Kontrollfeld Nur wenn eingerastet, wird dieses JavaScript nur ausgeführt, wenn das Objekt am Ablageziel eingerastet ist. In diesem Beispiel lasse ich ein Alert-Fenster aufrufen.

Mithilfe der Option Nur wenn eingerastet können Sie überprüfen, ob der Anwender das Objekt korrekt abgelegt hat, da das JavaScript nur ausgeführt wird, wenn das Objekt am Ablageziel eingerastet ist.

Wenn Sie alle Einstellungen vorgenommen haben, müssen Sie nur noch auf OK klicken. Vergessen Sie aber nicht, die Ebene an ihren Ausgangspunkt zu verschieben.

Wenn alles glatt gelaufen ist, sollten Sie jetzt die Früchte Ihrer Arbeit in der Browservorschau genießen können. Um den übrigen Ebenen dieselbe Funktionalität zuzuweisen, müssen Sie nur die entsprechenden Arbeitsschritte wiederholen und jeder Ebene einen eindeutigen Namen zuweisen sowie das jeweilige Ablageziel. Nicht um Sie zu erschrecken, sondern um Ihnen einen Eindruck davon zu vermitteln, wie viel Arbeit Ihnen UltraDev abgenommen hat, sei im Folgenden der komplette JavaScript-Code der Funktion MM-dragLayer abgedruckt, der das Ziehen von Ebenen ermöglicht:

function MM_dragLayer(objName,x,hL,hT,hW,hH,toFront,dropBack,cU,cD,cL,
cR,targL,targT,tol,dropJS,et,dragJS) { //v3.0
//Copyright 1998 Macromedia, Inc. All rights reserved.
var i,j,aLayer,retVal,curDrag=null,
NS=(navigator.appName=='Netscape'), curLeft, curTop;
if (!document.all && !document.layers) return false;
retVal = true; if(!NS && event) event.returnValue = true;
if (MM_dragLayer.arguments.length > 1) {
curDrag = MM_findObj(objName); if (!curDrag) return false;
if (!document.allLayers) { document.allLayers = new Array();
with (document) if (NS) {
for (i=0; i<layers.length; i++) allLayers[i]=layers[i];
for (i=0; i<allLayers.length; i++)
if (allLayers[i].document && allLayers[i].document.layers)
with (allLayers[i].document) for (j=0; j<layers.length; j++) allLayers[allLayers.length]=layers[j];
} else for (i=0;i<all.length;i++)
if (all[i].style&&all[i].style.position)
allLayers[allLayers.length]=all[i];}
curDrag.MM_dragOk=true; curDrag.MM_targL=targL; curDrag.MM_targT=targT;
curDrag.MM_tol=Math.pow(tol,2); curDrag.MM_hLeft=hL; curDrag.MM_hTop=hT;
curDrag.MM_hWidth=hW; curDrag.MM_hHeight=hH; curDrag.MM_toFront=toFront;
curDrag.MM_dropBack=dropBack; curDrag.MM_dropJS=dropJS;
curDrag.MM_everyTime=et; curDrag.MM_dragJS=dragJS;
curDrag.MM_oldZ = (NS)?curDrag.zIndex:curDrag.style.zIndex;
curLeft= (NS)?curDrag.left:curDrag.style.pixelLeft;
curDrag.MM_startL = curLeft;
curTop = (NS)?curDrag.top:curDrag.style.pixelTop;
curDrag.MM_startT = curTop;
curDrag.MM_bL=(cL<0)?null:curLeft-cL;
curDrag.MM_bT=(cU<0)?null:curTop -cU;
curDrag.MM_bR=(cR<0)?null:curLeft+cR;
curDrag.MM_bB=(cD<0)?null:curTop +cD;
curDrag.MM_LEFTRIGHT=0; curDrag.MM_UPDOWN=0;
curDrag.MM_SNAPPED=false; //use in your JS!
document.onmousedown = MM_dragLayer; document.onmouseup = MM_dragLayer;
if (NS) document.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
} else {
var theEvent = ((NS)?objName.type:event.type);
if (theEvent == 'mousedown') {
var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft;
var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop;
var maxDragZ=null; document.MM_maxZ = 0;
for (i=0; i<document.allLayers.length; i++) { aLayer = document.allLayers[i];
var aLayerZ = (NS)?aLayer.zIndex:aLayer.style.zIndex;
if (aLayerZ > document.MM_maxZ) document.MM_maxZ = aLayerZ;
var isVisible = (((NS)?aLayer.visibility:aLayer.style.visibility).indexOf('hid') == -1);
if (aLayer.MM_dragOk != null && isVisible) with (aLayer) {
var parentL=0; var parentT=0;
if (!NS) { parentLayer = aLayer.parentElement;
while (parentLayer != null && parentLayer.style.position) {
parentL += parentLayer.offsetLeft; parentT += parentLayer.offsetTop;
parentLayer = parentLayer.parentElement; } }
var tmpX=mouseX-(((NS)?pageX:style.pixelLeft+parentL)+MM_hLeft);
var tmpY=mouseY-(((NS)?pageY:style.pixelTop +parentT)+MM_hTop);
var tmpW = MM_hWidth; if (tmpW <= 0) tmpW += ((NS)?clip.width :offsetWidth);
var tmpH = MM_hHeight; if (tmpH <= 0) tmpH += ((NS)?clip.height:offsetHeight);
if ((0 <= tmpX && tmpX < tmpW && 0 <= tmpY && tmpY < tmpH) && (maxDragZ == null
|| maxDragZ <= aLayerZ)) { curDrag = aLayer; maxDragZ = aLayerZ; } } }
if (curDrag) {
document.onmousemove = MM_dragLayer; if (NS) document.captureEvents(Event.MOUSEMOVE);
curLeft = (NS)?curDrag.left:curDrag.style.pixelLeft;
curTop = (NS)?curDrag.top:curDrag.style.pixelTop;
MM_oldX = mouseX - curLeft; MM_oldY = mouseY - curTop;
document.MM_curDrag = curDrag; curDrag.MM_SNAPPED=false;
if(curDrag.MM_toFront) {
eval('curDrag.'+((NS)?'':'style.')+'zIndex=document.MM_maxZ+1');
if (!curDrag.MM_dropBack) document.MM_maxZ++; }
retVal = false; if(!NS) event.returnValue = false;
} } else if (theEvent == 'mousemove') {
if (document.MM_curDrag) with (document.MM_curDrag) {
var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft;
var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop;
newLeft = mouseX-MM_oldX; newTop = mouseY-MM_oldY;
if (MM_bL!=null) newLeft = Math.max(newLeft,MM_bL);
if (MM_bR!=null) newLeft = Math.min(newLeft,MM_bR);
if (MM_bT!=null) newTop = Math.max(newTop ,MM_bT);
if (MM_bB!=null) newTop = Math.min(newTop ,MM_bB);
MM_LEFTRIGHT = newLeft-MM_startL; MM_UPDOWN = newTop-MM_startT;
if (NS) {left = newLeft; top = newTop;}
else {style.pixelLeft = newLeft; style.pixelTop = newTop;}
if (MM_dragJS) eval(MM_dragJS);
retVal = false; if(!NS) event.returnValue = false;
} } else if (theEvent == 'mouseup') {
document.onmousemove = null;
if (NS) document.releaseEvents(Event.MOUSEMOVE);
if (NS) document.captureEvents(Event.MOUSEDOWN); //for mac NS
if (document.MM_curDrag) with (document.MM_curDrag) {
if (typeof MM_targL =='number' && typeof MM_targT == 'number' &&
(Math.pow(MM_targL-((NS)?left:style.pixelLeft),2)+
Math.pow(MM_targT-((NS)?top:style.pixelTop),2))<=MM_tol) {
if (NS) {left = MM_targL; top = MM_targT;}
else {style.pixelLeft = MM_targL; style.pixelTop = MM_targT;}
MM_SNAPPED = true; MM_LEFTRIGHT = MM_startL-MM_targL; MM_UPDOWN = MM_startT-MM_targT; }
if (MM_everyTime || MM_SNAPPED) eval(MM_dropJS);
if(MM_dropBack) {if (NS) zIndex = MM_oldZ; else style.zIndex = MM_oldZ;}
retVal = false; if(!NS) event.returnValue = false; }
document.MM_curDrag = null;
}
if (NS) document.routeEvent(objName);
} return retVal;
}

Wenn Sie bis jetzt alle Übungen erfolgreich mitgemacht haben, sind Sie mit allem ausgerüstet, um Ihre Webanwendungen um dynamische Objekte zu erweitern. Nun ist es an der Zeit, Sie mit der letzten Möglichkeit von UltraDev bekannt zu machen, Objekten ein bestimmtes Verhalten zuzuweisen, einem Werkzeug, das ebenso mächtig wie leicht zu bedienen ist.

4.3 Mit Zeitleisten arbeiten

Wenn Sie schon mit Flash oder QuickTime gearbeitet haben, ist die Zeitleiste für Sie nicht Neues mehr. Zeitleisten dienen nicht so sehr dazu, um auf Aktionen, die der Anwender auf der Webseite ausführt, zu reagieren, sondern um die Ausführung bestimmter Aktionen abhängig vom Zeitpunkt zu steuern. Mit UltraDev können Sie Zeitleistenverhalten definieren, die ausgeführt werden, wenn die Seite geladen wird oder andere auslösende Ereignisse auftreten, ganz nach Belieben und Erfordernis. Die einzige Warnung, die ich in diesem Zusammenhang aussprechen möchte, ist die, dass auch hier eine übermäßige Verwendung dieses Effekts den Anwender eher irritiert als ihm nützt.

Der Zeitleisteninspektor

Haupteinsatzgebiet des Zeitleisteninspektors ist die Animation von Ebenen. Hier kann er seine Stärken auch am besten ausspielen. Sie können damit zwar auch Grafiken animieren, doch haben Sie in diesem Fall nicht dieselben Möglichkeiten der Steuerung wie bei der Verwendung von Ebenen. Daher würde ich Ihnen empfehlen, grundsätzlich immer mit Ebenen zu arbeiten und die zu animierenden Grafiken in Ebenen einzusetzen.

Für meine erste Demonstration des Zeitleisteninspektors möchte ich einen Ball über den Bildschirm zu seiner Endposition neben dem Logo meiner Website hüpfen lassen. Meine Startseite beinhaltet lediglich die Ebene mit der Grafik und dem Text, der auf der Seite erscheinen soll. Abb. 4.15 zeigt die Ausgangsposition der Elemente.

Legen Sie ein ähnliches Dokument mit einer Ebene an, in die Sie eine beliebige Grafik einfügen. Wenn Sie alle nötigen Bestandteile für eine Animation zusammen haben, öffnen Sie über das Menü Fenster > Zeitleisten den Zeitleisteninspektor. Die leere Standard- Zeitleiste sehen Sie in Abb. 4.16. Bevor wir irgendetwas in die Zeitleiste einsetzen, sollten wir uns mit ihrer grundsätzlichen Funktionsweise bekannt machen.

Da ist die zunächst die horizontale Reihe von Zahlen im Fenster. Diese Zahlen stehen für die Frames oder Schlüsselbilder, d.h. die einzelnen Phasen der Animation, die Sie erstellen. Sie können jedes Schlüsselbild in der Zeitleiste durch Klick auf die zugehörige Zahl anspringen. Eine roter Zeiger, der so genannte Wiedergabekopf, zeigt an, an welcher Stelle der Zeitleiste Sie sich befinden. Die vertikal angeordneten Zahlen links in der Palette stehen für die einzelnen Spuren der Zeitleiste. Diese Spuren oder Animationskanäle können Objekte aufnehmen, die simultan per Zeitleiste animiert werden. Über dem Wiedergabekopf liegt ein separater Kanal, der mit einem V bezeichnet ist. Hierbei handelt es sich um den Verhaltenskanal. Wenn Sie ein Schlüsselbild im Verhaltenskanal markieren, können Sie die Verhaltenspalette öffnen und diesem Schlüsselbild eine Aktion zuweisen. Über die Zeitleiste können Sie all jene Aktionen steuern, die sonst durch Maus-Rollover, Klicken oder andere Ereignisse ausgelöst werden.

Abbildung 4.15:  Problemlose Animation von Ebenen mit der Zeitleiste

Im Kopf der Zeitleiste finden sich verschiedene Kontroll- und Navigationselemente. Da Sie pro HTML-Dokument mehrere Zeitleisten in Abhängigkeit von bestimmten Verhaltensweisen erzeugen können, empfiehlt es sich, jeder Zeitleiste einen eindeutigen Namen zu geben, um sie später nicht durcheinander zu bringen. Durch Klick auf den kleinen Pfeil öffnet sich ein Popup-Menü, aus dem Sie schnell die gewünschte Zeitleiste auswählen können.

Abbildung 4.16:  Mit der Zeitleiste Aktionen zeitgesteuert auslösen

Die Buttons rechts davon funktionieren ähnlich wie die Steuerung eines Videorecorders. Der Rückspulknopf bewegt den Wiedergabekopf zum ersten Bild in der Zeitleiste zurück. Mit den Links- und Rechts-Pfeilen können Sie jeweils ein Bild zurück- bzw. vorspringen. Um schnell zu einem bestimmten Schlüsselbild zu springen, geben Sie einfach seine Nummer in das Feld zwischen diesen Pfeilen ein und das gewünschte Bild wird sofort angefahren.

Wenn Sie auf den Wiedergabekopf klicken und ihn mit gedrückter Maustaste verschieben, können Sie Ihre Animation in Echtzeit betrachten und ihre Wirkungsweise beurteilen.

Damit eine Animation flüssig abgespielt wird, müssen Sie im Eingabefeld Bps (Bilder pro Sekunde) die Framerate anpassen. Eine Framerate von 15 bedeutet, dass 15 Schlüsselbilder pro Sekunde abgespielt werden. Sollten mit diesem Defaultwert Ihre Animation allzu holprig geraten, erhöhen Sie die Framerate auf 30 Bps. Die Zeitleiste wird dadurch feiner unterteilt, sodass Sie die jeweilige Position des Objekts genauer festlegen können, was in einem runderen Bewegungsablauf resultiert.

Als Letztes können Sie noch die Kontrollfelder Auto-Wdg und Schleife aktivieren. Mit Auto-Wdg fügen Sie dem <BODY>-Tag ein onLoad-Ereignis hinzu, das bewirkt, dass die Animation abgespielt wird, sobald die Seite vollständig geladen ist. Die Option Schleife bewirkt, dass eine Animation immer wieder von vorne abgespielt wird, sobald sie am letzten Bild angekommen ist - hierzu wird im Verhaltenskanal eine entsprechende Anweisung (Gehe zu Zeitleistenbild) in das letzte Schlüsselbild der Animation eingesetzt.

Soll eine geloopte Animation sauber ablaufen, sollte das Objekt im letzten Schlüsselbild wieder auf der gleichen Position stehen wie im ersten Schlüsselbild. Andernfalls hat der Betrachter den Eindruck, dass das Objekt planlos auf dem Monitor herumhüpft.

Schlüsselbilder für eine Animation definieren

Einfache Animationen lassen sich mit einigen wenigen Mausklicks erzeugen. Sie markieren ein bestimmtes Schlüsselbild in der Zeitleiste und platzieren die Ebene an der gewünschten Position. Alle nötigen Zwischenbilder berechnet UltraDev mit Fleiß und JavaScript.

Ein praktisches Beispiel: Sie möchten eine Ebene animieren. Markieren Sie zuerst die entsprechende Ebene und klicken Sie dann auf den Pfeil rechts im Zeitleisteninspektor. Wählen Sie aus dem Popup-Menü den Befehl Objekt hinzufügen (Alternativ: Menü Modifizieren > Zeitleiste > Objekt in Zeitleiste einfügen oder Kontextmenü In Zeitleiste einfügen). In Kanal 1 sollte nun Ihre Ebene angezeigt werden. Wenn Sie möchten, können Sie die Ebene auch in andere Kanäle verschieben. Standardmäßig werden zwei Schlüsselbilder erzeugt: das Start- und das End-Schlüsselbild. Schlüsselbilder werden im jeweiligen Kanal durch einen weißen Ring erkennbar gemacht.

Schlüsselbilder hinzufügen und entfernen

Für unsere erste Animation setzen Sie das End-Schlüsselbild bitte auf Frame 60. So haben wir genügend Ellbogenfreiheit bei unserer Arbeit. Markieren Sie nun in dem Kanal, in dem die zu bearbeitende Ebene liegt, Frame 15, und wählen Sie im Popup-Menü der Palette den Befehl Keyframe hinzufügen. (Die Begriffe »Keyframe« und »Schlüsselbild« werden von UltraDev in derselben Bedeutung nebeneinander verwendet. In der Hilfefunktion ist meist von Schlüsselbildern die Rede, in den Menüs von Keyframes.) Fügen Sie auch bei Bild 30 und 45 Keyframes ein. Haben Sie versehentlich zu viele Keyframes gesetzt, können Sie sie mit dem Befehl Keyframe entfernen aus dem Palettenmenü entfernen. Nun können Sie anhand dieser Keyframes die Position der Ebene auf der Seite definieren. Ich möchte mein Logo um den Text auf meiner Seite kreisen lassen.

Wenn Sie die Keyframes für Ihre Animation setzen, wird in der Dokumentansicht ein Pfad gezeichnet, der den Bewegungsablauf der Ebene symbolisiert. Abb. 4.17 zeigt den Pfad und die Zeitleiste, nachdem ich meine Animation fertig erstellt habe.

Vergessen Sie nicht, die Option Auto-Wdg zu aktivieren, damit Ihre Animation abgespielt wird, wenn die Seite in den Browser geladen wird.

Abbildung 4.17:  Zeitleiste und Bewegungspfad einer einfachen Animation

Komplexe Bewegungspfade mühelos erstellen

Das war doch gar nicht so tragisch, oder? Aber es gibt noch eine einfachere Methode, um ein Objekt zu animieren. Mit ruhiger Hand und einer klaren Vorstellung vom Ablauf der Animation können Sie ein Objekt einfach den gewünschten Bewegungspfad entlang ziehen, während UltraDev die erforderlichen Schlüsselbilder automatisch erzeugt.

Für diese Art der Animationserstellung brauchen wir ein leeres Arbeitsfenster. Entweder öffnen Sie ein neues Dokument mit einer Ebene oder Sie löschen den soeben erstellten Bewegungspfad in der Zeitleiste. Um eine Animation zu löschen, markieren den betreffenden Kanal per Mausklick und löschen die Animationsleiste über den Befehl Zeitleiste entfernen im Palettenmenü.

Bewegungspfad aufzeichnen

Markieren Sie in der Entwurfsansicht die Ebene, deren Bewegungspfad Sie aufzeichnen wollen, und aktivieren Sie den Befehl Pfad der Ebene aufzeichnen im Palettenmenü des Zeitleisteninspektors. Wechseln Sie wieder in die Entwurfsansicht und ziehen Sie die Ebene mit ruhiger Hand den Bewegungspfad entlang, dem die spätere Animation folgen soll.

Abbildung 4.18:  Komplexe Animationen lassen sich durch Aufzeichnung des Bewegungspfades leicht erstellen.

Während Sie die Ebene verschieben, werden auf dem Monitor graue Punkte angezeigt, die die Richtung bzw. den Richtungswechsel Ihrer Ziehbewegung aufzeichnen. Wenn Sie die Ebene ablegen, wird der Pfad gefüllt und geglättet. Es ist aber mehr als schwierig, per Maus die ideale Bewegungskurve zu zeichnen, sodass UltraDev vermutlich weit mehr Schlüsselbilder in die Zeitleiste eingefügt hat, als tatsächlich nötig sind. Handarbeit ist also angesagt, um den Bewegungspfad nachträglich zu optimieren. Markieren Sie überflüssige Schlüsselbilder in der Zeitleiste und löschen Sie sie. Außerdem können Sie einzelne Schlüsselbilder anfahren und die Position der Ebene nachträglich noch feintunen.

Ich habe die Hüpfbewegung eines Balls erzeugt, indem ich die Abbildung mehrfach vom unteren zum oberen Rand der Arbeitsfläche verschoben und die Eckpunkte etwas abgerundet habe. In Abb. 4.18 sehen Sie den aufgezeichneten Bewegungspfad und die zugehörige Zeitleiste.

Weitere Funktionen der Zeitleiste

Die Mehrzahl der im Popup-Menü der Zeitleiste enthaltenen Befehle erklären sich von selbst. Es folgt eine Übersicht der Funktionen, die wir bis jetzt noch nicht besprochen haben:

Die Funktionalität von Zeitleisten bekommen Sie am besten in Griff, wenn Sie ausgiebig damit herumexperimentieren. Die Zeitleiste ermöglicht die Realisierung von Effekten, die vorher nur unter Verwendung von Flash oder anderen Plug-Ins möglich waren. Der Kreativität sind kaum Grenzen gesetzt: Lassen Sie beispielsweise gesteuert von Verhaltensweisen Sounddateien abspielen, während eine Animation abläuft - und zu all dem genügt ein einziges HTML-Dokument!

4.4 Flash-Elemente mit UltraDev

Mit UltraDev 4.0 lassen sich spezielle dynamische Objekte so einfach erzeugen wie HTML-Elemente. Flash ist ein sehr viel verwendetes Animationsprogramm, mit dem sich ressourcenschonende, schnell ladende Vektoranimationen erstellen lassen. Im Gegensatz zu den herkömmlichen animierten GIFs oder eingebetteten Videos benötigen Flash- Movies nur sehr wenig Speicherplatz und ermöglichen beeindruckende Effekte.

Macromedia hat die Objektpalette von UltraDev um zwei Funktionen erweitert, die einfache Flash-Elemente automatisch erzeugen. Sie müssen dazu weder das Programm selbst haben noch wissen, wie man damit arbeitet.

Lassen Sie uns diese Features nun einmal ausprobieren. Sie werden staunen, wie leicht es ist, Ihre Site mit Flash-Elementen anzureichern.

Flash-Schaltflächen

Um Flash-Schaltflächen auf Ihre Seite zu bringen, klicken Sie entweder auf das Icon Flash-Schaltfläche einfügen in der Objektpalette oder wählen Sie Einfügen > Interaktive Bilder > Flash-Schaltfläche. Es macht nichts, wenn die Einfügemarke nicht dort steht, wo die Schaltfläche später hin soll. Sie können das Element, nachdem es eingefügt wurde, jederzeit in vollem Umfang editieren.

Abbildung 4.19:  Wählen Sie Form und Beschriftung der Flash-Schaltfläche.

Wenn Sie den Befehl Flash-Schaltfläche einfügen aktiviert haben, öffnet sich die in Abb. 4.19 gezeigte Dialogbox. Hier konfigurieren Sie das Verhalten des Buttons.

Das Feld Beispiel zeigt ein Muster des späteren Buttons. Die Ansicht des Musters verändert sich nicht, wenn Sie Ihre persönlichen Einstellungen anpassen. Wählen Sie zuerst aus der Scrollliste einen passenden Stil aus - das Angebot geht von kreativ bis sachlich.

Wenn Sie einen Stil ausgesucht haben, geben Sie in das Feld Schaltflächentext den Text ein, mit dem die Schaltfläche beschriftet werden soll, und weisen Sie ihm über das Dropdown-Menü Schrift einen Schriftschnitt zu. Im Feld Grösse geben Sie die gewünschte Größe ein.

Im Feld Hyperlink setzen Sie den Pfad auf die Datei, die geöffnet werden soll, oder wählen mit Klick auf Durchsuchen die gewünschte Datei Ihrer Site. Über das Dropdown-Menü Ziel stellen Sie ein, in welchem Fenster der Link geöffnet werden soll.

Als letzten Schritt bestimmen Sie die Hintergrundfarbe des Buttons sowie den Namen, unter dem er abgespeichert werden soll. Die endgültige Flash-Datei kann mehr Platz beanspruchen als der eigentliche Button. Stellen Sie daher unter HG-Farbe für den umgebenden Hintergrund des Buttons eine passende Farbe ein. Wenn Sie mit Ihrem Werk zufrieden sind, brauchen Sie ihm nur noch einen Namen zu geben, doch wenn Sie möchten, weist UltraDev der Datei automatisch einen Namen zu. Klicken Sie nun noch auf Anwenden, um dem Button die getroffenen Einstellungen zuzuweisen.

Ist die Flash-Schaltfläche ins Dokument eingefügt, können Sie sie auswählen und mithilfe der Anfasser auf jede beliebige Größe skalieren. Da Flash-Schaltflächen vektorbasiert sind, leidet die Auflösung darunter nicht und sie werden immer gleich scharf dargestellt. Durch Doppelklick auf den Button öffnet sich wieder das Dialogfenster Flash-Schaltfläche einfügen, sodass Sie ihn jederzeit editieren können.

Flash-Text

Flash-Text funktioniert nach demselben Prinzip wie Flash-Schaltflächen und erlaubt das einfache Einsetzen von hochauflösendem Vektortext in ein Dokument. Klicken Sie hierzu entweder auf das Icon Flash-Text einfügen in der Objektpalette oder wählen Sie Einfügen > Interaktive Bilder > Flash-Text. Es öffnet sich die in Abb. 4.20 gezeigte Dialogbox, über die Sie Flash-Text editieren.

Abbildung 4.20:  Die Funktion Flash-Text einfügen erzeugt hochauflösenden Vektortext.

Dieses Fenster bietet ähnliche Einstellungsmöglichkeiten, wie wir sie schon bei den Flash- Schaltflächen kennen gelernt haben. Sie können Font, Schriftgröße und Schriftschnitt sowie die Textausrichtung wählen. Wenn Sie im Text einen Link setzen wollen, können Sie außerdem eine Rollover-Farbe bestimmen.

Geben Sie im Feld Text den Text ein, der im Flash-Format abgespeichert werden soll. Ist das Kontrollfeld Schrift zeigen aktiviert, zeigt die Vorschau den Text in der gewünschten Schrift an.

Wollen Sie einen Link setzen, geben Sie in den entsprechenden Feldern den Pfad und, falls nötig, das Ziel ein.

Schließlich können Sie wie bei den Flash-Schaltflächen noch eine Hintergrundfarbe bestimmen und einen Dateinamen vergeben. Letzteres können Sie auch wieder vom Programm erledigen lassen.

Im Gegensatz zu HTML-formatiertem Text können Sie Flash-Text in der Dokumentansicht beliebig proportional oder ungleichmäßig skalieren. Wollen Sie Flash- Text editieren, öffnen Sie per Doppelklick auf den Text das zugehörige Dialogfenster und verändern die gewünschten Einstellungen.

Abb. 4.21 zeigt ein Dokument mit eingefügtem Flash-Text und Flash-Schaltfläche.

Abbildung 4.21:  Flash-Text und Flash-Schaltflächen erlauben die Verwendung hochauflösender Vektorelemente direkt in der HTML-Entwicklungsumgebung.

Bevor Sie jedoch der Versuchung erliegen, nur noch mit den vektorbasierten Werkzeugen von UltraDev zu arbeiten, sollten Sie sich erst über Ihre Zielgruppe Gedanken machen. Nicht in allen Browsern ist das Flash-Plug-In installiert, und wenn Sie die Navigation Ihrer Seiten ausschließlich auf Flash-Text oder -Schaltflächen aufbauen, laufen Sie Gefahr, zumindest einen Teil Ihrer Adressaten auszusperren.

4.5 Weitere dynamische Elemente

Mit den bisher vorgestellten Lösungen sind die Möglichkeiten von UltraDev, dynamische Elemente auf die Website zu bringen, noch nicht erschöpft. In diese Kategorie fallen z.B. ausgewachsene Flash-Animationen oder Java-Applets. Mit Java können Sie komplette interaktive Programme in Ihre Website einbinden. Es gibt so gut wie nichts, das mit diesem Animationswerkzeug bzw. mit dieser Programmiersprache nicht möglich wäre. Im Unterschied zu den weiter oben vorgestellten Techniken brauchen Sie hier jedoch spezielle Plug-Ins, um die erstellten Anwendungen abspielen zu können, und die Anwendungen selbst müssen Sie außerhalb von UltraDev erstellen. Bestimmte Elemente lassen sich in der Dokumentansicht direkt abspielen, wenn Sie den Button Abspielen im Eigenschafteninspektor anklicken.

Wenn Sie eines dieser Elemente auf einer Webseite verwenden wollen, tun Sie das über Einfügen > Medien, wobei Sie im Untermenü Medien dann den entsprechenden Typ auswählen, im Falle eines Flash-Movies also Flash. Der eingefügte Medientyp wird als graues Rechteck mit dem entsprechenden Symbol dargestellt, wie in Abb. 4.22 gezeigt. Das dynamische Element selbst wird also nicht angezeigt, Sie können seine Attribute aber mit dem Eigenschafteninspektor bearbeiten und um den Platzhalter herum wie gewohnt Ihre sonstigen Elemente platzieren.

Abbildung 4.22:  Nicht alle dynamischen Elemente sind so pflegeleicht wie DHTML-Effekte.

Wenn ich auf meinen Websites spezielle dynamische Elemente brauche, verwende ich nach Möglichkeit lieber Java-Applets als irgendwelche proprietären Lösungen, die ohne eigenes Plug-In nicht laufen. Beim Einsatz von Java sollte man aber auf eine gewisse Verhältnismäßigkeit der Mittel achten, denn nur für ein paar animierte grafische Effekte Java zu bemühen, ist, als wollte man Reisnägel mit dem Dampfhammer einschlagen. Nichtsdestotrotz, falls Sie Ihre Website mit ein paar Java-Applets aufpeppen möchten, finden Sie unter http://www.gamelan.com komplette Bibliotheken zum herunterladen.

4.6 JavaScript für Fortgeschrittene

UltraDev bietet JavaScript-Programmierern einige nützliche Features, um JavaScript-Code in HTML-Dokumenten zu editieren und auf Fehler zu überprüfen. Wenn Sie Programmierer sind, werden Ihnen diese Funktionen von anderen Entwicklungsumgebungen bzw. Debuggern her vertraut sein. Öffnen Sie ein neues Dokument, setzen ein paar Verhaltensweisen und schalten Sie in die Codeansicht um.

In der Werkzeugleiste sehen Sie eine Schaltfläche mit geschwungenen Klammern: {}. Dieses Menü listet alle verwendeten JavaScripts auf. Die ausgewählte Funktion wird direkt gezielt angesteuert. Zur gezielten Einkreisung von Fehler können Sie außerdem im Code Haltepunkte setzen.

Wenn Sie an der Stelle, an der die Einfügemarke steht, einen Haltepunkt setzen wollen, wählen Sie im Menü den Befehl Haltepunkt setzen. Am Kopf dieser Zeile wird dann ein roter Punkt angezeigt. An dieser Stelle wird die Ausführung des Programms gestoppt, sodass Sie die aktuellen Werte aller Variablen überprüfen und eventuelle Fehler einkreisen können. Um Haltepunkte zu löschen, wählen Sie im entsprechenden Pulldown-Menü den Befehl Alle Haltepunkte entfernen.

Wenn Sie die nötigen Haltepunkte im JavaScript-Code gesetzt haben, wählen Sie den Befehl Datei > Debug in Browser. (Sie erreichen die Funktion auch über das Globus- Icon der Werkzeugleiste.) Daraufhin öffnet sich der gewählte Browser und arbeitet das Script ab, während gleichzeitig das in Abb. 4.23 gezeigte Fenster JavaScript-Debugger angezeigt wird.

Abbildung 4.23:  JavaScript-Code auf Fehler überprüfen mit dem  Debugger

Im Kopf dieses Fensters sehen Sie mehrere Icons, über die Sie den Prüfdurchlauf durch das Script steuern. Wie bereits erwähnt, stoppt der Prüfdurchlauf, wenn das Programm bei einem Haltepunkt ankommt. Diese Schaltflächen erlauben jedoch noch weiter gehende Kontrollen. Es folgt (von links nach rechts) eine Übersicht über die Schaltflächen und ihre Funktionen:

Sie können ferner das Verhalten von Variablen in Funktionen überwachen, indem Sie sie in das untere Feld des Debugging-Fensters eintragen. Klicken Sie auf das Plussymbol (+), und geben Sie den Namen der Variablen ein. Wenn das Programm abgearbeitet wird, wird der jeweils aktuelle Wert der Variablen in dem Feld neben ihrem Namen angezeigt.

Der JavaScript-Debugger ist für Programmierer eine fantastische Erweiterung der Entwicklungsumgebung von UltraDev. Was Cross-Browser-Kompatibilität und die Beachtung der zahlreichen Fallstricke angeht, ist und bleibt JavaScript eine der verzwicktesten Programmiersprachen.

4.7 Zusammenfassung

Es gibt kaum eine Website, die heute ohne dynamische Elemente arbeitet. Wenn sich auf Ihrer Site nicht irgendwas bewegt, haben Sie die Zeichen der Zeit noch nicht erkannt.

Nun, ganz so schlimm ist es noch nicht, aber die Dinge bewegen sich in diese Richtung. Darum wird es zusehends wichtiger, dass man über das entsprechende Know-how verfügt, um DHTML-basierte Websites erstellen zu können. Heute haben Sie gelernt, wie Sie mit UltraDev Ihren Seiten automatisch dynamische Verhaltensweisen zuweisen können, die ohne die programminternen Funktionen ein erhebliches Maß an JavaScript- Programmierung erfordern würden.

Mit ein paar Mausklicks erstellen Sie innerhalb Ihrer gewohnten HTML-Umgebung komplexe Animationen und verschiebbare Elemente - ohne andere Animations- oder Design-Tools zu benötigen.

Wer Flash-Elemente auf seine Seiten bringen will, kann mit der Objektpalette ganz einfach Flash-Buttons bzw. Flash-Text erstellen. Im Gegensatz zu HTML-Text oder den Pixelgrafiken im jpg- bzw. gif-Format sind Flash-Elemente vektorbasiert und lassen sich bei gleich bleibender Qualität auf jede beliebige Größe skalieren.

4.8 Fragen und Antworten

Frage:
Werden der Netscape Navigator und der Internet Explorer bei der Implementierung von JavaScript jemals das gleiche DOM verwenden?

Antwort:
Darauf würde ich mich nicht verlassen. Das Document Object Model des Netscape Navigator unterscheidet sich erheblich von demjenigen des Internet Explorer. Wenn Sie Anwendungen gezielt für den Internet Explorer 5.0 oder höher verwenden, haben Sie Zugriff auf eine Menge von Verhaltensweisen, die mit dem Netscape Navigator nicht funktionieren. Ich möchte Ihnen auf alle Fälle raten, so kompatibel wie möglich zu bleiben.

Frage:
Ich möchte eine bestimmte Verhaltensweise verwenden, die standardmäßig nicht vorhanden ist. Wie kann ich sie hinzufügen?

Antwort:
Sie könnten sich auf der Website von Macromedia umsehen und weitere Verhaltensweisen herunterladen. Wie man Sie einbindet, lernen wir in Tag 5, »Wieder verwertbare Elemente und Erweiterungsmodule«. Wenn Sie programmieren können, sollten Sie sich auch einmal in der Hilfefunktion das Kapitel »Dreamweaver erweitern« ansehen.

Frage:
Kann ich DHTML-Effekte aus einer Anwendung kopieren und in UltraDev einsetzen und bearbeiten?

Antwort:
Nein, das geht nicht. Sie könnten zwar JavaScript-Code in UltraDev einsetzen, doch können Sie ihn nicht mit der Zeitleiste oder anderen Werkzeugen bearbeiten.

Frage:
Verwende ich besser DHTML oder ein Plug-In?

Antwort:
Das liegt ganz bei Ihnen. Ist die Wahrscheinlichkeit größer, dass Ihre Zielgruppe das erforderliche Plug-In installiert hat oder dass sie einen 4.0-Browser oder höher installiert hat? Bevor Sie eine Anwendung entwickeln, sollten Sie versuchen, diesbezügliche Informationen zu bekommen.

4.9 Workshop

Der Workshop dient dazu, den gelesenen Stoff mithilfe von gezielten Fragen und Übungen zu vertiefen. Die Antworten finden Sie im Anhang A, »Quiz-Antworten«.

Quiz

  1. Was versteht man unter Verhaltensweisen?
  2. UltraDev zeigt manche Ereignisse in Klammern an. Was ist der Unterschied zu anderen Ereignissen?
  3. Wenn Sie die Ziehbewegung einer Ebene auf links und rechts einschränken wollen, welche Werte müssen Sie dann in die entsprechenden Felder eingeben?
  4. Was müssen Sie tun, damit Ebenen sofort verschiebbar sind, wenn die Seite geladen wird?
  5. Sie haben eine Animation mit der Zeitleiste erstellt. Was können Sie tun, damit sie flüssiger abläuft?
  6. Mit welchem Werkzeug können Sie beliebig skalierbaren Vektortext erstellen?

Übungen

  1. Erzeugen Sie eine Verhaltensweise, die mit einem Rollover zwei Grafiken auf einmal austauscht. Mit der vordefinierten Rollover-Funktion kann nur das Bild ausgetauscht werden, das mit der Maus überfahren wird.
  2. Erstellen Sie Ihre eigene DHTML-Animation eines hüpfenden Balls. Erweitern Sie die Animation um ein Aufprallgeräusch, das jedes Mal wiedergegeben wird, wenn die entsprechenden Frames abgespielt werden.
  3. Forschen Sie ein bisschen herum, welche anderen Animationstechniken Sie durch die Verwendung von Plug-Ins möglich werden. Ein paar gute Beispiele finden Sie unter folgenden Adressen: Gamelan Java Collection, http://www.gamelan.com, und Joe Cartoon's Flash-Animationen, http://www.joecartoon.com. Auch die Website von Macromedia, http://www.macromedia.com, ist eine gute Anlaufstelle.



vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbackKapitelanfangnächstes Kapitel


© Markt+Technik Verlag, ein Imprint der Pearson Education Deutschland GmbH