JSF PrimeFaces Tutorial

Tutorials

JSF

Willkommen beim JSF Primefaces Tutorial. JavaServer Faces ist eines der führenden Frameworks, das heutzutage für die Implementierung der Benutzeroberfläche von Java-Webanwendungen verwendet wird. JSF hat die Webanwendung komponentenbasiert gemacht, insbesondere den Teil, der mit der Benutzeroberfläche zu tun hat. Jede einzelne Ansicht in JSF wurde mithilfe eines serverseitigen Baums von Komponenten erstellt, der in HTML umgewandelt wird, wenn er im Browser gerendert wird.

JSF Primefaces Tutorial

Der Prozess des Renderns der Ansicht in JSF durchläuft, was als JSF-Lifecycle bekannt ist. Dieses Tutorial soll Ihnen keine ausführliche Diskussion darüber geben, wie der Lifecycle funktioniert oder wie wir damit umgehen können. Es ist nur eine Benachrichtigung darüber, was Sie über das JSF-Framework wissen sollten und wie Sie die JSF-Ansicht für das Rendern vorbereiten können. JSF hat bis zum Zeitpunkt, als dieser Artikel geschrieben wurde, zwei Hauptimplementierungen: die Oracle-Implementierung Mojarra und die Apache-Implementierung MyFaces. Es sind mehrere JSF-Bibliotheken entstanden, wie Richfaces, IceFaces, Primefaces, MyFaces usw. Eine der führenden Bibliotheken, die intensiv genutzt wird und einen ausgezeichneten Ruf hat, ist Primefaces. Primefaces hat vor einigen Monaten das Primefaces 5 veröffentlicht, das Gegenstand dieses Tutorials und der kommenden Tutorials sein wird. Um Primefaces 5 nutzen zu können, müssen Sie es in Ihr Projekt installieren und konfigurieren. Egal, ob Sie einen einfachen Texteditor oder eine Enterprise-Entwicklungsumgebung verwenden, am Ende dieses Tutorials sind Sie bereit, alle Primefaces-Komponenten zu entdecken.

Was ist neu in JSF 2

Wie wir wissen, ist JavaServer Faces ein Framework zur Entwicklung von benutzerfreundlichen Webseiten mit einer reichen Benutzeroberfläche. JSF wurde in mehreren Java Community Request JSR eingeführt, wobei die endgültige Version von JSF 2 im Juli 2009 veröffentlicht wurde und eine Reihe von Verbesserungen und neuen Funktionen enthält. JSF 2 hat eine Reihe von Konsequenzen nach sich gezogen, und die endgültige Version war JSF 2.2, die im Mai 2013 veröffentlicht wurde. Im Gegensatz zu JSF 1.x bietet JSF 2.x viele Funktionen wie die Verwendung von Annotationen zur Deklaration von JSF Managed Beans, Converters, Validatoren, Scopes usw. Das ist aber noch nicht alles, JSF 2 hat auch neue Scopes wie den View Scope, Custom Scope, Flow Scope und Conversation Scope eingeführt und vieles mehr. Außerdem dürfen wir die erstaunlichste Funktion nicht vergessen, die in JSF 2 hinzugefügt wurde, nämlich das Ajax-Konzept. In JSF 2 ist Ajax bereits in das JSF-Framework integriert. Daher kann jeder JSF-Komponente einfach Ajax-Funktionalität hinzugefügt werden. Auch die Navigationsregeln haben sich geändert und sind jetzt viel einfacher. In den nächsten Tutorials werden wir mehr über die Funktionen erfahren, die in JSF 2 hinzugefügt wurden. In diesem Tutorial werden Sie jedoch eine einfache JSF-Anwendung erstellen und ein grundlegendes Beispiel dafür geben, wie wir die Primefaces-Tags verwenden können, um bestimmte Geschäftsszenarien umzusetzen.

Verwendete Tools zur Durchführung des Tutorials

Um mit diesem Tutorial zu beginnen, müssen Sie die folgenden Entwicklungstools verwenden.

Tomcat 7
Eclipse-IDE
Maven 3
JSF 2 / Primefaces 5

