Webdesign: Fenster mit JavascriptBilder und HTML-Seiten in Fenstern anzeigen

Annährung von Web und Desktop

Webdesign: Fenster mit Javascript

Die Möglichkeiten moderner Web-Oberflächen nähern sich immer mehr den Funktionen von Desktop-Anwendungen an. Einiges, was dort aber zum Alltag gehört, ist im Web nur schwer nachzuvollziehen. Die Verwendung von Fenstern oder Dialogen zur Eingabe oder Anzeige von Daten gehört von jeher nicht gerade zu den Stärken von HTML. Die Möglichkeiten von Javascript beschränken sich hauptsächlich auf Befehle wie alert und confirm. Beide sind nicht gerade ein Wunder an Anpassungsfähigkeit und Funktionalität. HTML stellt lediglich den Befehl window.open zur Verfügung, der allerdings ein neues Browserfenster öffnet und somit den Austausch von Daten erschwert.

Dieser Artikel zeigt den Einsatz von Fenstern in einer Web-Oberfläche. Dabei kommen zwei Bibliotheken für unterschiedliche Anwendungsgebiete zum Einsatz. Lightbox ist ein Spezialist zum Anzeigen eines oder mehrerer Bilder. Der Funktionsumfang ist daher an diese Anwendung angepasst. Der zweite Kandidat, Prototype Windows, geht einige Schritte weiter und bietet einen allgemeineren Ansatz für die Verwendung benutzerdefinierter Fenster in HTML.

Lightbox

Webdesign: Fenster mit Javascript

Lightbox ist eine Javascript-Bibliothek, die das Anzeigen von Bildern zum Kinderspiel macht. Sie kommt daher oft bei Galerien und Bildersammlungen zum Einsatz. Der Clou bei der Sache ist, dass zum Anzeigen des Bildes kein extra Fenster geöffnet wird und auch kein Seitenwechsel notwendig ist. Lightbox zeigt das Bild in einem Bereich der aktuellen Seite an. Die Anzeige mehrerer Bilder ist für die Bibliothek ebenfalls kein Problem. Sie stellt dem Benutzer eine Navigationsmöglichkeit zur Verfügung, mit der zwischen einzelnen Bildern unterschiedlicher Größe hin und her gewechselt werden kann. Der Bildwechsel wird dabei mit Überblendeffekten optisch aufgepeppt. Im Gegensatz zu anderen Lösungen müssen die Bilder nicht schon alle vorab geladen sein, um sie anzuzeigen. Lightbox lädt sie bei Bedarf nach und überbrückt die Wartezeit durch die Anzeige eines Fortschrittselements.

Manch einer wird vielleicht einwenden, dass dies ein alter Hut sei und alles in irgendeiner Form schon einmal dagewesen sei. Das ist grundsätzlich richtig. Allerdings war der Realisierungsaufwand bisher sehr viel größer. Lightbox packt all diese Funktionen zu einer einfach zu bedienenden und zu implementierenden Bibliothek zusammen, die sich um beinahe alles kümmert. Die Lightbox-Skripts verwenden Prototype und Scriptaculous (script.aculo.us) zur Realisierung der zur Verfügung gestellten Funktionen. Das unter www.huddletogether.com/projects/lightbox2 verfügbare Download-File enthält bereits alle Dateien, die notwendig sind, um die Funktionen der Bibliothek zu nutzen.

Bilder anzeigen

Webdesign: Fenster mit Javascript

Um mit Lightbox Bilder auf einer Seite anzuzeigen, binden Sie drei Javascript-Dateien und ein Stylesheet auf der Seite ein.

Damit ist das Werk schon beinahe vollbracht. Was jetzt noch fehlt, ist ein Aufruf der anzuzeigenden Bilder, was aber ebenfalls mit sehr wenig Aufwand verbunden ist.

Bild 1

Das war?s! Auf den ersten Blick ist das absolut nichts Neues. Nur das zusätzliche Attribut rel unterscheidet diesen Link von einem herkömmlichen. Der Unterschied für den Betrachter ist jedoch umso größer. Bei einem Klick auf den Link öffnet sich nun ein Lightbox-Fenster, wie es in den Abbildungen zu sehen ist. Fügen Sie dem Link noch das Title-Attribut hinzu, bekommen Sie dessen Inhalt als Bildunterschrift in der geöffneten Lightbox angezeigt.

Wem die Optik der Lightbox nicht zusagt, der kann diese sehr einfach ändern. Alle Parameter lassen sich entweder über die lightbox.css-Datei oder die mitgelieferten Grafiken im images-Verzeichnis anpassen.

Slideshows

Webdesign: Fenster mit Javascript

Doch Lightbox kann noch mehr, als nur einzelne Bilder anzuzeigen. Bilder lassen sich zu Gruppen zusammenfassen. Ein geöffnetes Lightbox-Fenster bietet anschließend die Möglichkeit, zwischen den Bildern dieser Gruppe zu wechseln. Das Navigieren erfolgt per Tastatur über [P] und [N] oder die Maus. Die Links werden eingeblendet, wenn die Maus über den linken oder rechten Rand des Bildes bewegt wird. Der Bildwechsel ist animiert. Lightbox bedient sich an dieser Stelle der Effektfunktionen von Scriptaculous. Die Anzeige passt sich automatisch an die Größe des anzuzeigenden Bildes an.

Das Zusammenfassen von Bildern zu einer Slideshow-Gruppe geschieht anhand des rel-Attributs der Bild-Links. Es muss lediglich um einen Gruppennamen erweitert werden. Das folgende Listing zeigt ein Beispiel, in dem eine Gruppe Wien gebildet wird.


image1
image1
image1


