Welkom bij de JSF Tutorial voor Beginners. Java Server Faces (JSF)-technologie is een front-end framework dat het maken van gebruikersinterface-onderdelen vergemakkelijkt door het hergebruiken van UI-componenten. JSF is ontworpen op basis van het Model View Controller-patroon (MVC), dat de presentatie, controller en de bedrijfslogica scheidt.
JSF Tutorial voor Beginners
In het Model View Controller-patroon bevat het model de bedrijfslogica die nodig is om het bedrijfsscenario te voltooien, vertegenwoordigt de view de presentatielaag zoals de JSP- of JSF-pagina’s, en vertegenwoordigt de controller het proces van het afhandelen van de controle naar het model/view, afhankelijk van de gevraagde bewerking. JSF biedt de volgende componenten om een gebruikersinterface te maken:
- Standaard basiselementen voor invoer zoals velden, knoppen, enz., die de set van basis-UI-componenten vormen.
- Weergavemogelijkheid van JSF, afhankelijk van de client-specificaties
- Kernbibliotheek
- Uitbreiding van beschikbare UI-componenten om meer componenten toe te voegen en ze te gebruiken om te voldoen aan de eisen van de klant.
JSF Tutorial voor Beginners – Omgeving instellen
Hier zullen we alle noodzakelijke stappen doorlopen om uw computer in te stellen voor het maken van de eerste JSF-toepassing.
Installatie van JDK
Download de JDK van de volgende Oracle-website https://www.oracle.com/technetwork/java/javase/downloads/index.html Stel de omgevingsvariabele JAVA_HOME in die wijst naar het binkpad van de geïnstalleerde JDK. Bijvoorbeeld “C:\Program Files\Java\jdk1.7.0_60”. Voeg ook JAVA_HOME\bin toe aan de PATH-variabele om de Java-binaries te kunnen vinden. Controleer nu of Java succesvol is geïnstalleerd op de machine door javac in het opdrachtvenster te typen, wat alle beschikbare opties zou moeten weergeven, of “java -version” wat de versie van Java zou moeten tonen die is geïnstalleerd op de machine. Voor meer details kunt u het volgende bericht bekijken: Hoe Java te installeren op Windows
Installatie van IDE
Enkele van de populaire IDE’s die beschikbaar zijn, zijn Eclipse, NetBeans en IntelliJ IDEA. Download Eclipse vanaf de volgende link https://www.eclipse.org/downloads/ en voer het gedownloade bin-bestand uit en installeer Eclipse op uw machine. Voor NetBeans, download NetBeans IDE van https://netbeans.org/downloads/ en voltooi de installatie.
Installatie van Apache Tomcat
Download Tomcat vanaf de volgende link https://tomcat.apache.org/. Voer het gedownloade bin-bestand uit en stel de variabele CATALINA_HOME in om naar het installatiepad te verwijzen. Start nu de server en ga naar https://localhost:8080 in uw favoriete browser, wat de standaardpagina van Tomcat weergeeft als deze succesvol is geïnstalleerd. Onze basisopstelling is klaar, laten we doorgaan met het maken van onze eerste JSF-toepassing.
JSF Handleiding voor Beginners – Hello World Applicatie
Laten we nu een eenvoudige hello world JSF-webapplicatie maken. Download de volgende JAR-bestanden die essentieel zijn om JSF-gerelateerde code uit te voeren. Deze kunnen worden gedownload van de Maven Central Repository https://search.maven.org/. Een meer duidelijke manier om afhankelijkheden te beheren is door een buildsysteem zoals Maven te gebruiken. Voor al onze voorbeelden zullen we Maven gebruiken. Raadpleeg de pom.xml voor afhankelijkheden. 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 Handleiding voor Beginners – Maak een Beheerde Bean
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;
}
}
De annotatie @ManagedBean geeft aan dat de klasse HelloWorld een beheerde bean is. De bean @SessionScoped geeft aan dat de bean in leven blijft zolang de HttpSession geldig is. Hier wordt een string s1 gedeclareerd en geïnitialiseerd met “Hello World”, en de getter- en setter-methoden worden gedefinieerd om de waarde van de string s1 op te halen. We kunnen ook de bean-naam opgeven, zoals @ManagedBean(name="helloWorld"). Als er geen naam is opgegeven, wordt deze afgeleid volgens de Java-namingsstandaarden. Het is altijd een goede gewoonte om de bean-naam op te geven.
JSF-zelfstudie voor beginners – Pagina weergeven
Maak nu een JSF-pagina met de naam helloWorld.xhtml die interactie heeft met de bean HelloWorld en de waarde ophaalt via de getter-methode en deze op de responspagina afdrukt. 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 roepen we de bean-naam aan, gevolgd door de in de bean gedeclareerde stringvariabele “helloWorld.s1” die de waarde “Hello World” ophaalt.
Configuratie van implementatie-descriptor
Het laatste onderdeel is het configureren van de JSF-controllerklasse om de clientverzoeken te verwerken. De JSF-controller servlet is FacesServlet, de definitieve web.xml-configuratie wordt hieronder gegeven. 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>
De uiteindelijke projectstructuur van het JSF Hello World-project ziet er nu als volgt uit in Eclipse. 
In het web.xml-bestand specificeren we de invoer van het faces-configuratiebestand samen met het toewijzen van de servlet voor faces, de sessietime-out en het welkomstbestand dat wordt geladen bij het starten van de toepassing. Zodra we klaar zijn met deze wijzigingen, zullen we de toepassing uitvoeren, die de volgende uitvoer in de browser afdrukt. 
Dat is alles voor de JSF-zelfstudie voor beginners. We zullen verschillende JSF-pagina-onderdelen bekijken in de komende berichten. Ondertussen kunt u het project downloaden via onderstaande link en ermee spelen om meer te leren.
Source:
https://www.digitalocean.com/community/tutorials/jsf-tutorial-for-beginners