JSF - Ứng dụng đầu tiên

Để tạo một ứng dụng JSF đơn giản, chúng tôi sẽ sử dụng plugin maven-archetype-webapp. Trong ví dụ sau, chúng tôi sẽ tạo một dự án ứng dụng web dựa trên maven trong thư mục C: \ JSF.

Tạo dự án

Hãy mở bảng điều khiển lệnh, truy cập C:\ > JSF thư mục và thực thi những điều sau mvn chỉ huy.

C:\JSF>mvn archetype:create  
-DgroupId = com.tutorialspoint.test  
-DartifactId = helloworld  
-DarchetypeArtifactId = maven-archetype-webapp

Maven sẽ bắt đầu xử lý và sẽ tạo cấu trúc dự án ứng dụng web java hoàn chỉnh.

[INFO] Scanning for projects... 
[INFO] Searching repository for plugin with prefix: 'archetype'. 
[INFO] ------------------------------------------------------------- 
[INFO] Building Maven Default Project 
[INFO]    task-segment: [archetype:create] (aggregator-style) 
[INFO] ------------------------------------------------------------- 
[INFO] [archetype:create {execution: default-cli}] 
[INFO] Defaulting package to group ID: com.tutorialspoint.test 
[INFO] artifact org.apache.maven.archetypes:maven-archetype-webapp:  
checking for updates from central 
[INFO] ------------------------------------------------------------- 
[INFO] Using following parameters for creating project  
from Old (1.x) Archetype: maven-archetype-webapp:RELEASE 
[INFO] ------------------------------------------------------------- 
[INFO] Parameter: groupId, Value: com.tutorialspoint.test 
[INFO] Parameter: packageName, Value: com.tutorialspoint.test 
[INFO] Parameter: package, Value: com.tutorialspoint.test 
[INFO] Parameter: artifactId, Value: helloworld 
[INFO] Parameter: basedir, Value: C:\JSF 
[INFO] Parameter: version, Value: 1.0-SNAPSHOT 
[INFO] project created from Old (1.x) Archetype in dir: 
C:\JSF\helloworld 
[INFO] ------------------------------------------------------------- 
[INFO] BUILD SUCCESSFUL 
[INFO] ------------------------------------------------------------- 
[INFO] Total time: 7 seconds 
[INFO] Finished at: Mon Nov 05 16:05:04 IST 2012 
[INFO] Final Memory: 12M/84M 
[INFO] -------------------------------------------------------------

Bây giờ vào thư mục C: / JSF. Bạn sẽ thấy một dự án ứng dụng web Java được tạo, có tên là helloworld (như được chỉ định trong ArtifactId). Maven sử dụng bố cục thư mục tiêu chuẩn như trong ảnh chụp màn hình sau.

Sử dụng ví dụ trên, chúng ta có thể hiểu các khái niệm chính sau đây.

S. không Cấu trúc & Mô tả Thư mục
1

helloworld

Chứa thư mục src và pom.xml
2

src/main/wepapp

Chứa thư mục WEB-INF và trang index.jsp
3

src/main/resources

Nó chứa các tệp hình ảnh / thuộc tính (Trong ví dụ trên, chúng ta cần tạo cấu trúc này theo cách thủ công)

Thêm khả năng JSF vào dự án

Thêm các phụ thuộc JSF sau.

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

Hoàn thành POM.xml

<project xmlns = "http://maven.apache.org/POM/4.0.0" 
   xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation = "http://maven.apache.org/POM/4.0.0
   http://maven.apache.org/maven-v4_0_0.xsd">
	
   <modelVersion>4.0.0</modelVersion>
   <groupId>com.tutorialspoint.test</groupId>
   <artifactId>helloworld</artifactId>
   <packaging>war</packaging>
   <version>1.0-SNAPSHOT</version>
   <name>helloworld Maven Webapp</name>
   <url>http://maven.apache.org</url>
	
   <dependencies>
      <dependency>
         <groupId>junit</groupId>
         <artifactId>junit</artifactId>
         <version>3.8.1</version>
         <scope>test</scope>
      </dependency>
		
      <dependency>
         <groupId>com.sun.faces</groupId>
         <artifactId>jsf-api</artifactId>
         <version>2.1.7</version>
      </dependency>
		
      <dependency>
         <groupId>com.sun.faces</groupId>
         <artifactId>jsf-impl</artifactId>
         <version>2.1.7</version>
      </dependency>
		
   </dependencies>
	
   <build>
      <finalName>helloworld</finalName>
      <plugins>
         <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-compiler-plugin</artifactId>
            <version>2.3.1</version>
				
            <configuration>
               <source>1.6</source>
               <target>1.6</target>
            </configuration>
         </plugin>
      </plugins>
   
   </build>		
