Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Java EE 7: Geschäftsanwendungen

Kundenliste per AngularJS anzeigen

Testen Sie unsere 2019 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Die Anzeige dynamischer Daten auf der Webseite kann auf unterschiedliche Arten geschehen. Der Einsatz eines JavaScript-Frameworks wie AngularJS bietet den Vorteil, dass die Seite schnell ausgeliefert wird und die Daten dynamisch nachgeladen werden können.

Transkript

Wenn Sie dynamische Daten auf einer Webseite anzeigen wollen, haben Sie verschiedene Möglichkeiten. Eine der spannendsten Möglichkeiten ist, ein Framework wie beispielsweise AngularJS zu verwenden, um die Webseite erst einmal auszuliefern und dann erst wenn sie beim Kunden geladen worden ist, die Daten vom Server nachzuladen. Genau das werden wir in diesem Video einmal implementieren, wir werden AngularJS einsetzen, um die Daten, die uns der RESTful Service anbietet, nämlich die Liste unserer Kunden, an die Startseite zu binden und dort auch durchsuchbar zu gestalten. AngularJS selbst ist ein JavaScript basierendes Framework, das von der Firma Google herausgebracht worden ist. Und AngularJS ist deswegen so spannend, weil es uns erlaubt, einen MVC-Ansatz für HTML-Webseiten umzusetzen. M steht für Model und bezieht sich auf die Daten, die wir darstellen wollen. V steht für View und das ist die HTML-Seite und C steht für Controller und das ist eine AngularJS-Komponente und die erlaubt es uns unsere Seite per JavaScript zu manipulieren ohne dass wir viel JavaScript Code schreiben müssen. Das Ganze ist gut mit JSF kombinierbar, denn wir können Daten zum Beispiel schon in der Seite hinterlegen, die dann per AngularJS angezeigt werden, bevor die Seite ausgeliefert wird oder wir nutzen es wie in unserem Fall, um ein RESTful Service anzubinden. Und genau das werden wir nun einmal machen. Im ersten Schritt müssen wir AngularJS überhaupt erstmal herunterladen. AngularJS finden Sie unter der Adresse https:// angularjs.org. Hier können Sie auf den Download Button klicken und wählen das Stable-Release im Minifeid und laden das Ganze dann herunter. Nach erfolgreichem Download können wir AngularJS dann unserem Projekt hinzuzufügen. Zu diesem Zweck ziehen wir es auf den js Unterordner des resources Ordner und haben damit AngularJS in unserem Projekt hinterlegt. Nun müssen wir in unsere Index-HTML-Seite ein zusätzliches ui:define-Element einbauen. Dieses ui:define-Element überschreibt den Inhalt des Scripts-Elementes, dass wir im Template definiert haben. Und hier fügen wir per outputScript Anweisung aus der Bibliothek js das gerade eben geladene angular.min.js JavaScript hinzu und haben damit grundsätzlich AngularJS in die Seite schon mal eingebunden. Damit die Seite nun funktioniert, werden wir um die beiden Rows, die wir definiert haben, noch ein div-Element herum anlegen. Anderenfalls hätte AngularJS Schwierigkeiten vernünftig zu arbeiten. Warum? Das werden wir gleich klären. Nachdem wir dies erledigt haben, können wir nämlich den Einstiegspunkt für AngularJS definieren und dieser Einstiegspunkt muss so weit als möglich oben im Tree der Seite sich befinden. Und wenn wir das zum Beispiel nur bei einem div-Element machen würden, dann wäre AngularJS bei dem zweiten div-Element nicht bekannt. Der Einstiegspunkt ist ein data-ng-app-Element. Das ist quasi der Angular internen Name unserer Applikation und zu einer Applikation oder Seite gehört auch ein Controller das drücken wir aus über data-ng-controller und der Controller nennt sich cmStartViewController. Nun können wir unser Sucheingabefeld in den Kontext von AngularJS bringen, dies machen wir mit einer Angular data-ng-model Direktive und zwar wird dieses Feld an die Variable search gebunden. Der Button zum Suchen, der wird gebunden über eine data-ng-click Direktive und beim Klick darauf rufen wir eine noch nicht existierende Methode applySearchFilter auf, die wird den Suchfilter dann nämlich auf die Daten anwenden. Und fragen Sie sich natürlich wo kommen diese Daten her oder wo sind die? Nun die Daten werden innerhalb der Tabelle angezeigt. Und zwar lassen wir die Tabellenzeile, die wir definiert haben mit den Dami-Daten, nun als Vorlage funktionieren. Und zu diesem Zweck fügen wir hier ein data-ng-repeat-Element ein. Und sagen hier, das wird durchlaufen für alle Customer-Elemente, die sich in customers befinden und wir filtern anhand einer Eigenschaft searchFilter, die auch noch nicht existiert. Nun beginnt etwas Angular Magie, wir lassen nämlich per Datenbindung für jeden Customer, dessen Eigenschaft lastName und dessen Eigenschaft firstName ausgeben, der Geburtstag, der befindet sich in der Eigenschaft birthday des Customers und wir lassen diese Eigenschaft nun als Datumswert ausgeben. Diese Implementierung nehmen wir vor, indem wir im Unterordner js eine neue JavaScript-Datei anlegen. Wir können dies über den Assistenten machen und hier ein JavaScript Source File anlegen, die Datei heißt custom.js. Und der erste Schritt dadrin besteht nun darin, dass wir zunächst einmal die Adresse des Webservices hinterlegen. Im zweiten Schritt können wir dann ein AngularJS Modul anlegen. Wichtig ist, dass dieses Modul genauso benannt ist, wie es in der index.xhtml Datei deklariert worden ist. Diese Einbindung gesteht in der in der index.xhtml Datei und zwar unterhalb der Stelle, wo wir AngularJS eingebunden haben und hier legen wir noch einmal eine outputScript Anweisung an, die diesmal auf unser Teil custom.js verweist. So damit haben wir AngularJS komplett eingebunden und können nun unsere Applikation einmal starten. Der Start des Servers dauert unter Umständen einige Sekunden und nachdem diese Zeit abgelaufen ist, können wir dann sehen wie sich unsere Applikation verhält. Wir können dies entweder im in Eclipse integrierten Browser machen oder wir starten den Browser unseres Vertrauens. Und wenn wir dann hier die Adresse der Seite aufrufen, werden wir sehen, dass unsere Applikation Daten liefert und wir können auch feststellen, dass die Suche funktioniert, ich suche nach etwas, was nicht existiert und es wird gefiltert und ich suche etwas, was existiert und es wird gefunden. Das läuft also alles genau so, wie wir uns das vorgestellt haben. In diesem Video haben uns damit auseinandergesetzt wie wir AngularJS in unsere Applikation einbinden können und wie wir unsere Applikation so umgestalten können, dass sie tatsächlich mit AngularJS und einem Controller funktioniert. Zu diesem Zweck haben wir ein Modul und ein Controller definiert und verschiedene Komponenten per AngularJS Direktive an unseren Controller gebunden. Ebenfalls haben wir unseren Controller als solches implementiert und lassen ihn die Daten vom Server abholen.

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)
Super Sache!
SL.
Sehr empfehlenswertes Lernvideo welches viele Möglichkeiten von Java EE anhand eines praktischen Beispiels kurz und knackig vorstellt. Ich bin ziemlich neu im Java-Umfeld unterwegs und war durch das Mitschreiben während des Videos in der Lage, eine eigene umfangreiche Applikation auf die Beine zu stellen.

(Sehr kleiner Wehrmutstropfen: Beim Video "Kundenliste per AngularJS anzeigen" wird das Erstellen des Controllers bei Spielzeit 6:20 leider nicht erklärt. Dank des Abspannes am Schluss war ich aber in der Lage den Code zu übernehmen.)
 

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!