JSF PrimeFaces Zelfstudie

Handleidingen
JSF

Welkom bij de JSF Primefaces tutorial. JavaServer Faces is een van de toonaangevende frameworks die tegenwoordig worden gebruikt voor het implementeren van de gebruikersinterface van Java-webapplicaties. JSF heeft de webapplicatie gecomponentiseerd, met name dat deel dat betrekking heeft op de interface, waarbij elke afzonderlijke weergave in de JSF is opgebouwd met behulp van een server-side boom van componenten die worden omgezet in HTML wanneer ze in de browser worden weergegeven.

JSF Primefaces Tutorial

Het proces van het renderen van de view in JSF gaat door wat bekend staat als de JSF-levenscyclus. Deze tutorial is niet bedoeld om een gedetailleerde discussie te bieden over hoe de levenscyclus werkt of hoe we ermee om kunnen gaan. Het is gewoon een melding over wat je moet weten over het JSF-framework en hoe je de JSF-view klaar kunt maken voor het renderen. JSF heeft twee belangrijke implementaties tot het moment waarop het artikel is geschreven: de Oracle-implementatie Mojarra en de Apache MyFaces-implementatie. Verschillende JSF-bibliotheken zijn ontstaan, zoals Richfaces, IceFaces, Primefaces, MyFaces, etc., en een van de meest toonaangevende bibliotheken die intensief worden gebruikt en een uitstekende reputatie hebben, is Primefaces. Primefaces heeft enkele maanden geleden gevierd door de release van Primefaces 5, wat het onderwerp van deze tutorial en de komende tutorials zal zijn. Om Primefaces 5 te kunnen gebruiken, moet je het installeren en configureren in je project. Of je nu een eenvoudige teksteditor of een enterprise-ontwikkelomgeving gaat gebruiken, tegen het einde van deze tutorial ben je klaar om alle Primefaces-componenten te ontdekken.

Wat is er nieuw in JSF 2

Zoals we weten, is JavaServer Faces een framework voor het ontwikkelen van rijke gebruikersinterface webpagina’s. JSF is geïntroduceerd in verschillende Java Community Request JSR’s, waar de uiteindelijke release van JSF 2 plaatsvond in juli 2009, met een reeks verbeteringen en nieuwe functionaliteiten. Een reeks ontwikkelingen heeft JSF 2 gevolgd, waarvan de laatste JSF 2.2 was, uitgebracht in mei 2013. In tegenstelling tot JSF 1.x is JSF 2.x geleverd met veel nieuwe functies, zoals het gebruik van annotaties voor het declareren van JSF-beheerde beans, converters, validators, scopes, enzovoort. Dat is nog niet het hele verhaal; JSF 2 heeft ook nieuwe scopes geïntroduceerd, zoals View Scope, Custom Scope, Flow Scope en Conversation Scope, en nog veel meer. Ook mogen we niet vergeten dat de meest verbazingwekkende functie die aan JSF 2 is toegevoegd, het Ajax-concept is. In JSF 2 is Ajax inherent ingebouwd in het JSF-framework. Hierdoor kan elke JSF-component eenvoudig worden geajaxificeerd door simpelweg de Ajax-functionaliteit toe te voegen. Navigatieregels zijn ook veranderd en zijn nu veel eenvoudiger. De komende tutorials zullen dieper ingaan op de functies die zijn toegevoegd aan JSF 2. In deze tutorial ga je echter een eenvoudige JSF-toepassing maken en een basisvoorbeeld geven van hoe we Primefaces-tags kunnen gebruiken om bepaalde zakelijke scenario’s te implementeren.

Gebruikte tools voor het voltooien van de tutorial

Om met deze tutorial aan de slag te gaan, moet je de volgende ontwikkelingstools gebruiken.

  1. Tomcat 7
  2. Eclipse IDE
  3. Maven 3
  4. JSF 2 / Primefaces 5

Het is duidelijk dat we Tomcat 7 hebben gebruikt om de applicatie te implementeren en Eclipse IDE voor het ontwikkelen van de benodigde componenten, waarbij Maven wordt gebruikt als buildtool en voor het beheren van afhankelijkheden. Zorg ervoor dat je op de hoogte bent van hoe al deze software op je ontwikkelmachine geïnstalleerd en geconfigureerd kan worden. Ons uiteindelijke project zal eruitzien zoals te zien is in de onderstaande afbeelding.

Creëren van Eclipse Project

Eclipse IDE ondersteunt de ontwikkeling van een webproject onder de Dynamic Project-paraplu. Volg gewoon de onderstaande stappen om een dynamisch project te maken:

  • Open Eclipse IDE
  • Klik met de rechtermuisknop in de project explorer-ruimte en selecteer New – Dynamic Web Project

  • Voltooi het projectcreatieproces door de projectnaam, doel-runtime, bronmap, context-root, inhoudsmap en web.xml in te stellen

JSF Installatie en Configuratie