</project>

Chuẩn bị Dự án Eclipse

Hãy mở bảng điều khiển lệnh. Đi đếnC:\ > JSF > helloworld thư mục và thực thi những điều sau mvn chỉ huy.

C:\JSF\helloworld>mvn eclipse:eclipse -Dwtpversion = 2.0

Maven sẽ bắt đầu xử lý, tạo dự án sẵn sàng cho nhật thực và sẽ thêm khả năng wtp.

Downloading: http://repo.maven.apache.org/org/apache/maven/plugins/
maven-compiler-plugin/2.3.1/maven-compiler-plugin-2.3.1.pom
5K downloaded  (maven-compiler-plugin-2.3.1.pom)
Downloading: http://repo.maven.apache.org/org/apache/maven/plugins/
maven-compiler-plugin/2.3.1/maven-compiler-plugin-2.3.1.jar
29K downloaded  (maven-compiler-plugin-2.3.1.jar)
[INFO] Searching repository for plugin with prefix: 'eclipse'.
[INFO] ------------------------------------------------------------
[INFO] Building helloworld Maven Webapp
[INFO]    task-segment: [eclipse:eclipse]
[INFO] ------------------------------------------------------------
[INFO] Preparing eclipse:eclipse
[INFO] No goals needed for project - skipping
[INFO] [eclipse:eclipse {execution: default-cli}]
[INFO] Adding support for WTP version 2.0.
[INFO] Using Eclipse Workspace: null
[INFO] Adding default classpath container: org.eclipse.jdt.
launching.JRE_CONTAINER
Downloading: http://repo.maven.apache.org/
com/sun/faces/jsf-api/2.1.7/jsf-api-2.1.7.pom
12K downloaded  (jsf-api-2.1.7.pom)
Downloading: http://repo.maven.apache.org/
com/sun/faces/jsf-impl/2.1.7/jsf-impl-2.1.7.pom
10K downloaded  (jsf-impl-2.1.7.pom)
Downloading: http://repo.maven.apache.org/
com/sun/faces/jsf-api/2.1.7/jsf-api-2.1.7.jar
619K downloaded  (jsf-api-2.1.7.jar)
Downloading: http://repo.maven.apache.org/
com/sun/faces/jsf-impl/2.1.7/jsf-impl-2.1.7.jar
1916K downloaded  (jsf-impl-2.1.7.jar)
[INFO] Wrote settings to C:\JSF\helloworld\.settings\
org.eclipse.jdt.core.prefs
[INFO] Wrote Eclipse project for "helloworld" to C:\JSF\helloworld.
[INFO]
[INFO] -----------------------------------------------------------
[INFO] BUILD SUCCESSFUL
[INFO] -----------------------------------------------------------
[INFO] Total time: 6 minutes 7 seconds
[INFO] Finished at: Mon Nov 05 16:16:25 IST 2012
[INFO] Final Memory: 10M/89M
[INFO] -----------------------------------------------------------

Nhập dự án trong Eclipse

Sau đây là các bước -

  • Nhập dự án trong nhật thực bằng trình hướng dẫn Nhập.

  • Đi đến File → Import... → Existing project into workspace.

  • Chọn thư mục gốc đến helloworld.

  • Giữ Copy projects into workspace được kiểm tra.

  • Nhấp vào nút Kết thúc.

  • Eclipse sẽ nhập và sao chép dự án trong không gian làm việc của nó C:\ → Projects → Data → WorkSpace.

Định cấu hình Servlet khuôn mặt trong web.xml

Định vị web.xml trong webapp → WEB-INF và cập nhật nó như hình dưới đây.

