Hướng dẫn về JSF PrimeFaces

Chào mừng bạn đến với hướng dẫn về JSF PrimeFaces.

JavaServer Faces (JSF) là một trong những framework hàng đầu được sử dụng ngày nay để triển khai giao diện người dùng cho các ứng dụng web Java. JSF đã tạo ra các ứng dụng web theo hướng thành phần, đặc biệt là phần liên quan đến giao diện.

Trong đó, mọi view đơn lẻ trong JSF đều được xây dựng bằng cách sử dụng một cây các thành phần ở phía máy chủ và được giải mã thành HTML khi được hiển thị trong trình duyệt.

Quá trình hiển thị giao diện trong JSF phải đi qua JSF lifecycle. Hướng dẫn này không nhằm mục đích cung cấp cho bạn một cuộc thảo luận chi tiết về cách lifecycle hoạt động hoặc cách chúng ta có thể xử lý nó.

Đây chỉ là một thông báo về những gì bạn nên biết về framework JSF và cách chuẩn bị một view của JSF để hiển thị.

JSF có hai triển khai chính cho đến thời điểm bài viết này được viết: triển khai Mojarra của Oracle và MyFaces của Apache. Một số thư viện JSF đã ra đời như Richfaces, IceFaces, Primefaces, MyFaces, v.v. và một trong những thư viện hàng đầu được sử dụng rộng rãi và có danh tiếng xuất sắc là Primefaces.

Primefaces đã kỷ niệm vài tháng trước bằng cách phát hành Primefaces 5, phiên bản sẽ là chủ đề của hướng dẫn này và các hướng dẫn tiếp theo. Để có thể sử dụng Primefaces 5, bạn phải cài đặt và cấu hình nó vào dự án của mình.

Cho dù bạn sẽ sử dụng một trình soạn thảo văn bản đơn giản hay một môi trường phát triển doanh nghiệp, khi kết thúc hướng dẫn này, bạn sẽ sẵn sàng khám phá tất cả các thành phần của Primefaces.

Như chúng ta đã biết, JavaServer Faces là một framework để phát triển các trang web với giao diện người dùng phong phú. JSF đã được giới thiệu trong một số Java Community Request JSR, trong đó bản phát hành cuối cùng của JSF 2 được ra mắt vào tháng 7 năm 2009, chứa một bộ các cải tiến và chức năng mới.

Một loạt các phiên bản tiếp theo đã ra đời sau JSF 2 và phiên bản cuối cùng là JSF 2.2, được phát hành vào tháng 5 năm 2013. Không giống như JSF 1.x, JSF 2.x đi kèm với rất nhiều tính năng như sử dụng annotations để khai báo các managed beans, Converters, Validators, Scopes, v.v.

Đó chưa phải là tất cả, JSF 2 còn cung cấp các scopes mới như View Scope, Custom Scope, Flow Scope và Conversation Scope cùng nhiều tính năng khác. Ngoài ra, chúng ta không thể quên tính năng tuyệt vời nhất được thêm vào cho JSF 2, đó là khái niệm Ajax. Trong JSF 2, Ajax đã được tích hợp một cách tự nhiên vào framework JSF.

Vì vậy, bất kỳ thành phần nào của JSF cũng có thể được “ajaxified” chỉ bằng cách thêm các thành phần Ajax. Các quy tắc điều hướng cũng đã được thay đổi và trở nên dễ dàng hơn nhiều. Các hướng dẫn tiếp theo sẽ đề cập chi tiết hơn về các tính năng này được thêm vào cho JSF 2, trong khi ở hướng dẫn này, bạn sẽ tạo một ứng dụng JSF đơn giản và một ví dụ cơ bản về cách chúng ta có thể sử dụng các thẻ của Primefaces để triển khai một kịch bản kinh doanh nhất định.

Để bắt đầu khám phá hướng dẫn này, bạn phải sử dụng các công cụ phát triển sau:

1. Tomcat 7

2. Eclipse IDE

