Wunderschöne Javascript-Dialoge für meine Webapplikation mit AlertifyJS

Als Entwickler von Web-Anwendungen muss ich immer wieder einmal mit dem Nutzer der Applikationen kommunizieren. Ich muss ihn auf gewisse Dinge hinweisen («Sie haben vergessen, eine E-Mail-Adresse anzugeben!») oder ich muss ihn das eine oder andere fragen, während er mit der Applikation arbeitet («Sind Sie sicher, dass Sie den gewählten Datensatz löschen möchten?»).

Mit dem JavaScript-Framework namens AlertifyJS geht das heutzutage viel schöner als zu Zeiten, in denen das WWW noch in den Kinderschuhen steckte. In diesem Blogbeitrag möchte ich Ihnen AlertifyJS «verkaufen», auch wenn ich keinerlei Provision bekomme, da das Framework kostenlos zu haben ist.

Eine kleine Geschichte der JavaScript-Dialoge

Sie kennen JavaScript-Dialoge wahrscheinlich alle. Jeder hat schon einmal etwas Ähnliches wie folgende Meldung gesehen:

Für Entwickler waren solche Meldungen – anno 1998 – eine hervorragende Möglichkeit, mit den Nutzern einer Website in Dialog zu treten. Man konnte …

… wie mit der Meldung oben das Ausführen bzw. Nutzen der Website stoppen, bis der User auf «OK» geklickt hat.

… den User um sein Einverständnis bitten und auf die Antwort reagieren:

… oder sogar den User bitten, eine Eingabe vorzunehmen und sich den eingegebenen Wert für eine spätere Verwendung merken:

All diese Interaktionsmöglichkeiten werden von einem Browser nativ (= von Haus aus) zur Verfügung gestellt und können über JavaScript aufgerufen werden:

window.alert("Hallo Welt");

liefert den normalen Hinweis-Dialog, der (nur) mit «OK» bestätigt werden kann.

