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

Mehr AJAX!

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Um Benutzerfreundlichkeit im Umfeld einer Web-Applikation umzusetzen, bietet sich AJAX an. Damit verhindern Sie beispielsweise, dass eine Seite beim Betätigen eines Buttons wieder zurück zum Kopf scrollt.

Transkript

Zu einer guten Applikation gehört es, dass sie eine gute Benutzerfreundlichkeit hat. Und es ist beispielsweise nicht sonderlich benutzerfreundlich, wenn man, nur wenn man auf den Button klickt, später wieder zu genau der Stelle scrollen muss, an der man auf dem Button geklickt hat. Und das passiert leider, wenn wir Formulare hin und her schicken und keine AJAX benutzen. Aus diesem Grund werden wir diesem Video die Datensatzbearbeitungsseite noch mal anpassen und wir werden den Buttons, die sich dort in Maße drin tummeln, um Datensätze zu löschen, um Datensätze neu anzulegen, um in Editiermodus zu wechseln und so weiter und so fort, AJAX-Funktionalitäten verpassen, sodass das Ganze mit sehr wenig Aufwand deutlich benutzerfreundlicher gestaltet wird. Sehen wir uns die Applikation noch einmal in ihrem bisherigen Zustand an. Wenn wir uns angemeldet haben und einen neuen Datensatz anlegen wollen, war es bisher natürlich kein Problem. Hier. Die Stammdaten einzugeben. Sobald wir zum Beispiel eine Adresse hinzufügen wollten und noch einen Adressdatensatz hinzufügen wollten, und noch einen Adressdatensatz hinzufügen wollten, sprang die Seite immer an den Kopf der Seite zurück. Hintergrund ist natürlich, dass es Formulare hier sind, die per Post funktionieren. Das bedeutet, das die Daten an den Server zurückgeschickt werden und die komplette Seite neu gerendert wird und dann eben wir wieder am Kopf der Seite landen, weil die gesamte Seite neu aufgebaut wird. Um das zu verhindern werden wir nun die Buttons, die sich hier in dieser Seite befinden, soweit sinnvoll, mit AJAX versehen. Der einzige Button, bei dem wir das nicht machen werden, ist der Abbrechen Button, da mach es schlichtweg keinen Sinn. Dieses Hinzufügen von AJAX Funktionalitäten setzt voraus, dass wir ein Formular haben, bei dem die Eigenschaft pripend.Id auf dem Wert false gesetzt ist. Das ist hier bei diesem Formular der Fall. Nun können wir uns einfach den ersten Button suchen, über den wir stolpern werden, und das ist hier, im Aktionsbereich der Adressdaten, der ersten CommandButton. Und wir werden diesen CommandButton so umbauen, dass er AJAX benutzt. Das Ganze ist sehr einfach, wir fügen einfach innerhalb dieses Buttons ein f.ajax-Element mit ein, und setzen hier die Eigenschaft execute auf Form und die Eigenschaft Render auf all. Damit wird alles, was sich im Bereich dieses Formular befindet neu gezeichnet. Das ist, was wir gerade eingefügt haben. Kopieren wir einfach auf die anderen Buttons. Das ist nach einigen Sekunden dann auch schon erledigt. Und ab dem Moment, wo wir die Applikationen dann neu deployed haben, werden alle Buttons, die wir so mit AJAX affiziert haben, in der Lage sein, Dinge auszuführen, ohne dass die komplette Applikation, die ganze Seite neu rendern und ausliefern muss. Wir deployen nun die Applikation und werden uns das Ergebnis unserer Tätigkeiten einmal anschauen. Wir melden uns also neu an der Applikation an und wechseln nun zum Bearbeiten eines Datensatzes und klicken hier einmal auf Kommunikationsdaten bearbeiten. Und wir sehen, wir müssen die Seite nicht in dem Sinne neu laden, wir müssen nicht mehr zu derselben Stelle wieder hin scrollen, sondern die Seitenposition bleibt erhalten. Und das ist im Sinne von Benutzerfreundlichkeit natürlich um einiges angenehmer, als die alte Implementierung. Wir haben in diesem Video das Problem gelöst, dass die Detailseite, beziehungsweise die Dateneingabeseite nicht über AJAX-Fähigkeiten verfügte und das haben wir gemacht, indem wir bei allen Buttons untergeordnet das f.ajax-Element hinzugefügt haben und sie damit in AJAX-fähige Buttons verwandelt haben. Und nun wird die Seite im Hintergrund neu geladen und es werden nur die sichtbaren, beziehungsweise die notwendigen Bereiche der Seite ersetzt, ohne dass die komplette Seite neu geladen wird, und wir uns am Kopf der Seite wiederfinden.

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!