Natürlich lassen sich damit auch mehrere, voneinander unabhängige Gruppen bilden. Auf der Heft-CD dieser Ausgabe finden Sie im Bereich Listings ein Beispiel einer kleinen Bildergalerie mit Lightbox.

Prototype Windows

Webdesign: Fenster mit Javascript

Wie der Name bereits andeutet, kommt Prototype als Basis für diese Fensterbibliothek zum Einsatz. Während Lightbox den Fokus auf die Anzeige von Grafiken und Bildern legt, geht Prototype Windows einen Schritt weiter. Es bietet allgemein verwendbare Skriptklassen, die es Entwicklern erlauben, benutzerdefinierte Fenster und Dialoge zu erstellen, die viele Funktionen ihrer Desktop-Kollegen zur Verfügung stellen. So können mehrere Fenster gleichzeitig geöffnet werden, die Fenster sind verschiebbar und können einzeln geschlossen, verkleinert oder vergrößert werden. Zudem ist es möglich, die Optik der Fenster mit Themes an die eigenen Bedürfnisse anzupassen.

Wie Lightbox ist die Bibliothek unter einer Open-Source-Lizenz verfügbar. Die jeweils aktuellste Version kann unter prototype-window.xilinus.com heruntergeladen werden. Auch hier müssen vor der Verwendung der Fenster einige Javascript-Dateien und Stylesheets eingebunden werden. Grundsätzlich notwendig sind wieder Prototype und Scriptaculous. Dazu kommt noch die eigentliche Window-Bibliothek.

Die Anzahl der notwendigen CSS-Dateien hängt davon ab, welches Theme zum Einsatz kommen soll. Wer die Standard-Optik verwenden möchte, muss zumindest die folgenden beiden Dateien einbinden:

Fenster erstellen

Webdesign: Fenster mit Javascript

Modale Fenster und Dialoge

Webdesign: Fenster mit Javascript

Es gibt Aktionen, die die volle Aufmerksamkeit des Benutzers verlangen. Aus diesem Grund existieren so genannte modale Fenster. Solange ein solches Fenster geöffnet ist, kann der Benutzer keine anderen Aktionen durchführen. Erst nach dem Schließen des Fensters werden wieder alle Elemente der Bedienoberfläche freigegeben. Die Alert-Boxen von Javascript sind ein Beispiel für diese Art von Fenster. Mit Prototype Windows kann jedes Fenster modal geöffnet werden. Dazu muss lediglich beim Aufruf der show– oder showCenter-Funktion als zusätzlicher Parameter true übergeben werden. Alle Elemente außer dem geöffneten Fenster sind jetzt nicht mehr bedienbar. Diese Art von Fenster ist besonders dann sinnvoll, wenn die weitere Abarbeitung der Seite von Inhalten des Fensters abhängt.

Javascript bietet bereits zwei Arten von modalen Dialogen. Die mit den Befehlen alert oder confirm geöffneten Dialoge sind beide modal. Leider wirken sie oftmals wie Fremdkörper, da sie sich weder optisch noch sprachlich an den Rest der Seite anpassen lassen. Auch sind keinerlei Formatierungen der Ausgabe möglich. Prototype Windows bietet für beides eine bessere Alternative. Die Vorteile liegen auf der Hand: Das Aussehen und der Inhalt lassen sich beliebig an eigene Bedürfnisse anpassen. So sind auch formatierte Fehlerausgaben kein Problem. Das folgende Beispiel zeigt, wie Sie ein Alert-Fenster mit einer formatierten Ausgabe erzeugen:


msg="AchtungTest eines Alert Fensters, alle anderen Elemente sind jetzt gesperrt";
Dialog.alert(msg,{windowParameters: {className: "alphacube", width:300}, okLabel: "OK"});


Das Vorgehen unterscheidet sich wenig von der Ausgabe normaler Fenster. Lediglich der abschließende Aufruf einer show-Funktion entfällt. Über die Dialog-Klasse von Prototype Windows lassen sich drei verschiedene Arten von modalen Dialogen erzeugen: Dialog.alert generiert einen Dialog mit einer Meldung und einem Button. Dialog.confirm liefert ein Fenster mit zwei Buttons (beispielsweise OK und Abbrechen). Dialog.info öffnet ein Informationsfenster, beispielsweise mit Programminformationen oder auch einem Fortschrittsbalken für lang andauernde Vorgänge. Alle haben gemeinsam, dass man das generelle Aussehen über CSS-Dateien beliebig verändern kann. Die aktuelle Version liefert bereits zwei verschiedene Styles mit. Über den Parameter buttonClass kann zudem beim Erzeugen des Dialogs den Buttons ein bestimmter CSS-Stil zugewiesen werden.


Dialog.confirm(msg, {windowParameters: {width:300}, okLabel: "close",
buttonClass: "btnForm"}, id: "idcon");


Fazit

Webdesign: Fenster mit Javascript

Moderne Javascript-Bibliotheken wie Lightbox oder Prototype Windows machen es Entwicklern einfach, nachgeladene Daten wie Bilder oder HTML-Seiten in Fenstern anzuzeigen, ohne dass dazu die Seite gewechselt oder ein neues Browser-Fenster geöffnet werden muss. Lightbox ist dabei innerhalb der beiden vorgestellten Lösungen der Spezialist. Es beschränkt sich rein auf die Aspekte der Anzeige von Bildern, während Prototype Windows einen allgemeineren Ansatz bietet. Neben den beiden vorgestellten Lösungen existieren noch andere Tools und Techniken, die einen ähnlichen Funktionsumfang bieten.

Alle Dateien und Listings zum Workshop finden Sie auf der Heft-CD und unter listings.internet-pro.de.