window.confirm("Wollen Sie Feierabend machen?”);

gibt die Möglichkeit, auf «OK» oder «Cancel» zu klicken.

window.prompt("Welches ist Ihre Lieblingsfarbe?");

ermöglicht eine Eingabe durch den Benutzer.

In JavaScript-Kursen wie z.B. dem Kurs: JavaScript-Programmierung («ISC») kann man auch als JavaScript-Anfänger schon beachtliche Dinge erreichen, wenn man diese Befehle kennt.

Die ganz frechen Webentwickler haben sich – auch anno 1998 – dann kleine Spässe daraus gemacht und Webseiten mit scheinbar unendlich vielen solcher Dialoge erstellt, um die Browser der Anwender zu blockieren. Das hat dazu geführt, dass moderne Browser spätestens beim zweiten Dialog eine Checkbox anbieten, die das Öffnen weiterer Dialoge verhindert:

«Das ist doch wunderbar! Was braucht man mehr?» werden jetzt einige sagen. Kommen wir deshalb zu den Nachteilen dieser Standard-JavaScript-Dialoge.

Die Nachteile

Nachteil 1: Keine Gestaltungsmöglichkeiten

Wie Sie an den Screenshots oben bereits gesehen haben, sind die Dialoge relativ schlicht gehalten. Als Designer habe ich keinerlei Zugriff auf das Aussehen, da die Dialoge nicht in HTML erstellt und mit CSS gestaltet werden können, sondern von JavaScript «generiert» werden.

Nachteil 2: Unterschiedliche Browser = unterschiedliches Aussehen

Auch ist das Aussehen der Dialoge von Browser zu Browser unterschiedlich. Ein und derselbe Befehl (z.B. window.alert(“Hallo Welt”);) bringt in drei unterschiedlichen Browsern drei unterschiedlich aussehende Ergebnisse:

Google Chrome

Microsoft Edge

Mozilla Firefox

Nachteil 3: Keine Konfigurationsmöglichkeiten

Weder lässt sich die Höhe oder Breite des Dialogs noch die Anordnung der Buttons festlegen. Auch wird – so oder so – die Ausführung bzw. Benutzung der Webseite so lange blockiert, bis der User einen Button geklickt oder den Dialog geschlossen hat.

Erster Schritt zur Besserung: AlertifyJS einbinden

Besuchen wir doch kurz die Website http://alertifyjs.com/ (Achtung: unter https://alertifyjs.org/ findet sich ein sehr ähnliches Projekt dass sich «alertify.js» nennt – verwirrend!) und laden uns die JavaScript- und CSS-Dateien herunter, die wir folgendermassen in unsere HTML-Seite einbinden:

<link rel="stylesheet" href="css/alertify.css">
 <script src="alertify.js"></script>

Und schon schreiben wir…

● statt window.alert(“Hallo Welt”);
einfach alertify.alert(“Hallo Welt!”);
und erhalten:

● statt window.confirm(“Wollen Sie Feierabend machen?”);
einfach alertify.confirm(“Wollen Sie Feierabend machen?”);
und erhalten:

● statt window.prompt(“Welches ist Ihre Lieblingsfarbe?”);
einfach alertify.prompt(“Welches ist Ihre Lieblingsfarbe?”);
und erhalten:

Wenn Sie das jetzt (vor allem optisch) nicht unbedingt berauschend finden, sollten wir uns der Lösung der oben beschriebenen Nachteile widmen.

Die Lösungen

Lösung 1: ganz viele Gestaltungsmöglichkeiten

AlertifyJS unterstützt sogenannte Themes mit denen sich beinahe grenzenlose Gestaltungsmöglichkeiten eröffnen – vor allem, weil man mittels CSS ganz einfach auch eigene Themes erstellen kann.

Wenn wir zusätzlich zum bereits eingebundenen CSS noch folgendes ergänzen…

<link rel="stylesheet" href="css/themes/semantic.css">

… sehen die Dialog schon anders aus:

Lösung 2: Gleiches Aussehen für alle Browser

Da AlertifyJS mit HTML und CSS arbeitet, sehen die Dialoge in allen Browsern gleich aus.

Lösung 3: Konfigurationsmöglichkeiten, soweit das Auge reicht

Will man die Reihenfolge und Beschriftung der Buttons ändern, schreibt man z.B. einfach:

alertify
 .prompt("Welches ist Ihre Lieblingsfarbe?")
 .set('reverseButtons', true);

und erhält

Will man auch den «einfachsten» Hinweis mit eigenen Button-Beschriftungen versehen, könnte man z.B. folgendes schreiben:

alertify
 .alert()
 .setting({
 'label':'Einverstanden!',
 'message': 'Feierabend machen?'
 })
 .show();

um dieses Ergebnis zu erhalten:

Nett, oder? Den etwas versierteren JavaScriptern unter Ihnen wird bei der Methode «setting» schon warm ums Herz, nicht wahr?

Was gibt es noch?

Wer die Website unter https://alertifyjs.com/ besucht, sieht schnell, dass AlertifyJS vollgepackt mit Features ist, die sehr gut dokumentiert sind und sich mit ein wenig JavaScript-Erfahrung im Handumdrehen umsetzen lassen.

Ein kleines – aber sehr feines – Feature soll zum Abschluss dieses Blogbeitrags speziell erwähnt werden: autoReset.

Haben Sie sich schon einmal aufgeregt, als Sie auf Ihrem Mobiltelefon versucht haben, bei einem Dialog auf den Button zu drücken, dieser aber gar nicht mehr auf dem Schirm sichtbar war? Haben Sie dann versucht, mit zwei Fingern die Seite kleiner zu ziehen, damit der Button wieder sichtbar wird? Ist der Button dann wieder aus dem Bildschirm raus «gesprungen»? Haben Sie dann (innerlich zumindest) geflucht? Ich auch!

Seit

alertify.alert('Hallo!').set('autoReset', true);

gehören solche unfreundlichen Interfaces der Vergangenheit an. Probieren Sie es unter http://alertifyjs.com/alert/autoReset.html doch grad selbst aus!