- Sản phẩm & Dịch vụSản phẩm & Dịch vụ
- Giải phápGiải pháp
- Bảng giáBảng giá
- Công tyCông ty
- Tài liệuTài liệu
vi
vi
Chuyên mục với các bài viết hướng dẫn, nghiên cứu và phân tích chi tiết về kỹ thuật, các xu hướng công nghệ mới nhất dành cho lập trình viên.
Technical Writer
I have over 5 years of experience writing technical documentation for tech products, making them accessible and user-friendly. My focus is always on providing clear and precise information. @#@ Tôi đã có hơn 5 năm kinh nghiệm viết tài liệu kỹ thuật cho các sản phẩm công nghệ, giúp người dùng dễ dàng tiếp cận và sử dụng. Tôi luôn tập trung vào việc cung cấp thông tin chính xác và dễ hiểu.
Thảo luận (0)
Đăng nhập để thảo luận
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 .
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:
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.
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
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.
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.
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>
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.
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>
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ó.