3. Maven 3

4. JSF 2 / Primefaces 5

Rõ ràng là chúng ta đã sử dụng Tomcat 7 để triển khai ứng dụng và Eclipse IDE để phát triển các thành phần cần thiết, trong khi Maven được sử dụng như một công cụ xây dựng và để quản lý các phụ thuộc. Vì vậy, hãy đảm bảo rằng bạn đã biết cách cài đặt và cấu hình tất cả các phần mềm này vào máy phát triển của mình. Dự án cuối cùng của chúng ta sẽ trông giống như hình ảnh bên dưới.

**Tạo dự án Eclipse**

Eclipse IDE hỗ trợ phát triển dự án web trong phạm vi của Dynamic Project. Để tạo một dự án web trong Eclipse IDE, bạn có thể thực hiện theo các bước sau:

1. Mở Eclipse IDE.

2. Nhấp chuột phải vào không gian Project Explorer và chọn New > Dynamic Web Project

Hoàn tất quá trình tạo dự án bằng cách thiết lập tên dự án, môi trường chạy mục tiêu, thư mục nguồn, thư mục gốc, thư mục nội dung và `web.xml`.

Như chúng ta đã đề cập trước đó, mục tiêu của chúng ta là sử dụng JSF/PrimeFaces để phát triển ứng dụng web sử dụng các thành phần giao diện người dùng của PrimeFaces.

Nhưng hiện tại, tất cả những gì chúng ta có chỉ là một ứng dụng động (dynamic application) đơn giản cần thêm các bước để được cấu hình JSF.

Để thêm JSF vào dự án, bạn cần thêm JSF facet và lưu ý rằng việc thêm triển khai JSF sẽ giúp bạn xây dựng một ứng dụng JSF sử dụng Mojarra. Để thêm facet đó, bạn cần làm theo các bước sau:

1. Mở cửa sổ Properties cho dự án đã tạo.

2. Từ mục Project Facets, chỉ cần chọn JavaServer Faces và làm theo Further configuration required để hoàn tất cấu hình.

3. Khi bạn đã nhấp vào Further configuration required, cửa sổ JSF Capabilities sẽ xuất hiện.

4. Thêm thư viện triển khai JSF bằng cách nhấp vào Download Library và chọn JSF 2.2 (Mojarra 2.2.0) từ cửa sổ mở ra.

Sau khi cài đặt thư viện JSF, cửa sổ JSF capabilities sẽ trông như sau:

Sau khi hoàn tất, bạn sẽ có một ứng dụng web với đầy đủ các tính năng của JSF.

Hiện tại, ứng dụng của bạn đã sẵn sàng để sử dụng giao diện người dùng JavaServer Faces, nhưng chưa thể sử dụng PrimeFaces. Để có thể sử dụng PrimeFaces, bạn phải làm theo các bước sau:

1. Tải thư viện PrimeFaces cần thiết từ trang web chính thức của PrimeFaces hoặc từ Maven Central.

2. Bao gồm tệp JAR của PrimeFaces đã tải xuống vào thư mục `lib` nằm trong thư mục `WEB-INF`.

Bây giờ, dự án của bạn đã sẵn sàng để phát triển một ứng dụng JSF/PrimeFaces. Chúng ta sẽ tạo một ứng dụng đơn giản, trong đó một PrimeFaces DataTable sẽ sử dụng một danh sách nhân viên từ backing bean. Danh sách nhân viên này sẽ được điền dữ liệu bằng một phương thức đặc biệt `@PostConstruct`.

Hãy làm theo các bước dưới đây để phát triển một ứng dụng JSF/PrimeFaces hoàn chỉnh:

1. Tạo một managed bean có tên là ViewEmployeesManagedBean.

2. Tạo một Pojo có tên Employee chứa EmployeeName và EmployeeId.

3. Tạo một PrimeFaces view để sử dụng danh sách nhân viên trong managed bean đã định nghĩa.

“`

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;

}

}

“`

