Willkommen beim JSF-Tutorial für Anfänger. Java Server Faces (JSF) ist eine Frontend-Framework, das die Erstellung von Benutzeroberflächenkomponenten durch die Wiederverwendung der UI-Komponenten erleichtert. JSF basiert auf dem Model View Controller (MVC)-Muster, das die Präsentation, den Controller und die Geschäftslogik trennt.
JSF-Tutorial für Anfänger
Im Model View Controller-Muster enthält das Modell die für das Geschäftsszenario erforderliche Geschäftslogik, die Ansicht repräsentiert die Präsentationsebene wie die JSP- oder JSF-Seiten und der Controller repräsentiert den Prozess des Handlings der Steuerung zum Modell/Ansicht je nach angeforderter Operation. JSF stellt folgende Komponenten zur Erstellung einer Benutzeroberfläche bereit:
- Standard-Basis-Eingabeelemente wie Felder, Schaltflächen usw., die den Satz von Basiskomponenten für die Benutzeroberfläche bilden.
- Renderfähigkeit von JSF je nach Client-Spezifikationen
- Kernbibliothek
- Erweiterung vorhandener UI-Komponenten zur Hinzufügung weiterer Komponenten und Verwendung dieser zur Erfüllung von Client-Anforderungen.
JSF Tutorial für Anfänger – Umgebungseinrichtung
Hier werden wir alle notwendigen Schritte durchgehen, um Ihren Computer zur Erstellung der ersten JSF-Anwendung einzurichten.
Installation des JDK
Laden Sie das JDK von der folgenden Oracle-Website herunter: https://www.oracle.com/technetwork/java/javase/downloads/index.html Setzen Sie die Umgebungsvariable JAVA_HOME auf den binären Pfad des installierten JDK. Zum Beispiel „C:\Program Files\Java\jdk1.7.0_60“. Fügen Sie auch JAVA_HOME\bin der Variablen PATH hinzu, um die Java-Binärdateien zu lokalisieren. Überprüfen Sie nun, ob Java erfolgreich auf dem Computer installiert ist, indem Sie javac im Befehlsfenster eingeben, was alle verfügbaren Optionen anzeigen sollte, oder „java -version“, was die installierte Java-Version auf dem Computer anzeigen sollte. Für weitere Details können Sie folgenden Beitrag lesen: So installieren Sie Java unter Windows
IDE-Installation
Zu den beliebten IDEs, die verfügbar sind, gehören Eclipse, NetBeans und IntelliJ IDEA. Laden Sie Eclipse von folgendem Link herunter https://www.eclipse.org/downloads/ und führen Sie die heruntergeladene ausführbare Datei aus, um Eclipse auf Ihrem Rechner zu installieren. Für NetBeans laden Sie NetBeans IDE von https://netbeans.org/downloads/ herunter und schließen Sie die Installation ab.
Apache Tomcat Installation
Laden Sie Tomcat von folgendem Link herunter https://tomcat.apache.org/. Führen Sie die heruntergeladene ausführbare Datei aus und setzen Sie die Variable CATALINA_HOME auf den Installationspfad. Starten Sie nun den Server und gehen Sie in Ihrem bevorzugten Browser zu https://localhost:8080, um die Standard-Tomcat-Seite anzuzeigen, wenn die Installation erfolgreich war. Unsere Basisinstallation ist bereit, lassen Sie uns mit der Erstellung unserer ersten JSF-Anwendung fortfahren.
JSF Tutorial für Anfänger – Hello World Anwendung
Lassen Sie uns jetzt eine einfache Hello World JSF-Webanwendung erstellen. Laden Sie die folgenden JAR-Dateien herunter, die für die Ausführung von JSF-bezogenem Code erforderlich sind. Diese können von Maven Central Repository heruntergeladen werden https://search.maven.org/. Eine klarere Möglichkeit, Abhängigkeiten zu verwalten, besteht darin, ein Build-System wie Maven zu verwenden. Für alle unsere Beispiele werden wir Maven verwenden. Bitte beachten Sie die pom.xml für Abhängigkeiten. jsf-api-1.2.jar jsf-impl-2.2.8-04.jar 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 – Ein Managed Bean erstellen
A managed bean is a java class registered to JSF which makes interaction between the UI and the business logic possible. Create a managed bean named HelloWorld.java
using @ManagedBean
annotation as
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 @ManagedBean
-Annotation gibt an, dass die Klasse HelloWorld ein verwalteter Bean ist. Der @SessionScoped
-Bean gibt an, dass der Bean lebendig ist, bis die HttpSession
gültig ist. Hier wird ein String s1 deklariert und mit „Hello World“ initialisiert, und die Getter- und Setter-Methoden werden definiert, um den Wert des Strings s1 abzurufen. Wir können auch den Bean-Namen angeben, z. B. @ManagedBean(name="helloWorld")
. Wenn kein Name angegeben ist, wird er gemäß den Java-Namensstandards abgeleitet. Es ist immer bewährte Praxis, den Bean-Namen anzugeben.
JSF-Tutorial für Anfänger – Ansichtsseite
Erstellen Sie jetzt eine JSF-Seite mit dem Namen helloWorld.xhtml
, die mit dem Bean HelloWorld
interagiert und den Wert über die Getter-Methode abruft und ihn auf der Antwortseite druckt. helloWorld.xhtml
<?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 im Bean deklarierten Zeichenfolgenvariablen als „helloWorld.s1“ auf, die den Wert „Hello World“ abruft.
Bereitstellungskonfiguration im Bereitstellungsdeskriptor
Finaler Teil ist die Konfiguration der JSF-Controller-Klasse zur Bearbeitung der Client-Anfragen. Der JSF-Controller-Servlet ist FacesServlet
, die endgültige web.xml-Konfiguration ist unten angegeben. web.xml
<?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>
Die endgültige Projektstruktur für das JSF Hello World-Projekt sieht nun wie folgt in Eclipse aus. In der web.xml geben wir den Eintrag der Faces-Konfigurationsdatei zusammen mit dem Mapping-Servlet für Faces, der Sitzungstimeout und der Begrüßungsdatei an, die beim Start der Anwendung geladen wird. Sobald wir diese Änderungen vorgenommen haben, führen wir die Anwendung aus, die folgende Ausgabe im Browser druckt.
Das ist alles für das JSF-Tutorial für Anfänger. In den kommenden Beiträgen werden wir uns verschiedene JSF-Seitenkomponenten ansehen. In der Zwischenzeit können Sie das Projekt über den unten stehenden Link herunterladen und damit herumspielen, um mehr zu lernen.
Source:
https://www.digitalocean.com/community/tutorials/jsf-tutorial-for-beginners