Zoals we eerder hebben vermeld, is ons doel om JSF/PrimeFaces te gebruiken voor het ontwikkelen van webapplicaties die de PrimeFaces-gebruikersinterfacecomponent gebruiken, maar voorlopig hebben we alleen een eenvoudige dynamische applicatie die meer stappen nodig heeft om jsf geconfigureerd te worden. Om een jsf aan uw project toe te voegen, moet u de jsf-facet toevoegen en er rekening mee houden dat het toevoegen van de jsf-implementatie u helpt bij het bouwen van een jsf-applicatie die Mojarra gebruikt. Om die facet toe te voegen, moet u de volgende stappen volgen:

  1. Open het eigenschappenvenster voor het aangemaakte project
  2. Vink in het venster Projectfacetten gewoon JavaServer Faces aan en volg Verdere configuratie vereist om de configuratie te voltooien
  3. Nadat u hebt geklikt op Verdere configuratie vereist, moet het venster JSF-mogelijkheden worden weergegeven
  4. Voeg de jsf-implementatiebibliotheek toe door te klikken op Bibliotheek downloaden< en selecteer in het geopende venster JSF 2.2 (Mojarra 2.2.0)

Na het installeren van de JSF-bibliotheek ziet het venster JSF-mogelijkheden eruit als Aan het einde van deze fase heeft u een webapplicatie met jsf-mogelijkheden.

Installatie PrimeFaces 5

Voor nu is jouw applicatie klaar voor het gebruik van een JavaServer Faces User Interface, maar zonder het gebruik van Primefaces. Om Primefaces te kunnen gebruiken, dien je de onderstaande stappen te volgen:

  1. Download de benodigde Primefaces-bibliotheek van de officiële Primefaces-website of van Maven Central.
  2. Voeg de gedownloade Primefaces JAR toe aan je lib-map, die zich onder de WEB-INF-map bevindt

Ontwikkeling van een Primefaces-applicatie

Nu is jouw project klaar voor het ontwikkelen van een JSF/Primefaces-toepassing, zoals je zult zien. We gaan een eenvoudige toepassing maken waarin een Primefaces DataTable een lijst met werknemers uit de backing bean verbruikt. De werknemerslijst wordt gevuld door een speciale methode @PostConstruct. Volg de onderstaande stappen voor het ontwikkelen van een volledige JSF/Primefaces-toepassing.

  1. Maak een beheerde bean met de naam ViewEmployeesManagedBean
  2. Maak een Pojo met de naam Employee die EmployeeName en EmployeeId bevat
  3. Maak een Primefaces-weergave om de lijst met werknemers in de gedefinieerde beheerde bean te consumeren
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;
	}
}

Let op het gebruik van JSF-annotaties en het gebruik van de PostConstruct-annotatie om de lijst met werknemers te vullen.

<!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>

Let op het gebruik van het dataTable-element om de tabel te maken vanuit de beheerde bean-eigenschappen. PrimeFaces en JSF zorgen ervoor dat deze naar de weergavepagina worden doorgegeven voor rendering. Als je uit de Servlet-achtergrond komt, kun je gemakkelijk zien dat het aantal stappen is verminderd – in de servlet-omgeving behandelen we eerst het verzoek in de servlet, maken we de modelgegevens, stellen we deze in als attribuut in het verzoek/sessie en sturen we het dan door naar de JSP-pagina om de respons weer te geven.

<?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>

Let op dat javax.faces.webapp.FacesServlet de controllerklasse is, dit is waar we JSF in onze webtoepassing integreren.

<?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 geven we JSF-componentconfiguraties zoals beheerde beans, internationale global berichten, aangepaste view handlers en aangepaste factory-klassen op. Omdat we annotaties gebruiken en het een eenvoudig project is, is hier geen configuratie gedaan, maar we zullen het gebruik ervan zien in toekomstige berichten. Nu wanneer je dit uitvoert, krijg je de output zoals weergegeven in de onderstaande afbeelding.

Omzetten in Maven

Maven is de meest voorkeursmethode om de bouw en afhankelijkheden van Java-projecten te beheren, dus hier zullen we zien hoe we het naar Maven kunnen converteren. Eclipse IDE biedt de optie om uw Dynamisch Webproject in Maven om te zetten. Maven zal u helpen bij het beheren van de vereiste afhankelijkheden. Klik met de rechtermuisknop op het aangemaakte project en selecteer vanuit het configureermenu ‘Converteren naar Maven-project’. Zodra u uw project in Maven hebt veranderd, moet u de vereiste afhankelijkheden toevoegen om het project compileerbaar te maken door Maven zelf. De veronderstelde Maven XML die u krijgt nadat u de toepassing hebt omgezet in een Maven-project en nadat u de vereiste bibliotheken voor JSF 2, Primefaces en andere hebt toegevoegd, is:

<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>

En door het uitvoeren van mvn clean package tegen het project, krijgt u een WAR-bestand dat klaar is om te worden ingezet tegen een willekeurige Java EE-container. Deploy en onderzoek gewoon.

Samenvatting

Deze tutorial heeft geïntroduceerd hoe je een gebruikersinterface voor een webapplicatie kunt implementeren met behulp van JSF 2 / Primefaces. Hiervoor hebben we Eclipse IDE gebruikt, door eerst een dynamisch project aan te maken en vervolgens alle vereiste bibliotheken toe te voegen, zowel die verplicht zijn voor de implementatie van JSF 2 als die nodig zijn voor het gebruik van Primefaces-componenten. Vanaf de volgende tutorial zullen we Maven gebruiken om het project voor onze voorbeelden te maken.

Download het PrimeFaces Hello World Project

Download het voorbeeldproject via de bovenstaande link en speel ermee om meer te leren. Referentie: Officiële website van Primefaces

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