Wunderschöne Javascript-Dialoge für meine Webapplikation mit AlertifyJS
Unser Webspezialist und langjähriger Trainer Alex Kereszturi zeigt dir, wie du mit Alertifyjs JavaSript-basierte und Browser-konsistente Web-Dialoge erstellen.
Als Entwickler von Web-Anwendungen muss ich immer wieder einmal mit den Nutzerinnen und Nutzern der Applikationen kommunizieren. Ich muss sie auf gewisse Dinge hinweisen («Du hast vergessen, eine E-Mail-Adresse anzugeben!») oder ich muss sie das eine oder andere fragen, während sie mit der Applikation arbeiten («Bist du sicher, dass du den gewählten Datensatz löschen möchtest?»).
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 dir AlertifyJS «verkaufen», auch wenn ich keinerlei Provision bekomme, da das Framework kostenlos zu haben ist.
Eine kleine Geschichte der JavaScript-Dialoge
Du kennst JavaScript-Dialoge wahrscheinlich alle. Jede und jeder hat schon einmal etwas Ähnliches wie folgende Meldung gesehen:
Für Entwicklerinnen und Entwickler waren solche Meldungen – anno 1998 – eine hervorragende Möglichkeit, mit den Nutzerinnen und Nutzern einer Website in Dialog zu treten. Man konnte …
… wie mit der Meldung oben das Ausführen bzw. Nutzen der Website stoppen, bis die Userinnen und User auf «OK» geklickt haben.
… die Userinnen und User um ihr Einverständnis bitten und auf die Antwort reagieren:
… oder sogar die Userinnen und 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("Willst du Feierabend machen?");
gibt die Möglichkeit, auf «OK» oder «Cancel» zu klicken.
window.prompt("Was ist deine 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 Anwenderinnen und 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 du an den Screenshots oben bereits gesehen hast, 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 die Userinnen und User einen Button geklickt oder den Dialog geschlossen haben.
Erster Schritt zur Besserung: AlertifyJS einbinden
Besuche 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 lade die JavaScript- und CSS-Dateien herunter, die du folgendermassen in deine HTML-Seite einbindest:
<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(“Willst du Feierabend machen?”);
und erhalten:
● statt window.prompt(“Welches ist Ihre Lieblingsfarbe?”);
einfach alertify.prompt(“Was ist deine Lieblingsfarbe?”);
und erhalten:
Wenn du das jetzt (vor allem optisch) nicht unbedingt berauschend findest, 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 du mittels CSS ganz einfach auch eigene Themes erstellen kannst.
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
Willst du die Reihenfolge und Beschriftung der Buttons ändern, schreibst du z.B. einfach:
alertify
.prompt("Welches ist Ihre Lieblingsfarbe?")
.set('reverseButtons', true);
und erhältst
Willst du auch den «einfachsten» Hinweis mit eigenen Button-Beschriftungen versehen, könntest du z.B. folgendes schreiben:
alertify
.alert()
.setting({
'label':'Einverstanden!',
'message': 'Feierabend machen?'
})
.show();
um dieses Ergebnis zu erhalten:
Nett, oder? Den etwas versierteren JavaScripter/innen 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.
Hast du dich schon einmal aufgeregt, als du auf deinem Mobiltelefon versucht hast, bei einem Dialog auf den Button zu drücken, dieser aber gar nicht mehr auf dem Schirm sichtbar war? Hast du 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»? Hast du dann (innerlich zumindest) geflucht? Ich auch!
Seit
alertify.alert('Hallo!').set('autoReset', true);
gehören solche unfreundlichen Interfaces der Vergangenheit an. Probier es unter http://alertifyjs.com/alert/autoReset.html doch grad selbst aus!