Alle bisherigen Konzepte hatten einen großen Nachteil: die Vermischung von Darstellungskomponenten (HTML-Code) und Anwendungslogik (Java- bzw. JavaScript-Code). Keine der zuvor besprochenen Technologien ermöglichte eine nach der Model-View-Controller-Architektur empfohlene klare Trennung dieser Verantwortungsbereiche. Das JavaServer Faces (JSF)-Framework ist die zurzeit modernste Java EE-Technologie zur Programmierung von Web-Anwendungen.
JavaServer Faces ist ein Framework, das eine Reihe von Bausteinen vereint, die Jahre zuvor teilweise unabhängig voneinander entwickelt wurden. Es handelt sich dabei vor allem um häufig benötigte Komponenten der Darstellungsschicht (z.B. Ein- und Ausgabefelder) sowie eine speziell für diesen Zweck entwickelte Sprache, um die Komponenten auf eine sehr einfache und intuitive Weise mit den Attributen von Java-Klassen aus dem Datenmodell zu verbinden. Auch die Programmierung von Anwendungslogik zur Navigation und Validierung von Benutzereingaben wird deutlich erleichtert. Viele Standardvalidierungsregeln, wie zum Beispiel die Prüfung von Pflichtfeldern oder gültigen Datumsangaben, sind bereits in JSF eingebaut.
Viele Besucher einer JSF-Seite werden keinen optischen Unterschied zwischen einer manuell erstellten HTML-Seite und einer JSF-Seite
feststellen. Die besonderen Merkmale von JSF beziehen sich vielmehr auf serverseitige Mechanismen, die dynamisch passend zu der HTML-Anfrage
eines Benutzers HTML-Code produzieren. Sie sind in einem sequenziellen Ablauf angeordnet und werden unter dem Begriff
JSF-Lebenszyklus zusammengefasst. Er wird jedes Mal gestartet, wenn eine HTML-Anfrage beim Server eintrifft.

Im ersten Schritt wird der "Komponentenbaum" aufgebaut. In der Informatik werden derartige Datenmodelle Baum oder Baumstruktur genannt, weil
sie sich ausgehend von einem Wurzelelement (z.B. dem <body>-Tag) beliebig tief bis in viele einzelne Blätter hierarchisch verzweigen.
Der JSF-Komponentenbaum enthält - unter anderem - zu jeder HTML-Komponente der Webseite (Überschrift, Eingabefeld, Absatz ...) ein
Java-Objekt. Dann werden die Parameter aus der HTML-Anfrage (z.B. der in einem Formularfeld eingegebene Vorname) ausgelesen und in das passende
Java-Objekt gespeichert. Anschließend werden die Benutzereingaben validiert. Es wird zum Beispiel überprüft, ob alle Pflichtfelder
ausgefüllt wurden. Wenn die Validierung erfolgreich war, werden die mit den Eingabeelementen verknüpften Objekte im Datenmodell
(Kunde, Artikel, Rechnung ...) aktualisiert. Im vorletzten Schritt werden bei Bedarf zusätzliche Methoden aufgerufen.
Anschließend wird der Komponentenbaum in eine HTML-Seite umgewandelt und als HTTP-Antwort an den Browser zurückgesendet. Hierzu muss aus
jedem Java-Objekt wieder ein HTML-Element mit Attributen erzeugt werden.
Der JSF-Lebenszyklus betrifft also alle Aspekte zur dynamischen Erzeugung einer HTML-Seite und ist somit ein wichtiges Konzept im JSF-Framework. Mithilfe von vorgefertigten JSF-Komponenten kann eine Webseite gestaltet werden. Um mit dem JSF-Framework eine Web-Anwendung zu programmieren, ist zum Glück kein vollständiger Java EE Application Server nötig, dessen Installation und Konfiguration viel Aufwand bdeutet. Für kleine bis mittelgroße Projete reicht ein Servlet-Container wie Apache Tomcat aus.
Um mit einem "Hello World"-Beispiel zu beginnen, startet man in der Entwicklungsumgebung ein neues Projekt mit der aktuellsten
JavaServer Faces-Version. Dem Projekt wird automatisch eine sehr einfache Seite hinzugefügt, die auf den ersten Blick kaum von einer
XHTML-Seite zu unterscheiden ist. Es existieren jedoch zwei grundlegende Unterschiede: Zum einen enthält das html-Tag
zwei Attribute mit den Namen xmlns und xmlns:h. Zum anderen beginnen zwei bekannte Tags mit einem Präfix: Sie
heißen nun h:head bzw. h:body.

