Willkommen beim JSF Tutorial für Anfänger. Java Server Faces (JSF) ist ein Frontend-Framework, das die Erstellung von Benutzeroberflächenkomponenten durch Wiederverwendung von UI-Komponenten erleichtert. JSF basiert auf dem Model View Controller (MVC)-Muster, das Präsentation, Steuerung und Geschäftslogik voneinander trennt.
Zum Ausprobieren: Cloud-Server ab 3,12 €/Monat
ccloud³ VMs aus deutschen Rechenzentren – in Sekunden gestartet, stundengenau abgerechnet, mit 200 € Startguthaben für neue Konten. Server starten →
Im MVC-Muster enthält das Modell die Geschäftslogik, die für die Umsetzung des Geschäftsszenarios erforderlich ist, die Ansicht repräsentiert die Präsentationsebene wie JSP- oder JSF-Seiten und der Controller steuert die Übermittlung der Kontrolle an das Modell/die Ansicht je nach der angeforderten Operation. JSF bietet die folgenden Komponenten, um eine Benutzeroberfläche zu erstellen:
- Standard-Basiseingabeelemente wie Felder, Buttons usw., die den Satz der Basis-UI-Komponenten bilden.
- Rendering-Fähigkeit von JSF abhängig von den Anforderungen des Clients
- Kernbibliothek
- Erweiterung verfügbarer UI-Komponenten, um zusätzliche Komponenten hinzuzufügen und sie zur Erfüllung von Kundenanforderungen zu nutzen.
JSF Tutorial für Anfänger - Einrichtung der Umgebung
Hier gehen wir alle notwendigen Schritte durch, um Ihren Computer für die Erstellung Ihrer ersten JSF-Anwendung vorzubereiten.
JDK-Installation
Laden Sie das JDK von der folgenden Oracle-Website herunter und setzen Sie die Umgebungsvariable JAVA_HOME auf den Binärpfad des installierten JDKs. Fügen Sie auch JAVA_HOME\bin zur PATH-Variable hinzu, um die Java-Binärdateien lokalisieren zu können. Überprüfen Sie nun, ob Java erfolgreich auf Ihrem Rechner installiert ist, indem Sie javac im Befehlsfenster eingeben, was alle verfügbaren Optionen anzeigen sollte, oder "java -version", was die Version von Java anzeigen sollte, die auf Ihrem Rechner installiert ist.
IDE-Installation
Einige der beliebten verfügbaren IDEs umfassen Eclipse, NetBeans und IntelliJ IDEA. Laden Sie Eclipse von dem folgenden Link herunter und führen Sie die heruntergeladene Binärdatei aus, um Eclipse auf Ihrem Rechner zu installieren. Für NetBeans laden Sie die NetBeans IDE von herunter und schließen Sie die Installation ab.
Apache Tomcat-Installation
Laden Sie Tomcat von dem folgenden Link herunter. Führen Sie die heruntergeladene Binärdatei aus und setzen Sie die CATALINA_HOME-Variable auf den Installationspfad. Starten Sie jetzt den Server und gehen Sie in Ihrem bevorzugten Browser zu , was die Standard-Tomcat-Seite anzeigen sollte, wenn sie erfolgreich installiert wurde. Unsere Basiseinrichtung ist bereit, gehen wir zur Erstellung unserer ersten JSF-Anwendung über.
JSF Tutorial für Anfänger - Hallo-Welt-Anwendung
Lassen Sie uns nun eine einfache Hallo-Welt-JSF-Webanwendung erstellen. Laden Sie die folgenden Jars herunter, die notwendig sind, um JSF-bezogenen Code auszuführen. Diese können vom Maven-Zentralrepository heruntergeladen werden. Eine klarere Art, Abhängigkeiten zu verwalten, ist die Nutzung eines Build-Systems wie Maven. Für alle unsere Beispiele werden wir Maven verwenden. Bitte beziehen Sie sich für Abhängigkeiten auf die pom.xml.
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="https://maven.apache.org/POM/4.0.0" xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="https://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.journaldev.jsf</groupId>
<artifactId>JSF_HelloWorld</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>war</packaging>
<name>JSF_HelloWorld</name>
<properties>
<endorsed.dir>${project.build.directory}/endorsed</endorsed.dir>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
</properties>
<dependencies>
<dependency>
<groupId>javax</groupId>
<artifactId>javaee-web-api</artifactId>
<version>7.0</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-api</artifactId>
<version>2.1.13</version>
</dependency>
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-impl</artifactId>
<version>2.1.13</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.1</version>
<configuration>
<source>1.7</source>
<target>1.7</target>
<compilerArguments>
<endorseddirs>${endorsed.dir}</endorseddirs>
</compilerArguments>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>2.3</version>
<configuration>
<failOnMissingWebXml>false</failOnMissingWebXml>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-dependency-plugin</artifactId>
<version>2.6</version>
<executions>
<execution>
<phase>validate</phase>
<goals>
<goal>copy</goal>
</goals>
<configuration>
<outputDirectory>${endorsed.dir}</outputDirectory>
<silent>true</silent>
<artifactItems>
<artifactItem>
<groupId>javax</groupId>
<artifactId>javaee-endorsed-api</artifactId>
<version>7.0</version>
<type>jar</type>
</artifactItem>
</artifactItems>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>
</project>JSF Tutorial für Anfänger - Erstellen eines Managed Bean
Ein Managed Bean ist eine Java-Klasse, die bei JSF registriert ist, was die Interaktion zwischen der Benutzeroberfläche und der Geschäftslogik ermöglicht. Erstellen Sie ein Managed Bean mit dem Namen HelloWorld.java unter Verwendung der Annotation @ManagedBean.
package com.journaldev.jsf.helloworld;
import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean(name="helloWorld")
@SessionScoped
public class HelloWorld implements Serializable{
private static final long serialVersionUID = -6913972022251814607L;
private String s1 = "Hello World!!";
public String getS1() {
System.out.println(s1);
return s1;
}
public void setS1(String s1) {
this.s1 = s1;
}
}Die Annotation @ManagedBean zeigt an, dass die Klasse HelloWorld ein Managed Bean ist. Das @SessionScoped-Bean zeigt an, dass das Bean so lange lebt, wie die HttpSession gültig ist. Hier wird ein String s1 deklariert und mit "Hello World" initialisiert und die Getter- und Setter-Methoden sind definiert, um den Wert des Strings s1 abzurufen. Man kann auch den Bean-Namen angeben, wie zum Beispiel @ManagedBean(name="helloWorld"). Wenn kein Name angegeben ist, wird er gemäß den Java-Namenskonventionen abgeleitet. Es ist immer am besten, den Bean-Namen anzugeben.
JSF Tutorial für Anfänger - Ansichtsseite
Erstellen Sie nun eine JSF-Seite mit dem Namen helloWorld.xhtml, die mit dem HelloWorld-Bean interagiert und den Wert über die Getter-Methode abruft und denselben auf der Antwortseite ausgibt.
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml"
xmlns:h="https://java.sun.com/jsf/html">
<h:head>
<title>Hello World JSF Example</title>
</h:head>
<h:body>
#{helloWorld.s1}
<br /><br />
</h:body>
</html>Hier rufen wir den Bean-Namen auf, gefolgt von der in der Bean deklarierten String-Variable "helloWorld.s1", die den Wert "Hello World" abruft.
Deployment Descriptor-Konfiguration
Der letzte Teil besteht darin, die JSF-Controller-Klasse zu konfigurieren, um die Client-Anfragen zu bearbeiten. Der JSF-Controller-Servlet ist FacesServlet, die endgültige web.xml-Konfiguration wird unten angegeben.
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.1" xmlns="https://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="https://xmlns.jcp.org/xml/ns/javaee https://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>faces/helloWorld.xhtml</welcome-file>
</welcome-file-list>
</web-app>In der web.xml spezifizieren wir den Eintrag der Faces-Konfigurationsdatei zusammen mit der Mapping-Servlet für Faces, Session-Timeout und die Willkommensdatei, die beim Start der Anwendung geladen wird. Sobald wir diese Änderungen vorgenommen haben, führen wir die Anwendung aus.
Das ist alles für das JSF Tutorial für Anfänger. Wir werden uns in den kommenden Beiträgen mit verschiedenen JSF-Seitenkomponenten beschäftigen.
Testen Sie Ihr Setup auf ccloud³
Registrieren Sie sich in der ccloud³ und erhalten Sie 200 € Startguthaben für Ihr Projekt – z. B. für eine PostgreSQL-VM mit automatischen Backups.