go to http://oracle.in.th

Sunday, June 20, 2010

Getting Started with JSF 2.0 (ต่อ)

มาดู WEB.XML config กันก่อนดีกว่าครับ อันนี้ก็ถ้าใครไม่รู้พื้นฐาน Servlet ผมก็ช่วยไม่ได้นะครับแนะนำว่าให้กลับไปอ่านบทความเก่าผมเรือง Servlet ที่ http://thaidev.org ก่อนถ้าสนใจแบบละเอียด แต่ตอนนี้เรามาดู config เฉพาะที่เกี่ยวข้องกับ jsf กันก่อนดีกว่าครับ

<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
อันนี้จะทำให้เวลา JSF เกิด Error มันจะพ่น log มากกว่าปกติเพือช่วยให้แก้ปัญหาได้ดีขึ้น(จริงหรือเปล่า ?)

<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
อันนี้เป็นตัวที่เราจะให้มันทำงานเมื่อเราเรียกไปที่ xxx.jsf สามารถเปลี่ยนเป็นอะไรก็ได้เช่น *.htm, *.pl, *.php, *.xxx (แต่ตัวไฟล์เราจะใช้เป็น .xhtml) นะครับ

ต่อไปเราจะมาสร้าง ManagedBean สำหรับ Process งานของ JSF กันครับ

เอาแบบง่ายๆก่อนคือเราจะสร้าง ManagedBean สำหรับโชว์ข้อมูลบนหน้า JSF
1. สร้าง package cc.nuboat.easyjsf.managedbean
2. สร้าง IndexManagedBean.java
/*
* copyright 2010
*/

package cc.nuboat.easyjsf.managedbean;

import javax.faces.bean.ManagedBean;

/**
*
* @author nuboat
*/

@ManagedBean
public class IndexManagedBean {
private String hellostr;

public IndexManagedBean() {
hellostr = "Hello from Facelets";
}

public String getHellostr() {
return hellostr;
}

public void setHellostr(String hellostr) {
this.hellostr = hellostr;
}

}

แก้ index.xhtml ในส่วนของ body ตามด้านล่าง
<h:body>
#{indexManagedBean.hellostr}
</h:body>

ทดลองรันดูเลยครับ พอเสร็จแล้วก็กลับไปแก้ IndexManagedBean
public IndexManagedBean() {
hellostr = "Hello from IndexManagedBean";
}
save แล้วลองไปรัน browser ดูใหม่ว่า text มันเปลี่ยนไปหรือยังนะครับ

มาดู requirement ต่อไปกันดีกว่าครับทีนี้จะยากขึ้นหน่อยคือให้มีหน้าจอสำหรับรับข้อมูลชื่อทาง Textbox แล้วก็ มีปุ่ม Submit แล้วให้ไปหน้าแสดงผลที่โชว์ว่า Hello [Name]. นะครับ เราจะมามองก่อนว่าเราต้องสร้างอะไรบ้าง

1. hello.xhtml
2. helloform.xhtml
3. HelloManagedBean.java

hello.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!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>Hello</title>
</h:head>
<h:body>
Hi Khun. #{helloManagedBean.name}.
</h:body>
</html>


helloform.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f ="http://java.sun.com/jsf/core">
<h:head>
<title>Hello Form</title>
</h:head>
<h:body>
<h:form>
What's your name? : <h:inputText value="#{helloManagedBean.name}" /> : <h:commandButton value="OK" action="#{helloManagedBean.hello}" /> <br />
</h:form>
</h:body>

</html>

HelloManagedBean.java
/*
* copyright 2010
*/

package cc.nuboat.easyjsf.managedbean;

import javax.faces.bean.ManagedBean;

/**
*
* @author nuboat
*/
@ManagedBean
public class HelloManagedBean {
private String name;

public String hello() {
return "hello";
}

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

}


ปล. ใครอยากได้ Sourcecode ก็สามารถมา checkout ลงไปดูกันได้ครับ
svn checkout http://easyjsf.googlecode.com/svn/trunk/EasyJSF2.0 easyjsf-read-only


copyright 2010 @nuboat in wonderland
ข้อเขียนนี้ช่วยฉัน:  

5 comments:

Oracle In Thai said...

ตอนที่ 2 มาเร็ว ได้ใจมากๆครับ :)

yong said...

อ้าว พึ่งอ่านตอนแรกจบไปเมื่อเช้า
มีตอนใหม่ตามมาแล้ว ขอบคุณมากครับสำหรับเนื้อหาดีๆ :)

Unknown said...

รอบทความต่อไป คร้าบ

Tom Condo said...

เราย้ายไปเว็บใหม่แล้วนะคะ ไปติดตามต่อที่ http://oracle.in.th ได้ค่ะ
บทความเกี่ยวโยงเรื่อง JSF ทั้งหมดอยู่ ที่นี่ค่ะ http://oracle.in.th/?cat=173

Unknown said...

โตมร วงศ์ธิเบศร์: เขียนไว้เป็นปีแล้วครับ ;)

Post a Comment