Bei den neuen Tags handelt es sich um die JSF-Gegenstücke zu den HTML-Komponenten. Wie eingangs erwähnt sorgt der JSF-Lebenszyklus
dafür, dass die JSF-Komponenten in HTML-Elemente umgewandelt werden. Damit die dafür verantwortlichen Programme wissen, wie die
Komponenten zu interpretieren sind, muss deren XML-Namensraum ("XML namespace", vergleichbar mit einem Paket in Java) mithilfe des
xmlns-Attributs angegeben werden. Ob die Umwandlung erfolgreich war, kann man auch anhand des erzeugten Quelltextes
überprüfen: Er darf nur gültigen HTML-Code enthalten.
Zwar erzeugen die beiden neuen JSF-Elemente insofern eine dynamische Webseite, als dass erst zur Laufzeit HTML-Code erzeugt wird, doch der
Inhalt (in diesem Beispiel der Text "Hello World!") ist statisch programmierter HTML-Text. Um auch den Inhalt dynamisch zu erzeugen, muss das
Beispiel um eine der vielen JSF-Komponenten ergänzt werden, deren Inhalt aus einem Attribut geladen werden kann. Eine dieser Komponenten
ist h:outputText mit dem Attribut value. Das umgeschriebene Beispiel, das das neue Element verwendet, ist in
untenstehender Abbildung zu sehen. Abgesehen von zwei fehlenden Zeilenumbrüchen erzeugt es den gleichen HTML-Quellcode:

Übergangsweise ist der Inhalt des Attributs noch als Zeichenkette festgelegt. Wünschenswert ist jedoch, dass sich der Text aus einer externen Quelle automatisch aktualisiert, idealerweise aus einem Objekt-Attribut des Datenmodells (z.B. der Name eines Artikels). Tatsächlich ist eine solche komfortable Verknüpfung zwischen den View- und den Model-Komponenten in JSF möglich! Das Framework sieht hierfür zwei neue Konzepte vor: die Unified Expression Language (UEL) und Managed Beans. Beans sind im Prinzip einfache Klassen des Datenmodells. Im JSF-Framework heißen sie Managed Beans, weil ihr kompletter Lebenszyklus - vom Aufruf des Konstruktors bis zur Zerstörung durch den Java-Garbage-Collector - von JSF verwaltet wird. UEL-Ausdrücke können in den Attributen von JSF-Komponenten stehen, um die Komponenten mit den Managed Beans zu verknüpfen. Beide Konzepte werden später detailliert behandelt.
Um einen Ausdruck der Unified Expression Language auf der Webseite nutzen zu können, fügt man beispielsweise dem Projekt eine neue
Managed Bean Artikel mit dem Attribut name und den passenden get- und set-Methoden hinzu.
Als Default-Wert legt man den Namen eines Artikels fest (hier: die Filzpantoffeln "Rudolph"). Um den Artikelnamen mit der
outputText-Komponente zu verbinden, schreibt man einen einfachen UEL-Ausdruck in das value-Attribut der
Komponente. Auf die Syntax wird zu einem späteren Zeitpunkt im Detail eingegangen.Tatsächlich wird nun schlicht der Name des Artikels
auf der Webseite angezeigt (siehe untenstehende Abbildung).

Man kann schon das Potenzial, das in diesem Framework steckt, erkennen. Um es allerdings für die Erstellung einer Webanwendung nutzen zu können, muss man aber noch viel mehr JSF-Komponenten kennenlernen.