26. Februar 2016 | 2 min lesezeit

PrimeFaces Growl zum Anklicken

PrimeFaces Growls zum Anklicken

Usability wird für Webprojekte immer wichtiger. Moderne Web-Anwendungen wie Google Docs führen dazu, dass Nutzer in ihrem beruflichen Umfeld eine vergleichbare Usability erwarten. Einheitliche Positionierung von Bedienelementen, eindeutige Beschriftungen und klare verständliche Fehlermeldungen gehören zum guten Ton.

In PrimeFaces Web-Anwendungen zeigen wir Fehlermeldungen häufig in Growls an. Die Benutzerfreundlichkeit von Fehlermeldungen in Growls scheitert daran, dass diese nicht anklickbar sind. Damit wird die Usabilityregel Gesetz der Nähe verletzt. Nach dem Gesetz der Nähe sollte eine Fehlermeldung in räumlicher Nähe zum betreffenden Formularelement dargestellt werden.

Ziel dieses Blogposts ist es, dass Growl-Fehlermeldungen anklickbar sind. Nach einem Klick springen wir automatisch über JavaScript in das entsprechende Textfeld (bei Radioboxen/Checkboxen in das Element). Somit halten wir zumindest ansatzweise das Gesetz der Nähe ein.

Um den Fokus beim Anklicken des Growl auf das richtige Formularelement zu setzen, müssen wir die eindeutige ID der Komponente ermitteln, für die die Fehlermeldung ausgelöst wurde.

Zur Erweiterung der Ausgabe erstellen wir eine eigene Renderer-Klasse, die vom PrimeFaces GrowlRenderer erbt. Um die Komponenten-ID zusammen mit der FacesMessage (Summary und/oder Detail) im JSON Format ausgeben zu können, überschreiben wir die Methode ‚encodeMessages‘. Da die ID nicht direkt zur Verfügung steht, identifizieren wir die auslösende Komponente anhand der FacesMessage und des FacesContextes.

Damit wir unseren Renderer auch nutzen können, müssen wir in der faces-config.xml noch folgenden Eintrag hinzufügen:

Kommen wir nun zum JavaScript.
In der selbsterstellten growl.js überschreiben wir die renderMessage Methode aus dem PrimeFaces Widget „Growl“ und fügen das onClick-Attribut zum div-Element hinzu.

Beim Klick auf das Growl wird der Event Handler ausgelöst und die JavaScript Funktion „onGrowlDivClicked“ aufgerufen. Diese erhält die Komponenten-ID als Parameter und setzt den Fokus auf das zugehörige Formularelement.

Das war’s auch schon – einfach implementiert, ist unsere PrimeFaces Anwendung nun benutzerfreundlicher.


Keine Kommentare

Kontakt

OPEN KNOWLEDGE GmbH

Standort Oldenburg:
Poststraße 1, 26122 Oldenburg

Standort Essen:
II. Hagen 7, 45127 Essen