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: Geschäftsanwendungen

Seite: Mail versenden und AJAX einsetzen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
AJAX dient dem Laden und Aktualisieren von Inhalten im Hintergrund. In diesem Video nutzen Sie die Technik, um die Mail-Versand-Seite zu implementieren. Eine explizite Navigationsregel erlaubt, implizite Navigationsregeln zu überschreiben.

Transkript

AJAX stellt eine sehr beliebte und sehr gut geeignete Möglichkeit dar, die Akzeptanz einer Webseite durch Benutzer zu verbessern, denn es wird beim Einsatz von AJAX nicht immer die komplette Webseite neu geladen, sondern nur Teile dieser Seite. Dadurch kann der Benutzer leichter und besser mit der Seite interagieren. In diesem Video werden wir AJAX deshalb benutzen, um den Mailversand aus Sicht des Frontends fertigzustellen. Den Versand einer E-Mail-Nachricht erledigen wir über eine xhtml-Page, die sich im Web-Content-Bereich befindet. Wir legen diese Seite an und wir nennen sie None Wir verwenden das Blank Facelet Page Template․ Und die Seite verwendet unser selbst definiertes Template, um ein schickes Layout zu haben. Zunächst einmal definieren wir nun per ui:define den Inhalt des Title-Bereichs des Templates und hier geben wir eine Nachricht aus, dass wir eine Nachricht an einen Benutzer senden möchten. Nun können wir uns um die Implementierung des Content-Bereiches kümmern. Zunächst einmal binden wir die MailSenderBean, die wir hier intern benutzen werden, an den Übergabeparameter id, über den der Datensatz, für den wir eine Nachricht versenden wollen, identifiziert ist. Ebenfalls sorgen wir dafür, dass wir die entsprechende Bean-Initialisierung vornehmen, bevor die Seite gerendert wird. Nun legen wir ein Formular an. Über diesem Formular setzen wir die Eigenschaft prependID auf den Wert fals zum Verhindern damit dass GSF eigene ID-Kürzel vor die eigentlichen IDs der Elemente setzt. Das ist sehr wichtig für AJAX. Innerhalb dieses Formulars transportieren wir nun in einen versteckten Formularfeld den übergebenen ID-Wert. Ebenfalls präsentieren wir eine Überschrift. Und definieren wir eine panelGroup. PanelGroup ist eine Liste von Elementen, bzw. eine panelGrout umschließt eine Liste von Elementen und wir lassen diese panelGroup nur dann darstellen, wenn die Eigenschaften mailSent der MailSenderBean den Wert fals hat. Das heißt, hier kommt der Inhalt rein, der dargestellt wird, wenn wir noch keine Nachricht versendet haben. Eine zweite panelGroup definieren wir und dort kommt der Inhalt rein, der dargestellt wird, wenn eine Nachricht versendet worden ist. Das heißt, wir binden deren rendered-Attribut an die Eigenschaft mailSent des mailSenders und diesmal überprüfen wir darauf, ob diese Eigenschaft den Wert true hat, also wahr ist. Diese Eigenschaft existiert noch nicht, die müssen wir noch anlegen. Innerhalb der ersten panelGroup lassen wir nun ein Eingabeelement für die Überschrift, also für den Betreff einer Nachricht erscheinen und wir geben hier dem Benutzer auch die Möglichkeit, in einer Textarea, also ein mehrzeiliges Textfeld, die eigentliche Nachricht einzugeben. Darüber hinaus werden hier zwei Buttons dargestellt, zumindest visuell. Einer dieser Buttons ist allerdings ein Link, und dieser Link mit dem Titel Abbrechen führt wieder zurück auf die vorherige Seite, also die Detailansicht eines Datensatzes. Der Command-Button, der unterhalb oder neben, dann optischen neben dem Link definiert sein wird, führt den eigentlichen Versand der Nachricht aus. Hier verwenden wir AJAX, um das gesamte Formular im Hintergrund zu übertragen und danach die komplette Seite neu zu rendern. Auf die Art und Weise wird der Benutzer nicht mit dem üblichen weißen Seitenhintergrund konfrontiert werden, sondern wirkt dann sehr unmittelbar, wenn die Nachricht versendet worden ist, dass wir die andere panelGroup anzeigen. Und in dieser anderen panelGroup lassen wir nun eine entsprechende Bestätigungsnachricht anzeigen, das heißt, es gibt eine entsprechende Überschrift und es gibt dann ein Link, der zurückführt auf die Detailseite. Um das ganze UI noch ein wenig abzurunden und ein wenig schicker zu machen, fügen wir jetzt noch zum unterem Rand in eine Leerzeile ein, damit sieht das Ganze dann hinterher nicht ganz so gedrängt aus. Damit haben wir die Mailversandt-Seite umgesetzt. Wir müssen nun allerdings noch die mailSent Eigenschaft der MailSenderBean implementieren und wir müssen die dort existierende Implementierung für die Methode Sent etwas umschreiben, denn bisher sendet uns diese Methode zurück auf die vorherige Seite und das wäre genau das, was wir nicht wollen. Wir wollen nämlich eine Bestätigungsmeldung anzeigen. Nachdem wir die SendMailBean geöffnet haben, können wir hier nun eine zusätzliche Eigenschaft einfügen, nämlich die private booliansche Eigenschaft mailSent und für die lassen wir uns über das Source-Menü die entsprechenden Geter und Setter generieren und lassen die an geeigneter Stelle einfügen. Nun müssen wir noch die Sent-Methode umschreiben, bei der es ist ja bisher so, dass eine Nachricht versandt wird, asynchron und das wird dann, so es ist hier jedenfalls implementiert, zur vorherigen Seite zurückkehren. Das werden wir nun ändern. Wir werden in dieser Methode lediglich der variablen mailSent den Wert true zuweisen und die Methodenrückgabe ist ab sofort void. Damit haben wir die SendMailBean soweit angepasst und wir können nun einmal unsere Applikationen auf dem Server deployen und eine Nachricht versenden. Wenn die Applikation gestartet ist, können wir uns mit einem Admin-Account an der Applikation anmelden, einen Datensatz auswählen und auf den Button Nachricht klicken. Sie werden allerdings feststellen, dass da nichts passiert. Der Grund dafür besteht darin, dass in der in der details.xhtml- Seite, wo sich diese Navigation befindet, eine falsche Information hinterlegt ist. Wenn wir die Seite einmal öffnen, können wir uns das auch anschauen. Und zwar zeigt der Nachrichtenlink auf das outcome=”/message. Das heißt sie wird vermutet, dass es eine Datei namens message.xhtml gibt. Die gibt es aber nicht. Die Datei heißt None Nun wäre dies ein leichtes, das an dieser Stelle zu ändern, aber ich möchte die Gelegenheit nutzen, Ihnen eine andere Möglichkeit vorzustellen, wie Sie solche outcomes dann auf die korrekten Adressen umbiegen können. Und das können wir mit Hilfe der faces-config -Konfigurationsdatei machen, in sich in Web-Inf Verzeichnis befindet. Und hier in dieser faces-config-Konfigurationsdatei, wenn Sie den Reiter tree unten aufrufen, finden Sie einen Bereich der Navigation Rules heißt. Und hier können wir eine Navigationsregel anlegen. Und hier legen wir an, dass für eine Navigationsregel, die in unserem Falle jetzt von einem beliebigen View kommt, ausgedrückt von den Stern, wir für ein Outcome, nämlich Mesage eine bestimmte View anzeigen werden, nämlich sent.xhtml. Das bedeutet wir mappen das Outcome message auf die View sent.xhtml. Wenn wir das dann speichern und die ganze Applikation noch einmal neu auf dem Server deployen, dann wird nach einer erneuten Anmeldung an der Applikation auch der Aufruf dieser Nachrichtenseite funktionieren. Wir melden uns also an und können nun auf den Button Nachricht klicken und gelangen dann zur Detailseite. Solche explizite Navigationsregeln, wie wir sie eben hiterlegt haben, überschreiben stets die implizite Navigationsregeln. Das heißt, Sie können Sie bewusst einsetzen. Und jetzt können wir eine Nachricht versenden. Und wenn wir nun auf die Schaltfläche Senden klicken, werden wir sehen, dass das Ganze per AJAX dann jetzt auch hier aktualisiert wird. Die Seite hat sich nicht neu geladen, sondern nur ein bestimmter Teilbereich wurde aktualisiert. Ein Klick auf zur Datailseite zurück führt uns dann wieder zu vorherigen Seite zurück. In diesem Video haben wir unsere Mailversand-Seite mit Hilfe von AJAX implementiert. Zu diesen Zweck haben wir beim commandButton ein None und dieser None die mit diesem Button verknüpftes ist, dann per AJAX ausgeführt wird. Damit das Ganze funktioniert, haben wir beim Form-Element das Attribut prependId mit dem Wert false gesetzt. Darüber hinaus haben wir aufgrund eines Fehlers in unserer Implementierung die Gelegenheit genutzt einen expliziten Navigationsfall in der facec-config.xml –Datei einzufügen und auf die Art und Weise die impliziten Navigationsregeln zu überschreiben.

Java EE 7: Geschäftsanwendungen

Verfolgen Sie, wie eine komplette Business-Applikation unter dem Einsatz des gesamten Java-Enterprise-Techologiestacks ensteht.

5 Std. 2 min (39 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!