Поиск по сайту:

Учебник по JSF PrimeFaces

Добро пожаловать в учебник по JSF Primefaces. JavaServer Faces — одна из ведущих платформ, используемых в наши дни для реализации пользовательского интерфейса веб-приложений Java. JSF имеет компонентное веб-приложение и особенно ту часть, которая связана с интерфейсом, поскольку все единое представление в JSF было построено с использованием дерева компонентов на стороне сервера, декодированных в HTML, когда дело доходит до рендеринга в браузере.

Учебник по JSF Primefaces

Что нового в JSF 2

Как мы знаем, JavaServer Faces — это платформа для разработки веб-страниц с богатым пользовательским интерфейсом. JSF был представлен в нескольких запросах сообщества Java JSR, где финальный выпуск JSF 2.2 был выпущен в мае 2013 года. В отличие от JSF 1.x, JSF 2.x поставляется с множеством функций, таких как использование аннотаций для объявления управляемого JSF. bean-компоненты, конвертеры, валидаторы, области и т. д. Это еще не все, JSF 2 предоставил новые области, такие как область просмотра, пользовательская область, область потока и область диалога и многое другое. Кроме того, мы не можем забыть самую удивительную функцию, добавленную в JSF 2, и это концепция Ajax. В JSF 2 Ajax изначально встроен в структуру JSF. Таким образом, любой компонент JSF можно ajaxифицировать, просто добавив материал Ajax. Правила навигации также изменились и стали намного проще. В следующих руководствах будет рассказано больше о тех функциях, которые были добавлены для JSF 2, а в этом руководстве вы собираетесь создать простое приложение JSF и базовый пример того, как мы можем использовать теги Primefaces для реализации определенного бизнес-сценария.

Используемые инструменты для завершения учебника

Чтобы начать знакомство с этим руководством, вам необходимо использовать следующие инструменты разработки.

  1. Томкэт 7
  2. IDE Eclipse
  3. Мавен 3
  4. JSF 2 / Primeface 5

Создание проекта Eclipse

Eclipse IDE поддерживает разработку веб-проектов под эгидой Dynamic Project. Для создания динамического проекта просто выполните следующие шаги:

  • Открыть интегрированную среду разработки Eclipse
  • Щелкните правой кнопкой мыши область проводника проекта и выберите Создать – Динамический веб-проект.

  • Завершите процесс создания проекта, настроив имя проекта, целевую среду выполнения, исходную папку, корневой контекст, каталог содержимого и файл web.xml.

Установка и настройка JSF

Как мы упоминали ранее, наша цель — использовать JSF/Primefaces для разработки веб-приложения, использующего компонент пользовательского интерфейса Primefaces, но на данный момент все, что у нас есть, — это простое динамическое приложение, для которого требуется больше шагов для настройки jsf. Чтобы добавить jsf в свой проект, вам нужно добавить аспект jsf и отметить, что добавление реализации jsf поможет вам создать приложение jsf, использующее Mojarra. Для добавления этого аспекта вам необходимо выполнить следующие шаги:

  1. Открыть окно свойств созданного проекта
  2. На панели Project Facets просто отметьте JavaServer Faces и выполните дальнейшую настройку, необходимую для завершения настройки.
  3. После того, как вы нажмете «Требуется дополнительная настройка», должно появиться окно «Возможности JSF».
  4. Добавление библиотеки реализации jsf, нажав Загрузить библиотеку< и выбрав в открывшемся окне JSF 2.2 (Mojarra 2.2.0)

Праймфейс 5 Установка

На данный момент ваше приложение готово к использованию пользовательского интерфейса JavaServer Faces, но не к использованию Primefaces. Чтобы иметь возможность использовать простые лица, вы должны выполнить следующие шаги:

  1. Загрузите необходимую библиотеку Primefaces с официального сайта Primefaces или из центра Maven.
  2. Включите загруженный файл JAR Primefaces в папку lib, расположенную под папкой WEB-INF.

Разработка приложения Primefaces

Теперь ваш проект готов к разработке приложения JSF/Primefaces, как вы видите. Мы собираемся создать простое приложение, в котором таблица данных Primefaces использует список сотрудников из вспомогательного компонента. Список сотрудников будет заполнен специальным методом @PostConstruct. Выполните следующие шаги для разработки полноценного приложения JSF/Primefaces.

  1. Создайте управляемый компонент ViewEmployeesManagedBean
  2. Создайте Pojo с именем Employee, который содержит EmployeeName и EmployeeId
  3. Создайте представление Primefaces, чтобы использовать список сотрудников в определенном управляемом компоненте

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

Обратите внимание на использование аннотаций JSF и аннотаций PostConstruct для заполнения списка сотрудников.

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

Обратите внимание на использование элемента dataTable для создания таблицы из свойств управляемого компонента. PrimeFaces и JSF позаботятся о том, чтобы передать их на страницу просмотра для рендеринга. Если вы работаете с сервлетами, вы можете легко увидеть, что количество шагов сокращено - в среде сервлета мы сначала обрабатываем запрос в сервлете, создаем данные модели, устанавливаем его как атрибут в запросе/сеансе, а затем пересылаем его в Страница JSP для отображения ответа.

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

Обратите внимание, что javax.faces.webapp.FacesServlet — это класс контроллера, именно здесь мы подключаем JSF к нашему веб-приложению.

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

Преобразовать в Maven

Maven — наиболее предпочтительный способ управления сборкой и зависимостями java-проектов, поэтому здесь мы увидим, как мы можем преобразовать его в Maven. Eclipse IDE предоставляет возможность преобразовать ваш динамический веб-проект в Maven. Maven поможет вам контролировать и управлять необходимыми зависимостями. Просто щелкните правой кнопкой мыши созданный проект и в меню настройки выберите «Преобразовать в проект Maven». После того, как вы изменили свой проект на Maven, вы должны добавить необходимые зависимости, чтобы сделать проект компилируемым самим Maven. Предполагаемый XML-код Maven, который вы получите после преобразования приложения в проект Maven и добавления необходимых библиотек для JSF 2, Primefaces и других, выглядит следующим образом:

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

И, выполнив пакет mvn clean для проекта, вы получите файл WAR, готовый для развертывания в любом контейнере Java EE. Просто развернуть и изучить.

Резюме

В этом руководстве показано, как можно использовать JSF 2/Primefaces для реализации пользовательского интерфейса веб-приложения. Для этого мы использовали Eclipse IDE, создав динамический проект с последующим добавлением всех необходимых библиотек, либо обязательных для реализации JSF 2, либо необходимых для использования компонентов Primefaces. Начиная со следующего урока, мы будем использовать Maven для создания проекта для наших примеров.

Скачать проект PrimeFaces Hello World

Загрузите пример проекта по ссылке выше и поэкспериментируйте с ним, чтобы узнать больше. Ссылка: Официальный сайт Primefaces