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

Java EE 7 Grundkurs

Ladezeit verringern

Testen Sie unsere 2017 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Die Asynchronous-JavaScript-And-XML-Technologien dienen im JSF-Framework dazu, beim Aktualisieren einer Website ausschließlich bestimmte Bereiche neu zu laden. Dadurch verringert sich die Ladezeit einer Seite wesentlich.

Transkript

AJAX ist eine seit einigen Jahren sehr, sehr populär gewordene Technologie, die es erlaubt, Teile von Seiten zu aktualisieren ohne die komplette Seite neu laden zu müssen. Es gibt dafür leistungsstarke Frameworks und wir haben im JSF bereits eine eingebaute AJAX Unterstützung. In diesem Video werden wir uns mit der eingebauten AJAX Unterstützung auseinandersetzen und wir werden ein kleines Beispiel sehen, in dem wir AJAX verwenden, um einen Seitenübergang von einer zur anderen Ansicht zu gewährleisten. Seit JSF 2.0 gibt es bereits nativen AJAX-Support. Der kann auf verschiedene Arten geschehen. Zum einen programmatisch per Javascript Ressource, zum andern deklarativ mithilfe der AJAX Tags. Der programmatische AJAX-Support wird in den Ressource-Handling-Mechanismus mit eingebunden. Das bedeutet, Sie können per outputScript eine benannte und vordefinierte Ressource, nämlich jsf.js in Ihrer Seite ausgeben. Diese Ressource sorgt dafür, dass Sie AJAX-Support haben. Nach der Einbindung kann dann per Javascript ein AJAX-Aufruf ausgeführt werden. Das kann so aussehen, wie in diesem Beispiel, wo wir einen commandButton haben und dann auf das clientseitige, also im Browser stattfindende Klick-Ereignis reagieren. Die Syntax ist etwas anstrengend, aber Sie haben hier an dieser Stelle die Kontrolle, was wird übergeben und was wird anschließend neu gezeichnet. Das sind nämlich die Parameter execute, wo Name und Passwort übergeben werden und der Parameter render, wo das Statusfeld, das unterhalb definiert ist, aktualisiert wird. Bachten Sie bitte, dass auf dem Formular im oberen Bereich das Attribut pretendId mit dem Wert false steht. Dieses preoebdID-Attribut hat eine besondere Bedeutung, denn die Angabe von prependID mit dem Wert false ist bei Javascript oder AJAX-Aufrufen bitter nötig. Normalerweise ist es nämlich so, dass JSF seinen eigenen Baum an Komponenten baut und diese Komponenten auch eindeutig benennen möchte. Dabei entspricht die ID, also der Identifier der Komponente, wie er dann ins HTML ausgegeben wird, nicht unbedingt zwingend dem, was Sie selber im JSF definiert haben. Und das kann ein riesiges Problem sein, weil Sie ja die Javascripte entsprechend schreiben. PrependID mit dem Wert false sorgt dann dafür, dass die ID exakt so im generierten HTML ankommt, wie sie von Ihnen deklariert worden ist. Das sieht dann so aus, dass Sie auf Ebene des Formelementes prependID mit dem Wert false setzen. Neben dem programmatischen AJAX-Support gibt es ebenfalls noch den deklarativen AJAX-Support. Hier verwenden Sie das f:ajax Tag. Dieses kann sowohl innerhalb einer Komponente stehen als auch um verschiedene Komponenten herum stehen. Das AJAX Tag hat zwei Attribute: execute, dieses gibt an, welche Werte übertragen werden sollen. Es gibt hier auch Platzhalter. So etwas wie @form oder @all oder @this, die eine andere Bedeutung haben. @form gibt an, dass das gesamte Formular, in dem sich die Komponente befindet, übertragen werden soll, @all bedeutet, dass alles auf der Seite übertragen werden soll und @this bedeutet, alles, was sich innerhalb dieser f:ajax Komponente befindet, soll übertragen werden. Das render-Attribut gibt dann an, welche Komponente aktualisiert werden soll. Auch hier geben Sie entweder die ID-Werte von einzelnen Komponenten an oder aber Sie geben wieder mit @form, @all oder @this an, dass eine größere Menge von Komponenten aktualisiert werden soll. Das kann dann so aussehen wie in diesem Beispiel, wo ein commandButton definiert worden ist, der unterhalb, also innerhalb seiner Deklaration, ein f:ajax Element hat. Dort gibt es das execute Attribut und das execute Attribut sagt aus, dass die Felder mit den IDs Name und Password, das sind zwei inputText Elemente, die weiter oben definiert sind, übertragen werden und die Rückgabe vom Server, das Feld Status, das liegt unterhalb, aktualisiert. Lassen Sie uns einmal gucken, wie aufwendig es wirklich ist, so etwas einzubauen in eine Applikation. Wir sehen hier ein Eingabeformular. Diese Eingabeformular ist komplett umgeben mit einem Form Element. Auf Ebene dieses Formelementes ist prependId mit dem Wert false gesetzt. Innerhalb dieses Eingabeformulars gibt es zwei Bereiche. Einmal einen Bereich, in dem eine Eingabe stattfindet und einmal einen Bereich, in dem eine Ausgabe stattfindet. Wir möchten nun, dass wenn eine Eingabe in diesem Bereich stattfindet, die Ausgabe angezeigt wird, ohne dass die komplette Seite neu geladen wird. Für uns zur Kontrolle haben wir im Fußbereich die Ausgabe der aktuellen Uhrzeit. Wir nutzen dazu eine Eigenschaft auf der Klasse newUserController. Diese gibt einfach nur die aktuelle Uhrzeit zurück. Die gleiche Eigenschaft benutzen wir innerhalb der Ein- und Ausgabeelemente. Das heißt, hier in der Überschrift wird die Uhrzeit angezeigt und bei der Ausgabe wird die Uhrzeit ebenfalls in der Überschrift angezeigt. So haben wir immer eine Kontrolle, ob die komplette Seite neu geladen worden ist. Nun müssen wir nur noch die Stellen suchen, an denen wir mit AJAX arbeiten wollen. Und zwar machen wir das idealerweise bei commandButtons oder bei commandLink Elementen. Diese sind nämlich dafür zuständig, Formulare zu versenden. Die Verwendung ist jetzt hier sehr einfach. Wir fügen ein f:ajax Element ein und sagen, es soll das Formular versandt werden und es soll auch neu gezeichnet werden. Das machen wir über das @form Statement. Wir haben noch einen zweiten Button. Auch hier fügen wir den selben Code ein. Das heißt, was soll übertragen werden? Wird ja immer über execute angegeben. @form bedeutet, das komplette Formular. Und was soll gerendert werden? Wird über render angegeben. @form bedeutet, das komplette Formular. Damit sind wir hier fertig. Nun deployen wir die Applikationen noch und nachdem wir dies erledigt haben, können wir die Seite aufrufen und anschauen, ob es erstens funktioniert und zweitens, ob sich die Uhrzeit ändert. Man beachte, wir haben hier oben die Ausgabe der Uhrzeit und da unten die Ausgabe der Uhrzeit. Dieser innere hellgraue Bereich wird aktualisiert per AJAX, der äußere Bereich bleibt stehen. Sie sehen, die Uhrzeit hier oben ändert sich, die Uhrzeit da unten bleibt unverändert. Genau dasselbe, wenn ich es noch mal mache. Auch hier ändert sich wieder die Uhrzeit im oberen Bereich, aber nicht im unteren Bereich. Sie haben in diesem Video gesehen, wie einfach es sein kann, mit AJAX im JFS-Umfeld zu arbeiten. Wichtig ist dabei, es gibt zwei Möglichkeiten: Entweder programmatisch oder deklarativ. In aller Regel ist der deklarative Ansatz mithilfe der f:ajax Komponente um einiges bequemer und schneller zu implementieren. Sie sollten dies in Ihren Applikationen dort machen, wo es tatsächlich Sinn machen kann.

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...
 
Hersteller:
Software:
Exklusiv für Abo-Kunden
Ihr(e) Trainer:
Erscheinungsdatum:07.11.2014
Laufzeit:6 Std. 4 min (44 Videos)

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!