Managed Beans Part 2

Hôm nay chúng ta tiếp tục phần bài JSF . Chúng ta sẻ hiện thực các phạm vi trong managed beans. Và các hoạt động của các đổi tượng Request và Response, và annotation @ManagredProperty (dependency injection) in JSF

Source code : Managed Bean

Managed Bean

• Chúng ta có thể tùy chỉnh name khi tạo bean .

Ví dụ : @ManagedBean( name = “yourBeanName” ) => #{ yourBeanName.attributes }.

• Điều khiển Scope Bean ( Phạm vi của một Bean ).

Từ ban đầu chúng ta sử dụng Scope mặc định là [ Request ].

Chúng ta có các scope sau đây : request, session, application, view, none, custom

Chúng ta có thể thiết lập scope cho bean của chúng ta trong file faces-config.xml or sử dụng annotations [ example @SessionScoped ]. trên bean khi chúng ta tạo ra.

1. @RequestScoped : Mặc định của mổi Bean, Nó tạo ra một new instance cho mổi lần HTTP request. Kể từ khi Bean của chúng ta được sử dụng để show các data lên các input form khi load page lên. Điều này có nghĩ là chúng ta khởi tạo Bean 2 lần [ lần thứ nhất khi form hiển thị, và lần 2 khi form được submit].
2. @SessionScoped : Thiết lập Session scope cho Bean. Nếu trên cùng một user với cùng một cookie (JSESSIONID) trả về trước khi session timeout. Thì chúng ta sẻ sử dụng Bean mà chúng ta khởi tạo. Khi thiết lập Session Scope cho Bean bạn nên thiết lập Serializable cho Bean.
3. @ApplicationScopded : Thiết lập Application Scope cho Bean. Khi chúng ta muốn Share Bean cho all User sử dụng. Phải nên cẩn thận khi dùng phạm vi này, có thể một User nào đó thay đổi Bean vì vậy không nên thay đổi Bean khi dùng phạm vi này, và nên thiết lập synchronize access cho Bean.
4. @ViewScoped : Trên cùng một Bean – cùng một User – Cùng một page (example : Event handlers hoặc sử dụng Ajax ) bean của chúng ta nên thiết lập Serializable
5. @CustomScoped (value=”#{someMap}”) : Bean này được dùng để lưu trữ trong một Map. và chúng ta có thể điều lifecycle cho riêng chúng ta .
6. @NoneScoped : Khởi tạo một bean và Bean này không có Scope. hữu ích khi chúng ta tham chiếu đến Bean này bởi một Bean khác.

• Các dùng thường dùng sau Anonation @ManagedBean.

Vd: @ManagedBean

      @SessionScoped

      Public class ClassBean {……..}

1 – Application Scope

Khi nào chúng ta nên dùng Scope này.

1. Thiết lập Bean với trạng thái không bao giờ thay đổi.
2. Thường chỉ thiết lập cho navigation rule ( No setter / getter)
3. Ví dụng chúng ta có thể thiết lập 1 List các item cho việc lựa chọn tring Drop Down Menus
4. VD <h:selectOnemenu value=”#{requestScopeBean.choice}”>
5.         <f:selectItems value=”#{applicationScopeBean.options}”/>
6. </h:selectOneMenu>
7. Sử dụng để thiết lập một Data Structures như một properties trong main beans : @ManagedBeanProperty
8. Share Bean thông qua all Users vs all pages, You củng nên cẩn thận sử dụng synchronization để né tránh race conditions.

1.1 – Syntax

Cách 1 :

@ManagedBean
@ApplicationScoped
public class ApplicationBean {}

ApplicationBean khi chúng ta thể hiện lần đầu tiên ( Sử dụng nó ). All user và All request share trên Bean này sẻ củng 1 instance.

Cách 2 :

@ManagedBean(eager=true)
@ApplicationScoped
public class ApplicationBeanBigData {}

ApplicationBeanBigData được thể hiện khi ứng dụng được load ( thường khi server starts ). Sau lần thể hiện đó all users vs all request sẻ hiện thực trên cùng thể hiện. Nó hữu ích khi Bean của chúng ta có 1 cấu trúc dữ liệu lớn ( big data) và mất khá nhiều thời gian để khởi tạo nó.

1.2 – Không thiết lập Các trạng thái thay đổi khi dùng Application Scope

• Không thể hiển của variable, chỉ có các action controller method.
• Application scope ngăn chặn nhựng đối tượng không cần thiết khi intantiation.
• Khi thể hiện các small objects thì rất nhanh vì vậy việc để tối ưu hóa (optimization) có lẻ khổng thể được đo lường. Nó có thể gậy ra lỗi lầm khi chúng ta thêm input field và nó truy cập vào các getter/setter . Vì vậy nó thường được dùng để chuyển hướng trang
• Được hiện thực khi có một lượng data lớn cần load. ( Đặc biệt các Map có chứa nhiều data ) và nó hoạt động rất tốt. ( Ví dụ khi chúng ta có 1 lượng lớn các List Object cho các đối tượng như drop down menus or Maps để hiện thực business logic như ví dụ lần trước ta dùng )

1.3 – Example cơ bản như sau :

@ManagedBean
@ApplicationScoped
public class ApplicationBean {
// no variable (not attribute)
// set action controller for bean
public String actionController(){
return "your-page";
}

2 – Session Scope

• Mục đích Bean thể hiện được tái sử dụng nếu [ Cùng trên một User ] – [ Cùng trên một Browser session ]
• Thường xuyên dự trên cookies, có thể dự trên URL để tái sử dụng bean.
• Hữu ích khi sử dụng :

1. Ghi nhớ user preferences.

2. Thiết lập lại các values từ các entries trước

3. Tính toán List các data của người dùng ( Shopping carts )

• Bean thường Seriablizable. Một vài servers thường lưu session data trên disk khi restart, và các web apps cần để thiết lập lại session cho lần dùng kế tiếp.

Request vs Response Object.

Tại sao chúng ta cần 2 đối tượng này. Khi chúng ta có thể truy xuất data thông qua Bean một cach rất dể dàng như các bài trước ta thầy. Nhưng các Bean không thể làm các điều sau đây các bạn xem qua khi 2 đối tượng Request vs Response in JSF

• Request Object

– HIện thực các thao tác trên session một cách rõ ràng.( Thay đổi các giá trị của session, session timeout, remove session..)

– Thao tác trên các cookies một cách rõ ràng ( VD : long-lived cookies).

– Đọc các request headers (vd : User-Agent, ..)

– Tra cứu các request host name.

• Response Object

– Thiết lập status codes, respnse headers, long-lived cookies…

• Giải pháp ( Solution ) kHá tương tự như Struts chung ta dùng các static method để gọi 2 đứa nó.

ExternalContext context = FacesContext.getCurrentInstance().getExternalContext();     
HttpServletRequest request = (HttpServletRequest) context.getRequest();
HttpServletResponse response = (HttpServletResponse) context.getResponse();Note : Trong các môi trường khác nhau bạn phải cast getRequest, getResponse vè các đối tượng mà chúng ta cần, VD trong môi trường portlet chúng ta cast 2 đối tượng là PortletRequest vs PortletResponse.

Sử dụng @ManagedProperty ( Dependency injection )

JSF hổ trợ cơ bản cho việc sử dụng (Dependency injection), bạn có thể thiết lập values đến managed bean property mà không cần hardcoding nó vào trong class Bean.

Chắc hẵn nó thì không có năng lực so với Spring . nhưng vẫn hữu ích cho việc sử dụng trong JSF.

Cách 1 :

@ManagedProperty (value=”#{yourBean}”)

private YoutType someType;

Note : Setter method phải được thiết lập cho property này. trong ví dụ trên chúng ta phải có setSomeType(YourType type); Bạn có thể sử dụng thuộc tính name của @ManagedProperty nếu setter method thì không match với field name.

Cách 2 :

Bạn có thể hiện thực bean tại thời điểm load app

@ManagedBean(eager=true)
@ApplicationScoped
public class ApplicationBeanBigData {}

Điều này hữu ích khi bean của chúng ta được inject vào trong main bean. và Bean được inject thì thường được share
như môt service. Chúng ta thường dùng main bean chửa data khi load.

Note : faces-config tốt hơn annotations và Spring cách lựa chọn tốt nhất và bạn có thể dùng Spring trực tiếp trong
JSF application

Example cho ví dụ này chúng ta sẻ thay đổi Example login của chúng ta từ ví dụ trước như sau :

Thay đổi tại class LoginBean.java

@ManagedProperty(value="#{loginUtils}")
private LoginUtils loginUtils;
public void setLoginUtils(LoginUtils loginUtils) {
this.loginUtils = loginUtils;
}

Thay đổi class LoginUtils.java như sau :

@ManagedBean(eager=true)
@ApplicationScoped
public class LoginUtils {..... }

Kết quả run tương tự, chúc các bạn thành công .

Managed Beans Part 1

Trong bài hôm nay , mình hướng dẩn các bạn để thiết lập 1 Bean trong java , thực ra trong bài trước chúng ta có đi qua Bean ( cơ bản ) .

Chúng ta chỉ cần biết đơn giản rằng .

Bean của chúng ta đơn thuần là 1 POJO , nó là 1 class java chuẩn  gồm có các yêu cầu cơ bản sau :

1. Một Constructor Empty.
2. Một số properties cần thiết ( thường là private).
3. Các setter/getter cho các attribute.
4. Các method thể hiện như các action ( return String)

Từ 1 Bean trên chúng ta chia ra làm 3 phần trong managed Bean.

1. Các method Setter/Getter đảm nhiệm cho việc Input/Output ( nó được gọi tự động , trước khi action conttroller method được gọi)
2. Method thể hiện action ( action controller method ) . Thường thì mổi Bean chúng ta chỉ thiết lập một action controller để điều khiển việc chuyển page, tương tác với page ( thực tế chúng ta có thể tạo nhiều method hơn ) => Nó thực thi khi chúng ta nhân button submit form.
3. Placeholders ( #{….} ) . đó là 1 loại kí hiệu có thể bạn sẻ gặp rất nhiều. Nó gọi từ method getter của chúng ta , được dùng để hiển thị kết quả (data) .

 

Example cho hôm nay : Thể hiện 1 form login , nếu login thành công hiển thị thông tin của tài khoản, thất bại sẻ hiển thị page Error cảnh báo lổi. Các bạn chúng tham khảo .

Toàn bộ cấu trúc thư mục project.

Class Account.java của chúng ta như sau :

package com.thaihoanghai.demo;

public class Account {
	private String userName;
	private String password;
	private String birthDay;
	private String address;

	public Account() {
	}

	public Account(String userName, String password, String birthDay,
			String address) {
		super();
		this.userName = userName;
		this.password = password;
		this.birthDay = birthDay;
		this.address = address;
	}

	public String getUserName() {
		return userName;
	}
	public void setUserName(String userName) {
		this.userName = userName;
	}
	public String getPassword() {
		return password;

	}
	public String getPasswordHide(){
		return password.replaceAll(password.substring(3, password.length()), "*****");
	}
	public void setPassword(String password) {
		this.password = password;
	}

	public String getBirthDay() {
		return birthDay;
	}

	public void setBirthDay(String birthDay) {
		this.birthDay = birthDay;
	}

	public String getAddress() {
		return address;
	}

	public void setAddress(String address) {
		this.address = address;
	}

}

Class Account này bản chất nó là Object để chúng ta thao tác, gồm các thông tin về 1 tài khoản.

Tiếp theo chúng ta tạo class LoginUtils.java ( Nó thể hiện các BussinessLogic cho chúng ta ).

package com.thaihoanghai.demo;

import java.util.HashMap;
import java.util.Map;

public class LoginUtils {
	private static Map<String, Account> listAccount;

	public LoginUtils(){
		listAccount = new HashMap<String, Account>();
		Account a1 = new Account("kobee", "123456","10/10/1991","362/12/16 GV TN HCM");
		Account a2 = new Account("jenny", "123456","18/05/1992","126 GV TN HCM");
		Account a3 = new Account("ducky", "123456","29/02/1990","26/26/1 HBT HCM");

		listAccount.put(a1.getUserName(), a1);
		listAccount.put(a2.getUserName(), a2);
		listAccount.put(a3.getUserName(), a3);
	}



	public static Map<String, Account> getListAccount() {
		return listAccount;
	}


	public Account getAccountWithIdAndPass(String userId, String password){
		if(listAccount.containsKey(userId)){
			Account account =  listAccount.get(userId);
			if(account.getPassword().trim().equalsIgnoreCase(password.trim())){
				return account;
			}else{
				return null;
			}
		}
		return null;
	}
}

Class LoginUtils này chứa 1 Account List , và một method thể hiện tác vụ , để check xem Account đó có tồn tại trong list của chúng ta hay không.

Tới bước này chúng ta đả thiết lập xong một nghiệp vụ login cơ bản.

Chúng ta tạo ra 1 LoginBean.java ( thể hiện nó là một ManagedBean) để tương tác với các page.xhtml (*.jsf)

package com.thaihoanghai.demo;

import javax.faces.bean.ManagedBean;

@ManagedBean
public class LoginBean {
	private String userName;
	private String password;

	private Account account;
	private LoginUtils loginUtils = new LoginUtils();


	public LoginBean() {
	}

	public String getUserName() {
		return userName;
	}

	public void setUserName(String userName) {
		this.userName = userName;
	}

	public String getPassword() {
		return password;
	}

	public void setPassword(String password) {
		this.password = password;
	}

	public Account getAccount() {
		return account;
	}

	// my action
	public String resultLogin(){
		System.out.println("Into-1");
		if(checkValue(userName) || checkValue(password)){
			return "error";
		}else if ((account = loginUtils.getAccountWithIdAndPass(userName, password)) != null){
			return "success";
		}else{
			return "error";
		}
	}

	private boolean checkValue(String value){
		if(value.trim().equals("") || value.isEmpty())
			return true;
		return false;
	}
}

Trong class LoginBean chúng ta có một số thuộc tính như sau :

• 2 field Username, Password để tương tác với 2 textfield Username, password
• 1 Object Account dùng để tương tác với Ngiệp vụ của chúng ta, và củng để hiển thị data ( Khi login thành công)
• 1 LoginUtils thể hiện cho Businesslogic của chúng ta.

Note : Cách thức tương tác với Bean như sau

Ví dụ chúng ta có method getter như sau => tương ứng cách thao tác #{bean.attribute}

• setUserName/getUserName => #{loginBean.userName}

( viết thường chữ cái đầu tiên trong class ManagedBean, và viết thường chữ cái đầu tiên sau cụm từ set/get)

• Nếu chúng ta có 1 Object trong ManagedBean ( example Account), chúng ta có thể truy cập trực tiếp các attribute của Object

getAccount  => #{loginBean.account.userName} or #{loginBean.account.address} , so on…

 

Ok chúng ta bắt đầu xây dựng các page XHTML (login, success, error ).

page login.xhtml như sau

<!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"
	xmlns:h="http://java.sun.com/jsf/html">
<h:head>
	<title>Example JSF - Login</title>
</h:head>
<h:body>
	<h:form>
		<fieldset>
			<legend>Login Example (Scope Request)</legend>
			<table width="400" border="1" cellspacing="2" cellpadding="2">
				<tr>
					<td colspan="2" bgcolor="#66CCFF">Login</td>
				</tr>
				<tr>
					<td>UserName</td>
					<td><h:inputText value="#{loginBean.userName}"/></td>
				</tr>
				<tr>
					<td>Password</td>
					<td><h:inputSecret value="${loginBean.password}"/></td>
				</tr>
				<tr>
					<td></td>
					<td><h:commandButton value="Login" action="#{loginBean.resultLogin}"></h:commandButton></td>
				</tr>
			</table>
		</fieldset>
	</h:form>
</h:body>
</html>

Page login của chúng ta được hiển thị đầu tiên . chúng ta có 2 field username (h:inputText) , field password (h:inputSecret) thể hiện các value tương tứng với các method setter của chúng ta . (h:commandButton) là action đến method resultLogin trong Managed Bean của chúng ta

Page error.xhtml

[/code language="html"]

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221;
xmlns:h=”http://java.sun.com/jsf/html”&gt;
<h:head>
<title>Example JSF</title>
</h:head>
<h:body>
<h3>Not found UserName [#{loginBean.userName}] or Username and Password is invalid</h3>
</h:body>
</html>

[/code]

Nếu login không thành công chúng ta sẻ trả về page error tương ứng với method resultLogin return “error”, [#{loginBean.userName}] chúng ta lấy thông tin của username do người dùng input từ method getUserName trong bean.

 

Page success.xhtml

<!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"
    xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>Example JSF</title>
</h:head>
<h:body>
	<h2>Login Successful</h2>
	Account Information<br/>
	<ul>
		<li>User Name: #{loginBean.account.userName} </li>
		<li>Password : #{loginBean.account.passwordHide} </li>
		<li>BirthDay : #{loginBean.account.birthDay} </li>
		<li>Address  : #{loginBean.account.address} </li>
	</ul>
</h:body>
</html>

Khi login Success chúng ta sẻ hiện thị thông tin của Account khi chúng ta getAccount trong bean. và get các attributes trong Object đó

Hình ảnh show chương trình.

 

Chúc các bạn thành công !!!!

 

Example Basic with JSF2

Hôm nay mình sẻ cho các bạn làm quen với các vấn đề sau :

 

1. Mô hình flow control của JSF
2. Hiểu được cấu trúc của một page XHTML.
3. Textfield vs Textarea trong JSF
4. Cách cơ bản nhất để Summit một form từ một Managed Bean cơ bản ( Bean là gì các bạn có thể gác lại mình sẻ giải thích sau này )

Mô hình Flow Control của một cấu trúc JSF cơ bản như sau :

Ví dụ của chúng ta

Chúng ta tạo ra một Managed Bean như sau: Tên là ProductBean.java

package com.thaihoanghai.test;

import javax.faces.bean.ManagedBean;

@ManagedBean
public class ProductBean {
	public String registerProduct(){
		if(Math.random() < 0.5){
			return "success";
		}else{
			return "fail";
		}
	}
}

• @ManagedBean : Chúng ta khai báo annotation này để thể hiện class ProductBean như một Managed Bean, Nếu không sử dụng @annotation chúng ta phải khai báo trong file faces-config.xml ( các loạt bài của mình đều dùng annotation )
• method registerProduct() trả về loại String thể hiện nó như một action. Khi nhấn summit trên form với action này chúng ta sẻ có 2 trường hợp xãy ra, nếu Math.random < 0.5 thì chúng ta chuyển đến trang success.xhtml ngược lại sẻ chuyển đến trang fail.xhtml.

Trang index.xhtml của chúng ta như sau :

<!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"
    xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>Example JSF</title>
</h:head>
<h:body>
	<h:form>
		<fieldset>
			<legend>Product Information</legend>
			Product ID : <h:inputText/><br/>
			Product Price : <h:inputText/><br/>
			Description : <h:inputTextarea/><br/>
			<h:commandButton value="Register Product" action="#{productBean.registerProduct}"/>
		</fieldset>
	</h:form>
</h:body>
</html>

• xmlns:h="http://java.sun.com/jsf/html đây là một header chúng ta thể hiện đây là một page JSF, và nó có đuôi là .jsf , or .faces tùy lúc chúng ta khai báo trong web.xml.

• Cách cơ bản để tạo một textfield vs textarea chúng ta dùng <h:inputText/> vs <h:inputTextarea/>
• Để submit một form chúng ta sử dụng button như sau <h:commandButton value=”….” action=”#{yourBean.your_method}” /> Chúng ta có Class ProductBean là Managed Bean của mình, và có một method trả về 1 String như 1 action. Nhớ để submit 1 form chúng ta cần có thẻ <h:form> vậy chúng ta sẻ dùng nó như sau #{productBean.registerProduct} ( Note : sử dụng chữ cái đầu tiên của bean là chữ thường )

Page success.xhtml

<!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"
    xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>Product Success</title>
</h:head>
<h:body>
	<h1>Success .....=]] =]]</h1>
</h:body>
</html>

Page fail.xhtml

<!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"
    xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>Product Fail</title>
</h:head>
<h:body>
	<h1>Fail..........:[[ :[[</h1>
</h:body>
</html>

Chúc các bạn thành công !!!

Config and install JSF with Eclipse

Bươc 1 : Cài đặt JDK và Thiết lập biến môi trường JAVA_HOME  – Có lẻ ai củng đả có (Bỏ qua )

Bước 2 : Cài đặt Java vs Tomcat Tuân thủ các bước sau

• Tomcat 7 – Run với Java 6++  Here
• Tomcat 6 – Run với Java 5++ Here

Bước 3 : Download Eclipse Chọn bảng Java EE (Version  Juno ++ ) được đề cử

• Download  (Mình dùng bản Java EE Juno ) ( Có hổ trợ JSF2.x )

Bước 4 : Thiết lập JDK cho Eclipse :

Bước 5 : Thiết lập Tomcat Server Cho Eclipse

Bước 6 : Cài đặt JSF2 cho eclipse : Các bạn có thể chọn 1 trong 3 loại này Loại 1 – 2 khi config eclipse cho project JSF2 nó sẻ mặc định yêu cầu bạn chọn 1 trong 2. 

• Oracle Mojarra
• Apache MyFaces
• Java EE 6 server

Chọn New -> Dynamic Web Project và thiết lập các thông số tương ứng với máy mình cài đặt , ở đây mình dùng Tomcat 7, Servlet 3.0, JSF2.1

Dowload thư viện để Implement JSF2

Cấu trúc thư mục như sau :

Các bạn có thể thấy Lib JSF2.1 . Nếu các bạn không tự thiết lập như trên có thể vào các trang web Apache MyFaces or Oracle Mojarra để download các thư viện đó.

Bước 6 :  Chúng ta xem qua file web.xml config cho JSF 2 như sau :

<?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_3_0.xsd" id="WebApp_ID" version="3.0">
  <display-name>Session1</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  <!-- ===============================Default ================================== -->
  <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>*.jsf</url-pattern>
  </servlet-mapping>
  <context-param>
    <param-name>javax.faces.PROJECT_STAGE</param-name>
    <param-value>Development</param-value>
  </context-param>
  <!-- ===============================End ================================== -->
  <context-param>
    <param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name>
    <param-value>resources.application</param-value>
  </context-param>
  <context-param>
    <description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description>
    <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
    <param-value>client</param-value>
  </context-param>
  <context-param>
    <description>
	This parameter tells MyFaces if javascript code should be allowed in
	the rendered HTML output.
	If javascript is allowed, command_link anchors will have javascript code
	that submits the corresponding form.
	If javascript is not allowed, the state saving info and nested parameters
	will be added as url parameters.
	Default is 'true'</description>
    <param-name>org.apache.myfaces.ALLOW_JAVASCRIPT</param-name>
    <param-value>true</param-value>
  </context-param>
  <context-param>
    <description>
	If true, rendered HTML code will be formatted, so that it is 'human-readable'
	i.e. additional line separators and whitespace will be written, that do not
	influence the HTML code.
	Default is 'true'</description>
    <param-name>org.apache.myfaces.PRETTY_HTML</param-name>
    <param-value>true</param-value>
  </context-param>
  <context-param>
    <param-name>org.apache.myfaces.DETECT_JAVASCRIPT</param-name>
    <param-value>false</param-value>
  </context-param>
  <context-param>
    <description>
	If true, a javascript function will be rendered that is able to restore the
	former vertical scroll on every request. Convenient feature if you have pages
	with long lists and you do not want the browser page to always jump to the top
	if you trigger a link or button action that stays on the same page.
	Default is 'false'
</description>
    <param-name>org.apache.myfaces.AUTO_SCROLL</param-name>
    <param-value>true</param-value>
  </context-param>
  <listener>
    <listener-class>org.apache.myfaces.webapp.StartupServletContextListener</listener-class>
  </listener>
</web-app>

 

Bước 8 : Chúng ta ra 1 page index.xhtml như sau :

<!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"
    xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>Insert title here</title>
</h:head>
    <h:body>
        <h1>Hello World</h1>
    </h:body>
</html>

Kết quả chúng ta nhận được khi run :

 

Chúc các bạn thành công !!!