Xin lưu ý về việc sử dụng các JSF annotations và PostConstruct annotation để điền dữ liệu vào danh sách nhân viên.

“`

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

“`

Chú ý việc sử dụng phần tử `dataTable` để tạo bảng từ các thuộc tính của managed bean. PrimeFaces và JSF sẽ tự động xử lý việc truyền dữ liệu này tới trang view để hiển thị.

Nếu bạn đã có kinh nghiệm với Servlet, bạn có thể dễ dàng thấy rằng số bước đã được cắt giảm đi rất nhiều.

Trong môi trường Servlet, chúng ta đầu tiên xử lý yêu cầu trong Servlet, tạo dữ liệu cho model, đặt nó làm thuộc tính trong request hoặc session, sau đó chuyển tiếp đến trang JSP để hiển thị phản hồi.

“`

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

“`

Lưu ý rằng javax.faces.webapp.FacesServlet là lớp điều khiển (controller class), đây là nơi chúng ta tích hợp JSF vào ứng dụng web của mình.

“`

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

“`

Đây là nơi chúng ta cung cấp các cấu hình cho những thành phần của JSF như managed beans, thông điệp toàn cầu i18n, custom view handlers và custom factory classes.

Vì chúng ta đang sử dụng các annotations và đây là một dự án đơn giản, nên không có cấu hình nào được thực hiện ở đây. Tuy nhiên, chúng ta sẽ tìm hiểu cách sử dụng nó trong các bài viết sau. Bây giờ, khi bạn chạy ứng dụng, bạn sẽ nhận được kết quả như trong hình ảnh bên dưới.

Maven là cách được ưa chuộng nhất để quản lý việc xây dựng và các thư viện phụ thuộc (dependencies) của các dự án Java. Vì vậy, ở đây chúng ta sẽ xem cách chuyển đổi dự án sang Maven.

Eclipse IDE cung cấp tùy chọn để chuyển đổi Dynamic Web Project của bạn thành Maven. Maven sẽ giúp bạn kiểm soát và quản lý các thư viện phụ thuộc cần thiết. Chỉ cần nhấp chuột phải vào dự án đã tạo, từ menu Configure, chọn Convert into Maven Project.

Khi bạn đã chuyển dự án thành Maven, bạn phải thêm các thư viện phụ thuộc cần thiết để Maven có thể biên dịch dự án. Dưới đây là tệp Maven XML (pom.xml) mà bạn sẽ có sau khi chuyển đổi ứng dụng sang dự án Maven và đã thêm các thư viện cần thiết cho JSF 2, PrimeFaces và các thư viện khác:

“`

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

“`

Bằng cách thực thi lệnh `mvn clean package` trên dự án, bạn sẽ nhận được một tệp WAR sẵn sàng để triển khai trên bất kỳ vùng chứa Java EE nào. Chỉ cần triển khai và kiểm tra.

Hướng dẫn này đã giới thiệu cách bạn có thể sử dụng JSF 2 / PrimeFaces để triển khai giao diện người dùng cho một ứng dụng web. Chúng ta đã sử dụng Eclipse IDE để thực hiện điều này, bằng cách tạo một dự án động (dynamic project), sau đó thêm tất cả các thư viện cần thiết, bao gồm cả những thư viện bắt buộc cho việc triển khai JSF 2 và những thư viện cần thiết để sử dụng các thành phần của PrimeFaces.

Từ hướng dẫn tiếp theo trở đi, chúng tôi sẽ sử dụng Maven để tạo dự án cho các ví dụ của mình.

[Tải xuống dự án PrimeFaces Hello World](https://journaldev.nyc3.cdn.digitaloceanspaces.com/primefaces/JournalDev-PrimefacesWebApplication.zip)

Bạn có thể tải xuống dự án mẫu từ liên kết trên và khám phá để tìm hiểu thêm.

Tham khảo: [Trang web chính thức của PrimeFaces](https://www.primefaces.org/)