STACKJAVA

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

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…

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

 

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>

 

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

}

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

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/