Es ist offensichtlich, dass wir Tomcat 7 zur Bereitstellung der Anwendung und Eclipse IDE zur Entwicklung der erforderlichen Komponenten verwendet haben, wobei Maven als Build-Tool und zur Verwaltung von Abhängigkeiten verwendet wurde. Stellen Sie daher sicher, dass Sie wissen, wie all diese Software in Ihrer Entwicklungsumgebung installiert und konfiguriert werden können. Unser endgültiges Projekt wird wie das untenstehende Bild aussehen.

Erstellung des Eclipse-Projekts

Eclipse IDE unterstützt die Entwicklung von Webprojekten unter dem Dach von Dynamisches Projekt. Um ein dynamisches Projekt zu erstellen, befolgen Sie einfach die folgenden Schritte:

Öffnen Sie Eclipse IDE
Klicken Sie mit der rechten Maustaste auf den Projektnavigatorbereich und wählen Sie Neu – Dynamisches Webprojekt

Vervollständigen Sie den Projekterstellungsprozess, indem Sie den Projektname, die Zielumgebung, den Quellordner, den Kontextstamm, das Inhaltsverzeichnis und die web.xml einrichten

JSF-Installation & Konfiguration

Wie zuvor erwähnt, ist unser Ziel die Verwendung von JSF/Primefaces zur Entwicklung von Webanwendungen mit dem Primefaces-Benutzeroberflächenkomponente. Bisher haben wir jedoch nur eine einfache dynamische Anwendung, die weitere Schritte für die JSF-Konfiguration erfordert. Um JSF zu Ihrem Projekt hinzuzufügen, müssen Sie das JSF-Facet hinzufügen. Beachten Sie dabei, dass das Hinzufügen der JSF-Implementierung dazu beiträgt, eine JSF-Anwendung zu erstellen, die Mojarra verwendet. Um dieses Facet hinzuzufügen, befolgen Sie die folgenden Schritte:

Öffnen Sie das Eigenschaftenfenster für das erstellte Projekt
Aktivieren Sie im Bereich Projekt-Facets einfach JavaServer Faces und befolgen Sie weitere erforderliche Konfigurationen zur Abschluss der Konfiguration
Nachdem Sie auf weitere erforderliche Konfigurationen geklickt haben, sollte das JSF-Fähigkeitenfenster angezeigt werden
Fügen Sie die JSF-Implementierungsbibliothek hinzu, indem Sie auf Bibliothek herunterladen< klicken und in dem geöffneten Fenster JSF 2.2 (Mojarra 2.2.0) auswählen

Nach der Installation der JSF-Bibliothek sieht das JSF-Fähigkeitenfenster wie aus. Am Ende dieses Abschnitts haben Sie eine Webanwendung mit JSF-Fähigkeiten erstellt.

Primefaces 5 Installation

Für den Moment ist Ihre Anwendung bereit, eine JavaServer Faces-Benutzeroberfläche zu verwenden, jedoch nicht Primefaces. Um Primefaces verwenden zu können, müssen Sie die folgenden Schritte befolgen:

Laden Sie die erforderliche Primefaces-Bibliothek von der offiziellen Primefaces-Website oder von Maven Central herunter.
Fügen Sie das heruntergeladene Primefaces-JAR in Ihren lib-Ordner ein, der sich unter dem WEB-INF-Ordner befindet.

Entwicklung einer Primefaces-Anwendung

Jetzt ist Ihr Projekt bereit, eine JSF/Primefaces-Anwendung zu entwickeln, wie Sie sehen würden. Wir werden eine einfache Anwendung erstellen, in der ein Primefaces DataTable eine Liste von Mitarbeitern aus dem Backing Bean verbraucht. Die Mitarbeiterliste wird von einer @PostConstruct speziellen Methode bevölkert. Befolgen Sie die folgenden Schritte zur Entwicklung einer vollständigen JSF/Primefaces-Anwendung.

Erstellen Sie ein verwaltetes Bean mit dem Namen ViewEmployeesManagedBean
Erstellen Sie ein Pojo mit dem Namen Employee, das EmployeeName und EmployeeId enthält.
Erstellen Sie eine Primefaces-Ansicht, um die Mitarbeiterliste im definierten verwalteten Bean zu verbrauchen.

