Series PrimeFaces – Phần 1, PrimeFaces là gì? ví dụ với PrimeFaces và JSF

Posted on by cuongth

Series PrimeFaces – Phần 1, PrimeFaces là gì? ví dụ với PrimeFaces và JSF.

1. PrimeFaces là gì?

Primefaces là một framework mã nguồn mở cho JSF (JavaServer Faces) với hơn 100 component, tối ưu cho mobile, validate phía client, hỗ trợ AJAX mạnh mẽ…

PrimeFaces cũng được coi là một trong những thư viện UI phổ biến nhất trong hệ sinh thái Java, được sử dụng rộng rãi bởi nhiều công ty, tập đoàn lớn trên thế giới như: Cisco, Ebay, HP, Ford…

Ở series này mình sẽ nói về PrimeFaces Showcase – thư viện UI dựa trên JSF
(Ngoài PrimeFaces Showcase thì còn có PrimeFacesNG base trên Angular JS, PrimeFacesReact base trên ReactJS…)

2. Tại sao dùng PrimeFaces?

Ở loạt bài về JSF – Xử lý AJAX trong JSF mình có nhắc tới JSF xử lý AJAX rất mạnh, thì với PrimeFaces khả năng xử lý ấy còn mạnh mẽ hơn ở mức từng component, tùy chỉnh linh hoạt…

  • Đơn giản và hiệu suất: PrimeFaces rất nhẹ, cấu hình đơn giản
  • Dễ sử dụng
  • Cộng đồng lớn
  • Kết hợp với Spring: Được Spring khuyên dùng trong các ứng dụng Spring – JSF

3. Tạo ví dụ đơn giản với JSF

Mình sẽ tạo một project dựa trên

Các bước tạo project demo thực hiện y hệt như tạo một project JSF, chỉ có điều là nó thêm thư viện PrimeFaces vào file pom.xml

  • Tạo Maven Project với tên là PrimeFaces-Hello

Series PrimeFaces - PrimeFaces là gì? ví dụ với PrimeFaces và JSF

 

  • Tạo file web.xml bằng cách click chuột phải vào Deployment Description và chọn Generate Deployment Descriptior Stub

Thêm thư viện JSF và PrimeFaces vào file pom.xml

<dependencies>
  <dependency>
    <groupId>com.sun.faces</groupId>
    <artifactId>jsf-api</artifactId>
    <version>2.2.8</version>
  </dependency>
  <dependency>
    <groupId>com.sun.faces</groupId>
    <artifactId>jsf-impl</artifactId>
    <version>2.2.8</version>
  </dependency>

  <!-- https://mvnrepository.com/artifact/org.primefaces/primefaces -->
  <dependency>
    <groupId>org.primefaces</groupId>
    <artifactId>primefaces</artifactId>
    <version>6.0</version>
  </dependency>

</dependencies>

Ở một số version PrimeFaces cũ hơn bản phải khai báo cả repository cho nó:

<repositories>
  <repository>
    <id>prime-repo</id>
    <name>Prime Repo</name>
    <url>http://repository.primefaces.org</url>
  </repository>
</repositories>

 

  • Cấu hình framework trong file web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xmlns="http://java.sun.com/xml/ns/javaee"
  xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
  version="2.5">
  <display-name>PrimeFaces-Hello</display-name>

  <!-- Welcome page -->
  <welcome-file-list>
    <welcome-file>index.xhtml</welcome-file>
  </welcome-file-list>

  <!-- Change to "Production" when you are ready to deploy -->
  <context-param>
    <param-name>javax.faces.PROJECT_STAGE</param-name>
    <param-value>Development</param-value>
  </context-param>

  <!-- JSF mapping -->
  <servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <!-- Map these files with JSF -->
  <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>
  <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>*.xhtml</url-pattern>
  </servlet-mapping>
</web-app>
  • Tạo file HelloBean.java chứa dữ liệu
@ManagedBean
@SessionScoped
public class HelloBean {

  private String name = "name";

  private String description = "this is description";

  private Date date = new Date();

  public String getName() {
    return name;
  }

  public String getDescription() {
    return description;
  }

  public void setDescription(String description) {
    this.description = description;
  }

  public Date getDate() {
    return date;
  }

  public void setDate(Date date) {
    this.date = date;
  }

  public void setName(String name) {
    this.name = name;
  }

}
  • Tạo file index.xhtml 

Dùng thẻ input text, calendar, editor của primeface để hiển thị và nhập dữ liệu

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
  <h:form>
    <h1>Hello World!</h1>
    <br />
    <br />
    <p:outputLabel value="Name: " />
    <p:inputText value="#{helloBean.name}" />
    <br />
    <p:outputLabel value="Description:" />
    <p:editor value="#{helloBean.description}" width="500" />
    <br />
    <p:outputLabel for="date" value="Date:" />
    <p:calendar id="date" value="#{helloBean.date}" mode="inline" />

  </h:form>
</h:body>
</html>

Kết quả:

Series PrimeFaces - PrimeFaces là gì? ví dụ với PrimeFaces và JSF

Okay, Done!

Vậy là chúng ta đã giới thiệu xong về PrimeFaces và tạo được 1 project đơn giản dùng PrimeFaces

Các bạn có thể download source của ví dụ trên tại đây

Thanks các bạn đã theo dõi! Phần tiếp theo chúng ta sẽ tìm hiểu chi tiết hơn về các component, theme trong PrimeFaces.

References:

https://www.primefaces.org/showcase/

stackjava.com