Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Java EE 7 Grundkurs

Daten ausgeben

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Ausgabe von Daten erfolgt im JSF-Framework ebenfalls per Expression-Language-Bindung. Dabei besteht die Möglichkeit, die zurückgegebenen Daten vor der Anzeige zu manipulieren und in einem passenden Format darzustellen.

Transkript

Einmal eingegebene Daten wollen Sie sicherlich auch gerne im JSF wieder ausgeben. In diesem Video werden wir uns mit genau diesem Thema befassen. Wir werden klären, welche Komponenten es dafür gibt, und wir werden zwei kleine Beispiele bearbeiten, die es uns erlauben, zum einen einmal eingegebene Werte wieder auszugeben und zum anderen eine Liste von Werten darzustellen. Generell gilt, dass Daten direkt an Eingabeelemente gebunden werden können im JSF. Das bedeutet, wir haben dort eine Zwei-Wege-Kommunikation zwischen Model und View. Das erlaubt es uns beispielsweise, eingegebene Daten in einem inputText-Steuerlement auch wieder auszugeben. So weit, so gut. Das Problem ist nur: Das ist nicht sonderlich schön. Es gibt deswegen auch spezielle Elemente für die Ausgabe. Und hier unterscheiden wir einfache Elemente und Elemente, die der Ausgabe von Listen dienen. Typische Elemente für die einfache Ausgabe von Daten sind das outputFormat-Element. Dies erlaubt die formatierte Ausgabe von Daten, beispielsweise, wenn darin Platzhalter enthalten sind. Das outputLabel-Element. Dieses rendert ein Label-Element. So ein Label-Element kann mit einer Eingabe-, aber auch mit einer Ausgabe- Komponente assoziiert werden. Es gibt ein outputLink-Element. So ein outputLink-Element rendert ein a-Element, ein HTML-a-Element. Das Attribut "href" steuert automatisch das Ziel an. Und es gibt das outputText-Element. Mit diesem Element können wir eine einfache Textausgabe generieren. Das wird immer in Form eines spans gerendert. Und wir können das mit CSS-Stil oder -Klassen versehen. Lassen Sie uns einen kleinen Blick darauf werfen, wie wir Daten, die in einer Applikation eingegeben worden sind, wieder ausgeben können. Sie sehen hier eine Eingabe- und Ausgabeseite. Das ist eine JSF-Page, die zum einen einen relativ umfangreichen Eingabebereich besitzt, und zum anderen einen noch nicht wirklich vorhandenen Ausgabebereich. Wenn wir das Beispiel einmal ausfüllen beim derzeitigen Stand, haben wir die Möglichkeit, Daten eines Benutzers einzugeben und sie zu übermitteln. Und wir bekommen eine Meldung angezeigt, dass die Daten gespeichert worden sind. Eine Ausgabe der Daten ist derzeit nicht möglich. Die Daten werden an eine Bean übermittelt. Das ist die Bean mit dem Namen "NewUserBean", die per Expression Language erreichbar ist, weil sie über die Named-Annotation verfügt. Wir wollen die so eingegebenen Daten nun wieder ausgeben. Dies ist ohne großen Aufwand möglich. Wir benötigen lediglich ein paar Ausgabeelemente. Lassen Sie uns einmal anfangen mit einem outputLabel-Element. So ein outputLabel-Element kann einen Wert haben, der entweder fix ist, oder aber gebunden an ein anderes Element. Wir machen hier einen fixen Wert und geben unterhalb oder neben diesem Label-Element mit einem Output-Textelement den Wert einer unserer Beans aus, und zwar aus der NewUserBean verwenden wir hier die Eigenschaft "LoginName". Der guten Optik wegen mache ich ein paar Zeilenumbrüche. Und dann kann man das für die anderen Eigenschaften, die wir eingegeben haben, auch machen. Ich habe das schonmal vorbereitet, sodass das hier etwas schneller geht. Das heißt, wir geben für die Ausgabe vom Geschlecht und vom Kennwort die entsprechenden outputLabel- und outputText-Elemente an. Wichtig ist immer, dass die Value-Attribute von entweder outputLabel oder outputText an einer Eigenschaft an einer Bean gebunden sind. Wenn wir nun dieses Beispiel ausführen, dann können wir schon die eingegebenen Werte einmal ausgeben. Das sieht doch schon einmal sehr, sehr gut aus. Ein kleines Problem sehen wir noch, wenn wir hier über das Geschlecht treten. Ganz kurz geschaut: "Geschlecht" ist eine Auflistung. Der entsprechende Wert wird im Moment ausgegeben. Wir können dieses Verhalten ändern, indem wir einen Converter benutzen. Ein Converter ist nichts anderes als eine einfache Java-Klasse, die das Interface "Converter" implementiert. Am Kopf eines Converters gibt es immer die FacesConverter-Annotation, die diesem Converter einen eindeutigen Namen gibt. In diesem Converter interessiert uns nur die Methode "getAsString". Wir wollen letztlich ein Objekt oder den Wert einer Aufzählung, in dem Fall "gender", umwandeln in einen textuellen Wert. Das haben wir hier implementiert. In Abhängigkeit vom Gender-Wert wird dann eben der Text "Männlich", "Weiblich" oder "Unbekannt" zurückgegeben. Nun können wir diesen Converter verwenden. Es gibt zum einen die Möglichkeit, das untergeordnet zu machen, mit Hilfe eines f:converter-Elementes. Dieses f:converter-Element verfügt über ein Attribut "converterId". Und dieses Attribut "converterId" binden wir an den LocalizingGenderConverter, also die Komponente, die wir gerade eben gesehen haben. Wenn ich dieses Beispiel nun ausführe und ein paar Daten angebe, dann werde ich sehen, dass das Geschlecht korrekt ausgegeben ist. In dem Fall steht der deutsche Text da. Es geht allerdings noch ein ganz klein wenig einfacher. Diese f:converter-Komponente ist hier an dieser Stelle nicht zwingend nötig. Die outputText-Komponente verfügt selber schon über eine Converter-Eigenschaft. Und dort können wir denselben Converter referenzieren. Dann kann ich auf das untergeordnete f:converter-Element verzichten. Und Sie sehen: Das Ergebnis ist genau das gleiche wie zuvor. Es wird die korrekte deutsche Umschreibung ausgegeben. Neben einfachen textuellen beziehungsweise singulären Daten können wir auch Listen ausgeben. Listen können wir dabei entweder sehr rudimentär oder doch sehr komfortabel ausgeben. Rudimentär machen wir dies mit Hilfe der ui:repeat-Komponente. Das ist eine sehr rudimentäre Komponente. Sie ist aber äußerst gut geeignet, wenn man die maximale Kontrolle wünscht über das, was geschieht. Etwas weniger Kontrolle, aber dafür wesentlich mehr Komfort hat man mit Hilfe der dataTable. Diese generiert die Ausgabe als HTML-Tabelle. Sehen wir uns einmal an, wie wir eine Menge an bereits eingegebenen Nutzern ausgeben können. Wir befinden uns hier im NewUserController. Das ist die Geschäftslogikklasse, also der Controller, dieser JSF-Applikation. Hier ist letztlich im Moment bemerkenswert, dass wir über eine weitere injizierte Klasse, den userHandler, uns die Benutzer merken, die einmal angelegt worden sind. Wir verfügen ebenfalls über die Möglichkeit, diese Benutzer wieder abrufbar zu machen. Wir wollen gar nicht weiter auf die Implementierung des userHandlers eingehen. Nur soviel sei gesagt: Es gibt noch eine Klasse "User", die einen einzelnen Benutzer darstellt. Dies könnte zum Beispiel das Datenmodell aus einer Datenbank sein. Und es gibt diesen UserHandler, der im Application-Scope liegt. und, wenn Sie so wollen, die Geschäftslogikschicht einer kompletten Applikation darstellen könnte. Wie gesagt: Beide Klassen sind im Moment gar nicht relevant. Viel relevanter ist eine Extra-Seite, die wir in der Zwischenzeit angelegt haben, nämlich "ZeigeUser". In dieser Seite "ZeigeUser" sollen die bereits existierenden User angezeigt werden. Wir machen dies zunächst einmal mit Hilfe des ui:repeat-Steuerelementes. So ein ui:repeat-Steuerelement ist wie gesagt sehr rudimentär. Es definiert zwei Attribute, die wir verwenden müssen: zum einen das Attribut "value". Hier binden wir per Expression Language an den NewUserController und dessen Eigenschaft "users", die wir gerade eben gesehen haben, die eine Liste der User zurückgeben soll. Und mit dem Feld "var" defninieren wir den symbolischen Namen einer Variablen, die für jeden Durchlauf aufgerufen wird beziehungsweise mit Werten befüllt wird und uns dann zur Verfügung steht, sodass wir dann zum Beispiel per Expression Language direkt Ausgaben machen können. Auf dieser Variablen "User", die also quasi den aktuellen Datensatz repräsentiert, geben wir den loginName aus, gefolgt von einem Komma, und dann geben wir das Geschlecht aus. Das machen wir wieder mit einem Output-Textelement. Und das binden wir ebenfalls an den User und dessen Eigenschaft "gender". Auch hier können wir wieder den Converter benutzen, den wir vorhin bereits definiert haben. Wir sprechen ihn über seinen Namen an, "LocalizingGenderConverter". Mit dieser Implementierung, wir machen noch einen Zeilenumbruch, sind wir fertig. Das bedeutet, wir sind nun in der Lage, alle eingegebenen Benutzer dieser Applikation ausgeben zu können. Ich starte ganz kurz die Applikation neu durch, publishe sie neu. Und sobald das geschehen ist, können wir neue Benutzer anlegen, und nach dem Anlegen von ein oder zwei Benutzern sehen wir das Ergebnis. Ich lege einmal einen Benutzer an. Ich klicke auf "Daten übermitteln", lege noch einen weiteren Benutzer an, klicke auf "Daten übermitteln" und lasse mir jetzt die Liste der Benutzer anzeigen. Sie sehen: In dem repeat-Steuerelement werden diese Benutzer angezeigt. Eine Alternative zum Repeat ist die Verwendung der dataTable. Auch darüber hatten wir ja bereits gesprochen. Dies können wir jetzt hier an der Stelle des ui:repeat-Elementes einbauen. Und zwar definieren wir hier eine dataTable. Die dataTable rendert die Inhalte nach HTML. Auch sie verfügt über dieselben beiden für uns relevanten Eigenschaften, nämlich "var", um eine Laufvariable zu halten, und "value", mit der sie an eine Bean gebunden ist, in unserem Fall den NewUserController und dessen Eigenschaft "Users". Die dataTable erlaubt es uns dann, Spalten zu definieren. Das machen wir mit column-Elementen. Und jedes dieser column-Elemente repräsentiert eine Spalte. Um einen Kopf zu definieren, verwenden wir ein f:facet-Element. Der Name dieses Facets ist fest definiert auf "header". Damit können wir angeben: Wie soll das Element heißen? Und die eigentliche Ausgabe können wir dann wieder über Expression Language machen. Das heißt, wir geben direkt hier den Wert der Laufvariablen "User" und von deren Eigenschaft "loginName" aus. Dasselbe können wir nun für die nächste Spalte machen. Hier interessiert uns wieder das Geschlecht. Nur geben wir den Wert diesmal hier wieder nicht direkt aus, sondern wir lassen uns ihn wieder konvertieren mit Hilfe eines outputText-Elementes. Das heißt, wir definieren ein h:outputText-Element, weisen der Eigenschaft "value" den entsprechenden Wert zu und können dann über "converter" den Converter auswählen. Damit haben wir diese dataTable fertig geschrieben. Und wenn wir die Applikation jetzt neu deployen, dann können wir nach einigen Sekunden erneut Benutzer anlegen und diese Benutzer dann einsehen. Ich lege einmal einen Benutzer an, übermittle die Daten, lege noch einen Benutzer an und lasse ihn mir dann anzeigen. Sie sehen: Die Darstellung entspricht der einer klassischen Tabelle. Die dataTable als solches ist noch sehr weit auf Ihre Bedürfnisse anpassbar. Das heißt, Sie können CSS-Klassen für gerade und für ungerade Zeilen vergeben, und für die Kopfzeilen, sodass Sie letztlich das Look and Feel an Ihre Bedürfnisse adaptieren können. Datenausgabe mit JSF ist also nicht sonderlich kompliziert. Es gibt einige Output-Komponenten, beispielsweise outputLabel oder outputText, genauso wie es ui:repeat und die dataTable für die Ausgabe von Listen gibt.

Java EE 7 Grundkurs

Lernen Sie die Grundlagen der Programmierung mit Java EE 7 verstehen und anwenden.

6 Std. 4 min (44 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!