5 phút để đọc
Chào mừng đến với hướng dẫn JSF dành cho người mới bắt đầu.
Công nghệ Java Server Faces (JSF) là một framework front end giúp trong việc tạo các thành phần giao diện dễ dàng hơn nhờ khả năng tái sử dụng các thành phần UI.
JSF được thiết kế dựa trên mô hình Model View Controller (MVC) để phân tách rõ ràng lớp presentation, controller và business logic .
Hướng dẫn JSF dành cho người mới bắt đầu
Trong Model View Controller, model chứa business logic cần thiết để hoàn thành kịch bản nghiệp vụ, view đại diện cho lớp presentation như các trang JSP hoặc JSF, và controller đại diện cho quá trình xử lý quyền điều khiển cho model/ view tùy thuộc vào hoạt động được yêu cầu. JSF cung cấp các thành phần sau để tạo UI:
- Các phần tử nhập liệu cơ bản tiêu chuẩn như fields (trường), buttons (nút),… tạo thành bộ base UI components.
- Khả năng rendering (kết xuất) của JSF tùy thuộc vào các client specifications (thông số kỹ thuật của client).
- Core library (thư viện lõi).
- Mở rộng các UI components có sẵn để thêm nhiều thành phần hơn và sử dụng chúng để đáp ứng các yêu cầu của client.
Hướng dẫn JSF dành cho người mới bắt đầu – Cài đặt môi trường
Tại đây, chúng ta sẽ thực hiện tất cả các bước cần thiết để thiết lập máy tính của bạn nhằm tạo ứng dụng JSF đầu tiên.
Cài đặt JDK
Tải xuống jdk từ trang web Oracle sau: https://www.oracle.com/technetwork/java/javase/downloads/index.html. Đặt biến môi trường JAVA_HOME trỏ đến đường dẫn bin (nhị phân) của jdk đã cài đặt. Ví dụ: “C:\Program Files\Java\jdk1.7.0_60”. Cũng thêm JAVA_HOME\bin vào biến PATH để định vị các tệp java binaries (nhị phân Java). Bây giờ, hãy xác minh xem java đã được cài đặt thành công trên máy chưa bằng cách gõ javac vào cửa sổ lệnh, lệnh này sẽ hiển thị tất cả các tùy chọn có sẵn, hoặc “java -version” sẽ hiển thị phiên bản java đã cài đặt trên máy. Để biết thêm chi tiết, bạn có thể tham khảo bài viết sau: Cách cài đặt Java trên Windows
Cài đặt IDE
Một số IDEs phổ biến có sẵn bao gồm Eclipse, NetBeans và IntelliJ IDEA. Tải xuống eclipse từ liên kết sau https://www.eclipse.org/downloads/ và chạy tệp binary (nhị phân) đã tải xuống và cài đặt eclipse trên máy của bạn. Đối với NetBeans, hãy tải xuống NetBeans IDE từ https://netbeans.org/downloads/ và hoàn tất quá trình cài đặt.
Cài đặt Apache Tomcat
Tải xuống Tomcat từ liên kết sau https://tomcat.apache.org/. Chạy tệp binary đã tải xuống và đặt biến CATALINA_HOME trỏ đến đường dẫn cài đặt. Bây giờ hãy khởi động server và truy cập https://localhost:8080 trên trình duyệt yêu thích của bạn, trình duyệt này sẽ hiển thị trang Tomcat mặc định nếu được cài đặt thành công. Thiết lập cơ bản của chúng ta đã sẵn sàng, hãy chuyển sang tạo ứng dụng JSF đầu tiên của chúng ta.
Hướng dẫn JSF dành cho người mới bắt đầu – Ứng dụng Hello World
Bây giờ chúng ta hãy tạo một ứng dụng web JSF hello world đơn giản. Tải xuống các jars sau đây, chúng rất cần thiết để thực thi mã liên quan đến JSF. Chúng có thể được tải xuống từ kho lưu trữ trung tâm maven https://search.maven.org/. Một cách minh bạch hơn để quản lý các dependencies (phụ thuộc) là sử dụng hệ thống xây dựng như maven. Đối với tất cả các ví dụ của chúng tôi, chúng tôi sẽ sử dụng maven. Vui lòng tham khảo tệp pom.xml cho các dependencies (phụ thuộc). jsf-api-1.2.jar jsf-impl-2.2.8-04.jar pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<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>com.journaldev.jsf</groupId>
<artifactId>JSF_HelloWorld</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>war</packaging>
<name>JSF_HelloWorld</name>
<properties>
<endorsed.dir>${project.build.directory}/endorsed</endorsed.dir>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
</properties>
<dependencies>
<dependency>
<groupId>javax</groupId>
<artifactId>javaee-web-api</artifactId>
<version>7.0</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-api</artifactId>
<version>2.1.13</version>
</dependency>
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-impl</artifactId>
<version>2.1.13</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.1</version>
<configuration>
<source>1.7</source>
<target>1.7</target>
<compilerArguments>
<endorseddirs>${endorsed.dir}</endorseddirs>
</compilerArguments>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>2.3</version>
<configuration>
<failOnMissingWebXml>false</failOnMissingWebXml>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-dependency-plugin</artifactId>
<version>2.6</version>
<executions>
<execution>
<phase>validate</phase>
<goals>
<goal>copy</goal>
</goals>
<configuration>
<outputDirectory>${endorsed.dir}</outputDirectory>
<silent>true</silent>
<artifactItems>
<artifactItem>
<groupId>javax</groupId>
<artifactId>javaee-endorsed-api</artifactId>
<version>7.0</version>
<type>jar</type>
</artifactItem>
</artifactItems>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>
</project>
Hướng dẫn JSF dành cho người mới bắt đầu – Tạo một Managed Bean
Một managed bean là một lớp java được đăng ký vào JSF, giúp tương tác giữa UI và business logic trở nên khả thi. Tạo một managed bean có tên HelloWorld.java bằng cách sử dụng annotation @ManagedBean như sau:
package com.journaldev.jsf.helloworld;
import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean(name="helloWorld")
@SessionScoped
public class HelloWorld implements Serializable{
private static final long serialVersionUID = -6913972022251814607L;
private String s1 = "Hello World!!";
public String getS1() {
System.out.println(s1);
return s1;
}
public void setS1(String s1) {
this.s1 = s1;
}
}
Annotation @ManagedBean cho biết lớp HelloWorld là một managed bean. @SessionScoped bean cho biết rằng bean vẫn tồn tại cho đến khi HttpSession hợp lệ. Tại đây, một string (chuỗi) s1 được khai báo và khởi tạo với “Hello World” và các phương thức getter và setter được xác định để truy xuất giá trị của string s1. Chúng ta cũng có thể cung cấp tên bean chẳng hạn như @ManagedBean(name=”helloWorld”). Nếu không có tên nào được cung cấp, nó sẽ được suy ra theo tiêu chuẩn đặt tên của java. Thực hành tốt nhất là luôn cung cấp tên bean.
Hướng dẫn JSF dành cho người mới bắt đầu – Trang View
Bây giờ, hãy tạo một trang JSF có tên helloWorld.xhtml, trang này tương tác với bean HelloWorld và truy xuất giá trị thông qua phương thức getter và in giá trị đó vào trang response (phản hồi). helloWorld.xhtml
Ở đây, chúng ta gọi tên bean theo sau là biến string được khai báo trong bean là “helloWorld.s1”, nó sẽ lấy giá trị “Hello World”.
<?xml version='1.0' encoding='UTF-8' ?>
<!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:h="<https://java.sun.com/jsf/html>">
<h:head>
<title>Hello World JSF Example</title>
</h:head>
<h:body>
#{helloWorld.s1}
<br /><br />
</h:body>
</html>
Cấu hình Deployment Descriptor
Phần cuối cùng là cấu hình lớp JSF Controller để xử lý các yêu cầu của client. JSF controller servlet là FacesServlet, cấu hình web.xml cuối cùng được đưa ra dưới đây. web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.1" 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-app_3_1.xsd>">
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
<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>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>faces/helloWorld.xhtml</welcome-file>
</welcome-file-list>
</web-app>
Cấu trúc dự án JSF Hello world cuối cùng bây giờ sẽ trông giống như sau trong Eclipse.
Trong web.xml, chúng ta chỉ định mục nhập tệp faces config cùng với mapping servlet cho faces, session timeout và welcome file, tệp này sẽ được tải khi ứng dụng khởi động. Khi chúng ta đã hoàn tất những thay đổi này, chúng ta sẽ chạy ứng dụng và ứng dụng sẽ in ra kết quả sau trong trình duyệt.
Đó là tất cả cho hướng dẫn JSF dành cho người mới bắt đầu. Chúng ta sẽ xem xét các thành phần trang JSF khác nhau trong các bài viết sắp tới. Trong thời gian chờ đợi, bạn có thể tải xuống dự án từ liên kết bên dưới và tìm hiểu thêm về nó.