<?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" 
   xmlns:web = "http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
   xsi:schemaLocation = "http://java.sun.com/xml/ns/javaee 
   http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
   id = "WebApp_ID" version="2.5">
	
   <welcome-file-list>
      <welcome-file>faces/home.xhtml</welcome-file>
   </welcome-file-list>
	
   <!-- 
      FacesServlet is main servlet responsible to handle all request. 
      It acts as central controller.
      This servlet initializes the JSF components before the JSP is displayed.
   -->
	
   <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>
	
   <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 hạt đậu được quản lý

Tạo cấu trúc gói dưới src → main → java as com → tutorialspoint → test. Tạo lớp HelloWorld.java trong gói này. Cập nhật mã củaHelloWorld.java như hình bên dưới.

package com.tutorialspoint.test;

import javax.faces.bean.ManagedBean;

@ManagedBean(name = "helloWorld", eager = true)
public class HelloWorld {
   
   public HelloWorld() {
      System.out.println("HelloWorld started!");
   }
	
   public String getMessage() {
      return "Hello World!";
   }
}

Tạo trang JSF

Tạo một trang home.xhtml trong webappthư mục. Cập nhật mã củahome.xhtml như hình bên dưới.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">
   <head>
      <title>JSF Tutorial!</title>
   </head>

   <body>
      #{helloWorld.getMessage()}
   </body>
</html>

Xây dựng dự án

Sau đây là các bước.

  • Chọn dự án helloworld trong nhật thực

  • Sử dụng thuật sĩ Run As

  • Lựa chọn Run As → Maven package

  • Maven sẽ bắt đầu xây dựng dự án và sẽ tạo ra helloworld.war dưới C:\ → Projects → Data → WorkSpace → helloworld → target thư mục.

[INFO] Scanning for projects...
[INFO] -----------------------------------------------------
[INFO] Building helloworld Maven Webapp
[INFO] 
[INFO] Id: com.tutorialspoint.test:helloworld:war:1.0-SNAPSHOT
[INFO] task-segment: [package]
[INFO] -----------------------------------------------------
[INFO] [resources:resources]
[INFO] Using default encoding to copy filtered resources.
[INFO] [compiler:compile]
[INFO] Nothing to compile - all classes are up to date
[INFO] [resources:testResources]
[INFO] Using default encoding to copy filtered resources.
[INFO] [compiler:testCompile]
[INFO] No sources to compile
[INFO] [surefire:test]
[INFO] Surefire report directory: 
C:\Projects\Data\WorkSpace\helloworld\target\surefire-reports

-------------------------------------------------------
 T E S T S
-------------------------------------------------------
There are no tests to run.

Results :

Tests run: 0, Failures: 0, Errors: 0, Skipped: 0

[INFO] [war:war]
[INFO] Packaging webapp
[INFO] Assembling webapp[helloworld] in
[C:\Projects\Data\WorkSpace\helloworld\target\helloworld]
[INFO] Processing war project
[INFO] Webapp assembled in[150 msecs]
[INFO] Building war: 
C:\Projects\Data\WorkSpace\helloworld\target\helloworld.war
[INFO] ------------------------------------------------
[INFO] BUILD SUCCESSFUL
[INFO] ------------------------------------------------
[INFO] Total time: 3 seconds
[INFO] Finished at: Mon Nov 05 16:34:46 IST 2012
[INFO] Final Memory: 2M/15M
[INFO] ------------------------------------------------

Triển khai tệp WAR

Sau đây là các bước.

  • Dừng máy chủ tomcat.

  • Sao chép tệp helloworld.war vào tomcat installation directory → webapps folder.

  • Khởi động máy chủ tomcat.

  • Nhìn vào bên trong thư mục ứng dụng web, sẽ có một thư mục helloworld đã được tạo.

  • Bây giờ helloworld.war được triển khai thành công trong gốc Máy chủ web Tomcat.

Chạy ứng dụng

Nhập url vào trình duyệt web: http://localhost:8080/helloworld/home.jsf để khởi chạy ứng dụng.

Tên máy chủ (localhost) và cổng (8080) có thể thay đổi tùy theo cấu hình tomcat của bạn.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved