Example Basic with JSF2

July 15, 2013 — kobee

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 :

d3

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>

d1

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

Posted in JSF. Leave a Comment »

Leave a comment

«

»