package com.journaldev.data;

public class Employee {
	private String employeeId;
	private String employeeName;
	public String getEmployeeId() {
		return employeeId;
	}
	public void setEmployeeId(String employeeId) {
		this.employeeId = employeeId;
	}
	public String getEmployeeName() {
		return employeeName;
	}
	public void setEmployeeName(String employeeName) {
		this.employeeName = employeeName;
	}
}

package com.journaldev.jsfBeans;

import java.util.ArrayList;
import java.util.List;

import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

import com.journaldev.data.Employee;

@ManagedBean
@SessionScoped
public class ViewEmployeesManagedBean {
	private List<Employee> employees = new ArrayList<Employee>();

	public ViewEmployeesManagedBean(){

	}

	@PostConstruct
	public void populateEmployeeList(){
		for(int i = 1 ; i <= 10 ; i++){
			Employee emp = new Employee();
			emp.setEmployeeId(String.valueOf(i));
			emp.setEmployeeName("Employee#"+i);
			this.employees.add(emp);
		}
	}

	public List<Employee> getEmployees() {
		return employees;
	}

	public void setEmployees(List<Employee> employees) {
		this.employees = employees;
	}
}

Beachten Sie die Verwendung von JSF-Annotationen und die Verwendung der PostConstruct-Annotation zur Befüllung der Liste der Mitarbeiter.

<!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:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<p:outputLabel value="JournalDev - JSF2/Primefaces Tutorial"></p:outputLabel>
<p:dataTable value="#{viewEmployeesManagedBean.employees}" var="employee">
	<p:column>
		<f:facet name="header">
			<h:outputText value="Employee ID"></h:outputText>
		</f:facet>
		<h:outputText value="#{employee.employeeId}"></h:outputText>
	</p:column>
	<p:column>
		<f:facet name="header">
			<h:outputText value="Employee Name"></h:outputText>
		</f:facet>
		<h:outputText value="#{employee.employeeName}"></h:outputText>
	</p:column>
</p:dataTable>
</html>

Beachten Sie die Verwendung des dataTable-Elements zum Erstellen der Tabelle aus den Eigenschaften des verwalteten Beans. PrimeFaces und JSF kümmern sich um die Weitergabe dieser Informationen an die Ansichtsseite zur Darstellung. Wenn Sie aus dem Servlet-Hintergrund kommen, können Sie leicht erkennen, dass die Anzahl der Schritte reduziert ist – in einer Servlet-Umgebung bearbeiten wir zunächst die Anfrage im Servlet, erstellen die Modelldaten, setzen sie als Attribut in Anfrage/Sitzung und leiten sie dann an die JSP-Seite weiter, um die Antwort zu rendern.

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
	xmlns="https://java.sun.com/xml/ns/javaee"
	xsi:schemaLocation="https://java.sun.com/xml/ns/javaee https://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
	id="WebApp_ID" version="3.0">
	<display-name>JournalDev-PrimefacesWebApplication</display-name>
	<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>
	<context-param>
		<description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description>
		<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
		<param-value>client</param-value>
	</context-param>
	<context-param>
		<param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name>
		<param-value>resources.application</param-value>
	</context-param>
	<listener>
		<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
	</listener>
</web-app>

Beachten Sie, dass javax.faces.webapp.FacesServlet die Controller-Klasse ist, hier binden wir JSF in unsere Webanwendung ein.

<?xml version="1.0" encoding="UTF-8"?>
<faces-config
    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-facesconfig_2_2.xsd"
    version="2.2">

</faces-config>

Hier geben wir JSF-Komponentenkonfigurationen wie verwaltete Beans, i18n-Globale Nachrichten, benutzerdefinierte Ansichtshandler und benutzerdefinierte Fabrikklassen an. Da wir Annotationen verwenden und es sich um ein einfaches Projekt handelt, wird hier keine Konfiguration durchgeführt, aber wir werden deren Verwendung in zukünftigen Beiträgen sehen. Wenn Sie dies jetzt ausführen, erhalten Sie die Ausgabe wie im untenstehenden Bild gezeigt.

In Maven konvertieren

