Java EE 7: Web Services

Webfrontend mit dem Backend kommunizieren lassen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Nachdem die Seite lokal funktionsfähig ist, müssen nun noch die serverseitig bereitgestellten Komponenten - WebSocket und RESTful Service - angesprochen werden. Am Ende verfolgen Sie die komplette Applikation im Einsatz.

Transkript

Die beste Webapplikation nutzt uns nichts, wenn wir sie nicht mit einer Datenquelle verknüpfen. In diesem Fall ist das der RESTful Service, der angesprochen werden soll und wir wollen ebenfalls den WebSocket Endpoint ansprechen. In diesem Video werden wir besprechen, wie wir das mit Hilfe von AngularJS umsetzen können. AngularJS hat dabei die Aufgabe, die Aufrufe zum RESTful Service zu konsolidieren. Das heißt, sie finden innerhalb von einem Controller statt und sind dort als eigenständige Methoden implementiert. Ebenfalls wird innerhalb des AngularJS-Controllers der WebSocket erzeugt, mit dem die Webapplikation Benachrichtigungen von Serverseite aus erhalten kann. Wir werden uns nun anschauen, wie wir dies umsetzen können. Hier auf Ebene dieses Controllers werden wir zunächst einmal das Customers Array so umschreiben, dass es nicht mehr mit Standardwerten arbeitet. Zu diesem Zweck entfernen wir das anonyme Objekt, das dort drinsteht und werden dann dafür sorgen, dass die Daten vom Server geladen werden. Während die Daten geladen werden, wir das Flag isLoading auf true gesetzt werden. Es sind diverse Komponenten in der HTML- Seite an dieses Flag gebunden und sie werden deaktiviert, sobald isLoading den Wert true hat. Ändert sich der Wert von isLoading dann werden die Komponenten wieder aktiviert. Das ist zum Beispiel bei Buttons der Fall, sodass diese Buttons – solange ein Ladevorgang andauert – eben nicht vom Benutzer ausgewählt werden können und wir nicht versehentlich mehrere Anfragen an den Server senden. Die erste Methode, die wir implementieren wollen, ist die Methode loadCustomers. Diese Methode hat die Aufgabe, die Liste der schon definierten Kunden zu laden. Zu diesem Zweck setzen wir zunächst das gerade besprochene isLoading Flag auf true und signalisieren damit, dass ein Ladevorgang stattfindet. Nun können wir einen $http.get()-Request auslösen, der auf die Adresse api/v1/customers/all zeigt und dem wir, um ein Cashing des Browsers zu verhindern, noch einen Zufallswert hinzufügen, anderenfalls kann es passieren, dass der Browser den Call gar nicht ausführt, sondern sagt, die Daten sind ja schon da und dann eben nicht mehr aktuelle Daten anzeigt. Nun implementieren wir noch den success Handler, der aufgerufen wird, wenn der Call erfolgreich war. Das ist eine Methode und dieser Methode werden die geladenen Daten übergeben. Die geladenen Daten binden wir an die customers-Auflistung, denn wir bekommen vom Server ein Array von Kunden zurück. Wir setzen nun noch das Flag isLoading auf false, damit zum Beispiel ein Aktualisieren- Button wieder benutzbar ist und wir setzen auch noch das Flag isEditMode auf false, damit die Anzeige wieder auf die Übersichtsseite umspringt. Damit haben wir die Ladefunktion implementiert. Die nächste Funktion, die wir implementieren sollten, ist die Funktion storeCustomer. Diese Funktion ist im Moment so implementiert, dass sie nur lokal in das Array der Kunden einen neuen Eintrag hinzufügt. Dies wollen wir ändern, sodass die Daten an den Server übertragen werden. Aus diesem Grund werden wir die Implementierung, die sich im Moment innerhalb der Methode befindet, löschen und müssen nun zunächst entscheiden, ob es sich um einen schon existierenden Kunden handelt, der geändert wurde, oder ob es sich um einen neuen Kunden handelt. Wir können dazu das Feld ID als Unterscheidungsmerkmal heranziehen. Der aktuelle Kunde, der gerade behandelt wird, befindet sich innerhalb der Variablen currentCustomer und verfügt entweder über eine ID oder eben nicht. Er verfügt dann nicht über eine id, wenn er neu angelegt worden ist. Existiert er bereits, dann hat er eine id und dann muss deren Wert grösser als 0 sein, um als ein schon existierender Kunde erkannt zu werden. Sollte dem so sein – und das haben wir gerade mit dieser Abfrage ausgedrückt – starten wir einen $http.put() Request und zwar auf die Adresse "api/v1/customers/update" mit dem aktuellen Kunden als Parameter. Wenn dieser Aufruf erfolgreich war, wird der success Handler aufgerufen und das ist wieder eine Funktion. Innerhalb dieser Funktion werden wir nun einfach, die gerade eben gesehene loadCustomers Methode aufrufen, um die Kundenliste neu laden zu lassen. Sollte der Kunde noch nicht existieren, senden wir einen http.post() Request ab auf die Adresse "api/v1/customers/create" ebenfalls unter Eingabe des sich gerade in Bearbeitung befindlichen Nutzers und Kunden. Hier implementieren wir den success Handler und lassen die Kundenliste neu laden. Damit ist die Implementierung der Übertragung eines existierenden Kunden, also das Ändern eines Kunden oder die Übertragung eines neuen Kunden an den RESTful Service abgeschlossen. Die nächste Funktionalität ist deleteCustomer. deleteCustomer wird aufgerufen, um einen Kunden zu löschen. Hier setzen wir einen $http.delete- Request ab und zwar auf die Adresse "api/v1/customers/delete" und hier gibt es einen Pfadparameter und da nehmen wir die ID des sich aktuell in Bearbeitung befindlichen Kunden und übergeben die zusammen mit einer kleinen Zufallszahl, um zu verhindern, dass der Browser das casht. Auch hier implementieren wir wieder den success Handler und lassen die Kundenliste neu laden, indem wir die Methode loadCustomers aufrufen. Nun werden Sie sich schon mehrfach gefragt haben, was ist denn eigentlich der currentCustomer, wo kommt diese Variable überhaupt her? Das Setzen der Variablen currentCustomer geschieht innerhalb der Methode showDetails. Die ist hier bis eben noch dummy- technisch implementiert worden und die werden wir jetzt auch entsprechend produktiv implementieren. Hier findet ein $http.get()-Request statt und zwar auf die Adresse "api/v1/customers/" dann die Angabe einer id, das ist die ID des übergebenen Datensatzes. Diese Methode showDetails wird nämlich aufgerufen in der großen Kundenliste, wenn ich dort auf einen Eintrag drücke, dann wird der entsprechende Datensatz mitübergeben und dessen ID kann ich hier auswählen. Auch hier füge ich, um Cashing zu verhindern, eine Zufallszahl an, indem ich sie durch ein Fragezeichen abtrenne. Im success Handler kann ich nun die übergebenen Daten nehmen, den Editiermodus einschalten und die Daten in der bereits angesprochenen Variablen currentCustomer speichern. Darüber hinaus speichere ich eine Kopie der Daten in der Variablen currentCustomerOriginal und die erzeuge ich über die copy-Funktion von AngularJS. Der Hintergrund ist der, dass ich dann auf dieser Ebene dann eine undo-Funktionalität implementieren kann. Sie dürfen nicht vergessen, AngularJS hat die Zwei-Wege-Datenbindung, das bedeutet, wenn ich in einem Feld einen Wert eingebe, dann landet er auch sofort im entsprechenden Objekt. Und weil ich das nicht möchte, sondern auch eine Abbrechen-Funktionalität implementieren möchte, speichere ich den Datensatz nochmal in einer Extra-Variablen zwischen. Das ist letztlich die Funktionalität, die wir benötigen, um die Dateidaten eines Kunden zu laden und dann den Editiermodus einzuschalten und die Daten in dem Feld currentCustomer zwischen zu speichern. Nun muss ich mich lediglich noch um die Implementierung des WebSocketClients kümmern. Das mache ich, indem ich eine Instanz der WebSocket Klasse anlege und diese zeigt auf die Adresse "ws://localhost:8080" – das ist jetzt in dem Fall fest verdrahtet, das würden Sie natürlich in Natura so nicht machen – "CustomerManagementWeb/customer", das ist der Endpoint für den WebSocket, den wir definiert haben. Wir überschreiben nun noch die Methode onmessage und innerhalb dieser Methode rufen wir die direkt darüber befindliche Methode showMessage auf, die dann ihrerseits die per jQuery übergebene Nachricht – an die kommen wir über msg.data heran – anzeigt und nach zwei Sekunden wieder ausblendet. Zuletzt sorgen wir dafür, dass wenn der scope sich nicht im Editiermodus befindet, die Daten automatisch neu geladen werden, um die Ansicht immer möglichst aktuell zu halten. Sollten wir uns gerade im Editiermodus befinden, dann soll nichts passieren, denn es soll ja nicht passieren, dass die eingegebenen Daten plötzlich weg sind. Damit sind wir bis auf eine Kleinigkeit durch mit der Implementierung. Alles was jetzt noch fehlt ist das initiale Laden der Daten und das machen wir, indem wir im Controller die Methode loadCustomers() direkt aufrufen. Nachdem Sie die Applikation dann neugestartet haben und neu deployed haben, ist sie einsatzfähig und wir können sie im Browser aufrufen. Eventuell vorhandene Daten werden gelöscht werden, denn wir haben auf hibernate-Ebene immer noch die Eigenschaft hbm2ddl.auto auf create gesetzt. Nun können wir einen neuen Kunden anlegen. Wir können diesem Kunden eine Adresse zuweisen und können den neu angelegten Datensatz dann auch speichern. Da wir uns in der Entwicklungs- umgebung befinden, sehen wir die entsprechenden Hibernate Ausgaben auch noch. Wir können diesen Datensatz nun editieren und auch die Änderung wieder speichern lassen. Ebenfalls ist es möglich, eine Adresse zu löschen, auch das wird an den Server erfolgreich übertragen, genauso wie es möglich ist, den gesamten Datensatz zu löschen. Wenn wir parallel mit einem zweiten Browser arbeiten, dann können wir auch sehen, wie die WebSockets ihre Wirkung zeigen. Ich habe zu diesem Zweck parallel einen Internetexplorer gestartet und werde hier nun einen neuen Datensatz anlegen. Sie sehen, sobald ich das gemacht habe, wir er auf beiden Seiten entgegengenommen und Änderungen werden ebenfalls sofort übertragen. In diesem Video haben wir die Implementierung unserer Kundenverwaltung abgeschlossen, wir haben ein WebSocket gebunden und wir haben die benötigten Aufrufe auf den RESTful Service implementiert, damit ist unsere Kundenverwaltung komplett und wir können an die Verfeinerung der Implementierungen gehen.

Java EE 7: Web Services

Steigen Sie ein in die Java-Enterprise-Welt und lernen Sie, wie Nachrichten ausgetauscht und Dienste definiert werden.

5 Std. 13 min (30 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!