Maven ist der bevorzugte Weg, um den Build und die Abhängigkeiten von Java-Projekten zu verwalten. Hier sehen wir, wie wir es in Maven umwandeln können. Die Eclipse IDE bietet die Möglichkeit, Ihr Dynamic Web Project in Maven umzuwandeln. Maven hilft Ihnen dabei, die erforderlichen Abhängigkeiten zu kontrollieren und zu verwalten. Klicken Sie mit der rechten Maustaste auf das erstellte Projekt und wählen Sie im Konfigurationsmenü In Maven Project umwandeln aus. Nachdem Sie Ihr Projekt in Maven geändert haben, müssen Sie die erforderlichen Abhängigkeiten hinzufügen, um das Projekt von Maven selbst kompilierbar zu machen. Das vorgesehene Maven-XML, das Sie erhalten, sobald Sie die Anwendung in ein Maven-Projekt umgewandelt und die erforderlichen Bibliotheken für JSF 2, Primefaces und andere hinzugefügt haben, lautet:

<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>JournalDev-PrimefacesWebApplication</groupId>
	<artifactId>JournalDev-PrimefacesWebApplication</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>war</packaging>
	<build>
		<sourceDirectory>src</sourceDirectory>
		<plugins>
			<plugin>
				<artifactId>maven-compiler-plugin</artifactId>
				<version>3.1</version>
				<configuration>
					<source>1.6</source>
					<target>1.6</target>
				</configuration>
			</plugin>
			<plugin>
				<artifactId>maven-war-plugin</artifactId>
				<version>2.3</version>
				<configuration>
					<warSourceDirectory>webapp</warSourceDirectory>
					<failOnMissingWebXml>false</failOnMissingWebXml>
				</configuration>
			</plugin>
		</plugins>
		<finalName>${project.artifactId}</finalName>
	</build>
	<repositories>
		<repository>
			<id>prime-repo</id>
			<name>PrimeFaces Maven Repository</name>
			<url>https://repository.primefaces.org</url>
			<layout>default</layout>
		</repository>
	</repositories>
	<dependencies>
		<!-- Servlet -->
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>servlet-api</artifactId>
			<version>2.5</version>
			<scope>provided</scope>
		</dependency>
		<!-- Faces Implementation -->
		<dependency>
			<groupId>com.sun.faces</groupId>
			<artifactId>jsf-impl</artifactId>
			<version>2.2.4</version>
		</dependency>
		<!-- Faces Library -->
		<dependency>
			<groupId>com.sun.faces</groupId>
			<artifactId>jsf-api</artifactId>
			<version>2.2.4</version>
		</dependency>
		<!-- Primefaces Version 5 -->
		<dependency>
			<groupId>org.primefaces</groupId>
			<artifactId>primefaces</artifactId>
			<version>5.0</version>
		</dependency>
		<!-- JSP Library -->
		<dependency>
			<groupId>javax.servlet.jsp</groupId>
			<artifactId>javax.servlet.jsp-api</artifactId>
			<version>2.3.1</version>
		</dependency>
		<!-- JSTL Library -->
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jstl</artifactId>
			<version>1.1.2</version>
		</dependency>
	</dependencies>
</project>

. Durch Ausführen von mvn clean package gegen das Projekt erhalten Sie eine bereite WAR-Datei zur Bereitstellung in einem Java-EE-Container. Einfach bereitstellen und prüfen.

Zusammenfassung

Dieses Tutorial zeigt, wie Sie JSF 2 / Primefaces zur Implementierung einer Benutzeroberfläche für Webanwendungen verwenden können. Dabei haben wir die Eclipse IDE verwendet, indem wir ein dynamisches Projekt erstellt und alle erforderlichen Bibliotheken hinzugefügt haben, sei es für die JSF 2-Implementierung oder für die Verwendung von Primefaces-Komponenten. Ab dem nächsten Tutorial verwenden wir Maven, um das Projekt für unsere Beispiele zu erstellen.

PrimeFaces Hello World Projekt herunterladen

Das Beispielprojekt vom obigen Link herunterladen und damit herumspielen, um mehr zu erfahren. Referenz: PrimeFaces Offizielle Website

Source:
https://www.digitalocean.com/community/tutorials/jsf-primefaces-tutorial