JSF 2.0 Template

อารมณ์ดีมาจิบกาแฟดูสาวๆ ที่ดอยตุงสีลม กับบทความที่เป็นเนื้อหาเรื่องสุดท้ายแล้วครับกับ Template ทีนี้ก็มาเริ่มกันก่อนว่าทำไมต้องมี Template เคยไหมครับที่เขียนเว็บแล้วจะมีส่วนที่ซํ้ากันในทุกๆ หน้าที่เราเขียน แล้วพอแก้ทีก็ต้องไปไล่แก้กันทุกหน้าเลย น่าเบือนะครับ วันนี้เราจะมาเสนอทางเลือกเพือจัดการปัญหานี้กัน

โดยหลักการของ Template คือเราจะสร้าง html template (ซึ่งก็จะไว้สำหรับกำหนดโครงของหน้าเว็บเราว่าจะเป็นอย่างไร แล้วทีนี้เราก็ไปสร้าง aa.jsf, ab.jsf ที่เป็นส่วนที่เป็นเนื้อหาแต่ละหน้า แล้วเวลาที่ user request มาก็ให้มัน render รวมกันออกมาเป็นหน้าเว็บที่เราต้องการ

งงไหมครับ ถ้างงก็อย่าแปลกใจ พอเห็นตัวอย่างจะรู้ว่ามันง่ายกว่าที่คิดเยอะเลยครับ ทีนี้ก็ ลอง update svn เพือเอาไฟล์ลงมากันเลยซึ่งหลักๆจะมี 2 ไฟล์คือ templatenormal.xhtml, template.xhtml ที่นี้เรามาดูส่วนของ template กันก่อนคือ

ถ้าเปิด templatenormal.xhtml ดูจะเห็นว่าเป็น xhtml ธรรมดาๆเลย แต่จะมีในส่วนของ ui:insert เพิ่มเข้ามา
<ui:insert name="title" /> , <ui:insert name="content" />

ลองเปิด template.xhtml ดูบ้างก็จะเห็นว่าเป็น xhtml ปกติๆ อีกเหมือนกัน แต่จะมีในส่วนของ <ui:composition template="/layout/templatenormal.xhtml" > ที่เพิ่มเข้ามา อ้างไปถึง template file ที่เราต้องการนั่นเอง และอีกส่วนคือ <ui:define name="title" ....... <ui:define name="content" .......

สังเกตุไหมครับอันนึงบอกว่า ใส่ title,content อันนึงกำหนดส่วน insert, content ...

แล้วอย่างนี้ถ้าเรารัน template.jsf หร่ะ อะไรจะเกิดขึ้น ก็จะได้ หน้าจอแบบที่สร้างใน templatenormal แต่มี data บางส่วนมาจาก template

เนี่ยแหละครับสมมุติวันดีคืนดีเราเปลี่ยน template หร่ะ ก็ไปแก้แค่ทีเดียว ทั้งโปรเจคเราก็เปลี่ยนตามแล้ว เป็นไงครับ JSF ง่ายดีไหม? ^ ^

หมดนี้คงเป็นตัวอย่างที่เป็นรูปเป็นร่างหน่อยละครับ แต่ยังไม่ชัวร์ว่าจะให้มีในส่วนของ db หรือเปล่าก็คงแล้วแต่ความสะดวก(กัวว่าถ้าเพิ่มมากแล้วจะทำให้รันไม่ได้เพราะติดนู่นติดนี่ แล้วจะพาลไม่ยอมหัดกัน เลยอยากแยกส่วนเนื้อหาให้ชัดเจนไปก่อนน่ะครับ)

copyright 2010 @nuboat in wonderland

ข้อเขียนนี้ช่วยฉัน:

JSF 2.0 Repeat, Datatable & AJAX

หายอู้แล้ว โผล่มาอัพ #jsftutorail กันต่อ ก็ใกล้จบแล้วนะครับสำหรับ Tutorial ง่ายๆนี้ วันนี้จะมาให้ดูในส่วนของ Table, Repeat ครับซึ่งก็จากชื่อก็เห็นแล้วว่าไว้จัดการกับพวก data ที่เป็น collection กัน

มาดูกันที่ Repeat ก่อนครับ อันนี้สำหรับลูปในการสร้าง html จริงๆ จะเอาไปทำไรก็ได้ตามต้องการ
โดยจะได้ว่า uv จะแทน instance ของ uvlist ของ uiRepeatManagedBean
<ui:repeat var="uv" value="#{uiRepeatManagedBean.uvlist}" >
--<tr>
----<td>#{uv.name}<t/td>
----<td>#{uv.username}<t/td>
----<td>#{uv.group}/<ttd>
--</tr>
</ui:repeat>

*คล้ายๆกับ for( String str : lists) นั่นแหละครับ
ลองดูแบบเต็มที่ สองไฟล์นี้ครับ UiRepeatManagedBean.java, uirepeat.xhtml ครับ

มาดู Datatable กันต่อเลย จะเห็นว่าเราสามารถสร้าง Table ได้ตามรูปข้างล่างเลยครับ
<h:dataTable var="user" value="#{dataTableManagedBean.userViews}" border="1" cellpadding="5" cellspacing="0">
--<h:column>
----<f:facet name="header">Name</f:facet>
----#{user.name}
--</h:column>
--<h:column>
----<f:facet name="header">Username</f:facet>
----#{user.username}
--</h:column>
--<h:column>
----<f:facet name="header">Group</f:facet>
----#{user.group}
--</h:column>
</h:dataTable>

<f:facet ... > เป็นการกำหนด Header ของ Table นั้นๆ
ลองดูแบบเต็มที่ สองไฟล์นี้ครับ DataTableManagedBean.java, datatable.xhtml ครับ


เรื่องสุดท้าย Ajax ใน JSF2.0
<h:form id="formid" >
--Time : #{ajaxManagedBean.timenow} <br />
--<h:outputText value="Tpye here : "/>
--<h:inputText value="#{ajaxManagedBean.str}" required="true" /> 
--<h:commandButton action="#{ajaxManagedBean.echo}" value="AJAX BTN" >
----<f:ajax execute="@form" render="formid:resultid" />
--</h:commandButton> 
--<h:commandButton action="#{ajaxManagedBean.echo}" value="OK" /><br />
--<b><h:outputText value="#{ajaxManagedBean.echoStr}" id="resultid" /></b>
</h:form>
ลองดูนะครับ ผมได้กำหนดให้ "AJAX BTN" เป็น Button แบบ Ajax ผ่าน โดยให้มันส่ง data ที่อยู่ใน < ทั้งหมดกลับไป(เราสามารถกำหนดได้ว่าจะให้ส่งอะไรกลับไปบ้าง) ส่วนคำสั่ง render คือให้มันเรนเดอร์ <h:outputText id="resultid" ... /> ใหม่นั่นเอง

ลองดูแบบเต็มที่ สองไฟล์นี้ครับ AjaxManagedBean.java, ajax.xhtml ครับ


จบแล้วเป็นไงง่ายไหมครับ ^ ^ จะเห็นว่าไม่มีอะไรเลยใช่ไหมครับ ก็บอกแล้วว่า JSF อะง่ายมาก อะฮิๆ ไว้เดี๊ยวผมจะมาลองสร้างหน้า search แบบ AJAX ให้ดูสักหน้า เพือให้เห็นว่าโค้ดจริงๆ มันก็ใช้ความรู้เล็กๆ ที่ผมไล่มาตั้งแต่ต้นเนี่ยแหละในการสร้าง Web Application อย่างท่ี่ต้องการ

copyright 2010 @nuboat in wonderland

ข้อเขียนนี้ช่วยฉัน:

JSF 2.0 Properties and Localization

หนีมาเที่ยวเชียงใหม่ เขียนจากวันว่างๆที่ไม่มีอะไรทำ กับร้านกาแฟที่ไม่รู้ชื่อร้านใกล้กองบิน 41ฝั่งตรงข้ามร้านหนมเส้น และเนื่องจากเล่นทวิตเตอร์ไป เขียนไป ดูสาวเชียงใหม่น่ารักๆไป ... เลยขอเป็นเรื่องง่ายๆ ละกันครับ แหะๆ

งั้นวันนี้เรามาดูเรื่องการใช้ *.properties และการกำหนด localization ครับใน jsf ครับ
ทีนี้สำหรับคนที่เคยเขียน java มาก่อนจะรู้ว่า java จะมี api สำหรับให้มันโหลด properties files มาเก็บไว้ใน memory ทำให้เร็วเวลาที่จะเรียกใช้นะครับ แต่ในบทนี้เราจะดูถึงการเอา properties file มาเพื่อจัดการการแสดงผลใน java และการทำเว็บสำหรับหลายภาษาผ่าน properties

มาดูกันก่อนว่าต้องดูที่ไฟล์ไหนบ้าง

localization.xhtml, properties.xhtml, LocalizationManagedBean.java, webmessage.properties, webmessage_th.properties

ก็ update or check out กันลงมาได้เลยครับ

ไปดูกันที่ properties.xhtml กันก่อนเลยครับ

<f:loadBundle basename="cc.nuboat.messages.webmessage" var="msg"/>

ประกาศให้ msg แทน properties นั่นๆ ทีนี้ก็สามารถที่จะอ้างถึง message ใน webmessgae.propeties ได้แล้วครับ

<h:head>
----<title>#{msg.title_properties}</title>
</h:head>

**ข้องี่เง่าอย่างของ jsf คือ ถ้า key ใน *.properties เป็น title.properties จะไม่ได้นะครับ (ทั้งที่ควรจะได้) ถ้าอยากรู้ว่าไมไ่ด้จริงลองเปลี่ยน #{msg.title_properties} เป็น #{msg.title.properties} ดูแล้วลองรันดูครับ

ต่อไปคืออะไร จะเห็นว่าเรามี webmessage.properties, webmessage_th.properties ทีนี้ในโค้ดเราจะไปเรียก webmessage แต่เราจะมาทำให้ jsf ไปเรียกใช้ webmessage_th แทนโดยไม่ต้องแก้โค้ดใหม่เลย(ลองนึกถึงโปรแกรมหรือเว็บที่เปลี่ยนภาษาของเมนูต่างๆได้)

ไปดูกันที่ localization.xhtml กันเลยครับ

<f:view locale="#{localizationManagedBean.locale}">

<f:loadBundle basename="cc.nuboat.messages.webmessage" var="msg"/>

จะเห็นว่าผมมีการกำหนด locale ของ jsf ใหม่โดยใช้ค่าที่ get มาจาก localizationManagedBean เพิ่มด้วย

ลองรัน http://127.0.0.1:8080/easyjsf/localization.jsf ดูเลยครับ

ทีนี้จะแสดงผลเป็นภาษาไทยแทนแล้วซึ่งเป็น value จาก webmessage_th แล้ว ^ ^

copyright 2010 @nuboat in wonderland

ข้อเขียนนี้ช่วยฉัน:

JSF 2.0 Navigation Rules

ฟังคนเขียนพร่ามก่อนเริ่มเนื้อหากันหน่อยครับ ล่าสุดก็ให้เพือนที่เก่ง(กว่าผม) ช่วยตรวจ #jsftutorial ที่ผ่านมาหลายๆตอน ก็ได้มีการแก้ไขจุกจิก เพิ่มรายละเอียดเข้าไปนิดๆหน่อย เอาเป็นว่าถ้าใครอ่านแล้ว งง สงสัย ก็แจ้งกันไว้ทาง comment ได้เลยครับ หรือถ้าใครว่างก็ลองกลับไปไล่อ่านอันเก่าๆใหม่บ้างนะครับ เผือผมกลับไปเพิ่มอะไรไว้ได้ไม่พลาดไป ถือซะว่าเป็นการทบทวนกันไปในตัว เพราะอันนี้ก็เขียนกันแบบฉุกละหุก แต่ละบทความใช้เวลา เขียน รวมรวม ทำตัวอย่าง ที่ประมาณสามชั่วโมงเท่านั้น(ดูก็รู้ว่าคนเขียนไม่ตั้งใจสุดๆ 555+) จริงๆคือเนื้อหามันเยอะมากครับ กลัวเขียนไม่จบ สรุปว่าคงต้องให้คนอ่านช่วยครับ รบกวนลองทำตามกันแล้วถ้าใครสะดุดยังไง ติดตรงไหนก็ comment กันเข้ามาได้แก้ได้ แต่ตอนนี้เรามาดูกันต่อดีกว่าครับ

วันนี้คงจะพูดถึงเรื่อง Navigation Rules ครับ คืออะไร ก็เป็นเหมือนข้อกำหนดสำหรับไว้ทำเวลาที่เรา action กลับไปที่ backing bean แล่้วพอจบให้มัน return ไปที่หน้าไหนต่อนั่งเอง โดยใน JSF2.0 นั่นเรายังต้องไปสร้าง navigation rules ใน faces-config.xml เหมือนใน 1.x แต่เราจะมี default มาเลยด้วย

จริงๆแล้วเราเคยผ่านการใช้งาน Navigation ของ JSF ผ่านมาแล้วครับ ถ้านึกไม่ออกผมจะย้อนให้ดูกัน

helloform ----> helloManagedBean ----> hello จำกันได้ยังครับใน action hello ใน helloManagedBean นั่นเราได้มีการ return "hello" จะเห็นว่าหลังจบ action มันได้ forward เราไปที่หน้า hello.jsf นั่นเอง เห็นยังครับ navi แบบ default ก็คือชื่อไฟล์ xhtml เรานี่เองแต่ตัด .xhtml ออกไป ทีนี้ถ้าเราอยากให้มัน forward ไปที่อื่นเราก็แค่เปลี่ยน String ที่ return ตอนจบ action ใน ManagedBean นั่นๆซะ

แต่ถ้าไฟล์ xhtml อยู่ใน sub directory เราก็ต้องใส่ชื่อ directory นั่นๆด้วยตามนี้

$WEB-FOLDER/

----$WEB-INF/

----$SUB-DIRECTORY1/abc.xhtml

default navigation rules สำหรับ abc.xhtml ก็จะเป็น /$SUB-DIRECTORY1/abc นั่นเอง

เรายังมี default อีกอย่างคือ return null ครับ ความหมายถือให้ redirect กลับไปที่หน้าเดิม

ต่อๆ แล้วถ้าเกิดว่าเราคิดว่าแบบข้างบนยาวไปหร่ะเราจะทำไงได้ ก็ทำให้สั่นลงครับด้วย xml config ด้านล่างนั่นเอง

<navigation-rule>

----<description />

----<display-name />

----<icon />

----<from-view-id />

----<navigation-case>

--------<description />

--------<display-name />

--------<icon />

--------<from-action />

--------<from-outcome />

--------<to-view-id />

--------<redirect />

<description />, <display-name />, <icon /> : สามอันนี้เป็นแค่ meta-data ครับ ไม่ต้องสนใจ (จุดประสงค์ทำให้เปิดมาอ่านแล้วไม่งงกับทำให้พวก GUI Tool ทั่้งหลายใช้ซะมากกว่า

<from-view-id >helloform.xhtml</from-view-id > : อันนี้สำหรับไว้กำหนดเป็น rules สำหรับ pages ไหนครับ (สามารถใส่ * ได้แทนความว่า apply rules เข้ากับทุกหน้า)

<from-action >#{helloManagedBean.hello}</from-action >, <from-outcome>hello</from-outcome> : จะมีสี่กรณีที่เป็นไปได้ครับ

1. กรณีที่ไม่มีทั้งสองตัวจะหมายถึง default ของ rule นั้นๆ ในกรณีที่ไม่ตรงกับ criteria อะไรเลย

2. กรณีที่มีแค่ <from-action /> คือไม่ว่าจะ return อะไรที่มาจาก action ที่กำหนดไว้จะไปที่ <to-view-id />

3. กรณีที่มีแค่ <from-outcome/> คือจะไปที่ <to-view-id /> โดยไม่สนว่ามาจาก action ไหนๆ

4. กรณีสุดท้ายคือมีทั้งคู่ คือต้องเป็น outcome ที่มาจาก action นั่นๆเท่านั้นถึงจะไปที่ <to-view-id /> ที่กำหนดไว้

<to-view-id>hello.xhtml</to-view-id> : สำหรับกำหนด jsf page ของ rule นั้นๆ

<redirect /> : อันนี้สำหรับกำหนดว่าจะให้มันไปแบบ forward, redirect ครับ (รายละเอียดอ่านได้ในเนื้อหาเกี่ยวกับ Servlet)

** ใน 1 <navigation-rules> สามารมี <navigation-case> ได้มากกว่า 1 นะครับ

อ่ะ เสร็จแล้วๆ อะฮิๆ ทีนี้ก็ Checkout/Update Code ลงมาแล้วลุยกันเลยครับ โดยไฟล์สำหรับดูเรื่อง Navigation rules จะมีดังนี้ NavigationManagedBean.java, navigation.xhtml, bangkok.xhtml, tokyo.xhtml, paris.xhtml, faces-config.xml

ปล. รอบนี้แอบใจร้ายนะครับ เพราะว่าทั้งใน faces-config.xml, NavigationManagedBean ยังไม่เสร็จทั้งคู่ โดยผมได้ใส่ @TODO ไว้แล้วว่าต้องทำอะไรเพิ่มบ้าง

copyright 2010 @nuboat in wonderland

ข้อเขียนนี้ช่วยฉัน:

JSF 2.0 Expression Language

มาแล้วตอนต่อของ JSF 2.0 ก่อนหน้านี้พอดีมีคนมาถามเรือง Session ในทวิตเตอร์ครับ ก็ขอโทษทีช้านะครับ อาจจะช้าๆกันสักนิดนะครับ ผมเผาเนื้อหาให้ไม่ทันค้าบบบ JSF ไ่ม่ใช่น้อยๆนะ ได้บ่นก่อนเขียนแล้วก็มาดูกันต่อดีกว่า ก่อนหน้านี้เราก็ได้เห็น Expression Language หรือ #{helloManagedBean.name} พวกนี้แทรกๆอยู่ตามหน้า xhtml ต่างๆของเรานะครับ ทีนี้แหละเราจะมาดูส่วนนี้แบบละเอียดๆ กันครับว่าเราจะใช้ EL ได้ในรูปแบบใดๆบ้างนะครับ

1. เราจะใช้มันในการ set/get data ระหว่างหน้าจอกับ bean ครับผมแบ่นเป็นให้ดูเป็นสามรูปแบบนะครับ

1.1 อ้างถึง Element แบบธรรมดาก่อนละกันครับ เช่น

#{helloManagedBean.name} หรืออาจจะ nested ลงไปก็ได้เช่นถ้าให้ userView เป็น POJO ที่มี name เป็น property อีกทีก็ #{expressionManagedBean.userView.name}

1.2 อ้างถึง Element ที่เป็น array, list ต่างๆ ดังรูปแบบนี้นะครับ #{bean.array[index]}

#{expressionManagedBean.listdata[0]}

#{expressionManagedBean.listdata[1]}

ตามตัวออย่างนี้ listdata เป็น String[] listdata = new String[4]

#{expressionManagedBean.userList[0].name}

#{expressionManagedBean.userList[0].username}

#{expressionManagedBean.userList[0].group}

#{expressionManagedBean.userList[1].name}

#{expressionManagedBean.userList[1].username}

#{expressionManagedBean.userList[1].group}

ตามตัวออย่างนี้ userListเป็น List<UserView> userList = new LinkedList<UserView>()

1.3 อ้างถึง Element ที่เป้น Map, Hash โดยจะมีรูปแบบดังนี้คือ #{bean.hashtable[key]}

#{expressionManagedBean.mapdata["HOTMAIL"]}

#{expressionManagedBean.mapdata["GMAIL"]}

ตามตัวออย่างนี้ Map<String, String> mapdata = new HashMapString, String>()

ex. <h:inputText value="#{helloManagedBean.name}" /> หรือใช้ print ตรงๆ เลยก็ได้ {helloManagedBean.name}

โดยการทำแบบนี้นั้นตัว HelloManagedBean ก็ต้องมีการประกาศ set/get ของ property name ไว้ด้วยเพือให้สามารถเข้าถึงข้อมูลได้นะครับ

2. เราจะใช้ในการให้ JSF call ไปที่ action ต่างๆของ ManagedBean ตัวนี้ดูง่ายครับ ก็เรียกตรงๆได้เลย

ex. <h:commandButton value="OK" action="#{helloManagedBean.hello}" />

hello เป็น method นะครับไม่ใช่ property ไม่ต้องสร้าง getHello นะครับ ;P

3. ใช้ EL Operators ต่างๆ ดังนี้

Arithmetic :: – +-*/div%mod

Relational :: Use eq, ne, lt, gt, ge, instead of ==, !=, <, >, >=

Logical :: Use and, or, not instead of &&, ||, !

Empty :: empty โดยที่จะเป็น true เมือเป็น null, empty string, empty array, empty list, empty map และเป็น False ในกรณี่อื่นๆ

ex. #{3+2-1}, #{3+2-1}, #{3%2}, #{3/4 == 0.75}, #{ null == "test" }, #{true ? 'true' : 'false'}

update svn แล้วก็มาลองรันกันดูเลยครับ

1. http://127.0.0.1:8080/easyjsf/expression.jsf

2. http://127.0.0.1:8080/easyjsf/operators.jsf

copyright 2010 @nuboat in wonderland

ข้อเขียนนี้ช่วยฉัน:

JSF 2.0 ManagedBean

ผ่านไปแล้วกับ Getting Started นะครับ ในส่วนนั้นเราคงไม่มีอะไรมาก นอกจากแค่อยากให้ทุกคนสามารถที่จะ Startup project ได้แบบ full loop คือ New -> Implement -> Build -> Deploy -> Test และในส่วนตัวผม ผมว่าทุกเรื่องนี่ยากที่สุดก็ Startup นี่แหละครับแต่พอมันได้แล้วที่เหลือมันก็ได้ไปเรื่อยๆเองนั่นแหละ เท่ากับว่าทุกคนจงดีใจได้เลยเราว่าผ่านส่วนที่ยากที่สุดของ JSF มาแล้วนั่นเอง (หุหุ ใครจะเชือผมมั่งเนี่ย)

JSF คือไรก็ได้บอกไปแล้ว ทีนี้ JSF มีส่วนสำคัญคืออะไร ก็คงเป็น ManagedBean ที่เราจะมาดูกันต่อนี่แหละ มันมีไว้ทำไม ก็เป็นส่วนที่ไว้คำนวนทุกอย่างที่เราต้องการให้โปรแกรมทำได้นั่นแหละครับ โดยในบทที่แล้วเราก็จะเห็นว่า JSF สร้าง ManagedBean ได้ง่ายๆ โดยการใส่ @ManagedBean ไว้ที่ส่วนหัวของ Class IndexManagedBean, HelloManagedBean แค่นั่นเอง แต่จริงๆแล้ว Annotation ที่มีสำหรับ ManagedBean มันมีมากกว่านั่นนะสิครับ ทีนี้แหละที่เราจะมาดูกันว่ามันมีอะไรกันบ้าง

โดยผมแบ่งเป็นสองกลุ่มใหญ่ๆครับ

1. สำหรับกำหนดให้ Class ที่ถูกกำหนดเป็น ManagedBean ซึ่งใช้

@ManagedBean( name="", eager = true/false )

name จะไว้สำหรับกำหนดชือสำหรับเรียกครับ โดย default จะเป็นชื่อ Class ที่เปลี่ยนชือตัวหน้าเป็นตัวเล็กนั่นแหละครับ เช่น helloManagedBean, indexManagedBean แต่จริงแล้วเราสามารถที่จำกำหนดให้มันเองเลยก็ได้ (เดี๊ยวไปดูในตัวอย่างละกันครับ) ส่วน eager=true จะมีผมแค่ตอนที่ Scope เป็น @ApplicationScoped เท่านั้น จะเป็นการสั่งให้ Container สร้าง ManagedBean ไว้ก่อนเลย (ถ้าเป็นปกติจะสร้างเมือมีการเรียกเข้ามาครั้งแรก)

2. สำหรับกำหนด Scope ของ Data ว่าจะให้เป็นอะไร เช่น (request, session, application)

@RequestScoped

@SessionScoped

@ApplicationScoped

@ViewScoped

@CustomScoped(value="#{somemap}")

@NoneScoped

โดยเราจะมาดูที่ 4 อันแรกครับ

1. @RequestScoped - จะมีการสร้างและทำลายทุกๆครั้งที่จบ http request

2. @SessionScoped - จะมีการสร้างและไม่ทำลายจนกว่าจะมีการสร้างทำลาย session หรือ session timeout(ตามค่าใน web.xml)

3. @ApplicationScoped - จะมีการสร้างครั้งแรกเท่านั้นจากนั้นจะไม่สร้างอีกแล้ว

4. @ViewScoped - จะมีการสร้างและคงไว้ตราบเท่าที่เรายังอยู่ในหน้านั่นๆ ไม่เปลี่ยนหน้าไปไหน (ใช้สำหรับงานประเทภ AJAX) นั่นแหละครับและอยู่บนพื้นฐานว่า session ต้องยังไม่หมดอายุด้วยถ้าเป็น request ใหม่ก็หายนะครับ (สำหรับตัวนี้คงไปเห็นภาพ

@CustomScoped, @NoneScoped คงยังไม่พูดถึง (คือผมก็ยังไม่ได้อ่านหรือลองมันดูจริงๆเลยครับ) พอดีผมทำโปรเจคด้วย JSF1.2 ครับ แต่เห็นว่าไหนๆจะเขียนแล้วก็เลยมาเขียนที่ JSF2.0 ไปเลยดีกว่า

โอเคเรียบร้อยแล้วครับ http://easyjsf.googlecode.com/svn/trunk/EasyJSF2.0 easyjsf-read-only แล้วลองรัน scope.xhtml (http://127.0.0.1:8080/easyjsf/scope.jsf) กันดูเลยครับ

ขี้เกียจก๊อปโค้ดมาใส่ครับ เอาว่าถ้าอ่านแล้วเอาจากโค้ดลงมาแล้วไม่เข้าใจผมจะอธิบายเพิ่มให้อีกทีนะครับ (ดึกแล้วไม่ไหวแล้วแหะๆ)

ถ้าดู scope.xhtml จะเห็นว่าตัว JSF ทำให้เราสามารถทำให้ .xhtml ต่อกับ java ได้แบบ 1-n ซึ่งผิดกับสมัยก่อนที่ใช้พวก Servlet, Struts ที่จะเป็นลักษณะ 1-1 ( a.jsp -> Servlet/StrutsAction) ถ้าใช้ไปเรือยๆแล้วจะรู้ว่ามันช่วยในการ reuse code ส่วน mvc มากครับ แต่คงไม่เห็นกันตอนนี้หรอกจะเห็นเมือได้เอาไปทำในโปรเจคที่เป็นรุปธรรมซะมากกว่า สำหรับผมผมว่าอันนี้แหละเป็นส่วนที่เก่งที่สุดของ JSF เลยหร่ะ

ปล. เรายังยืนยันว่า Tutorial นี้เหมาะสำหรับคนที่พอรู้ Web Programming มาบ้างแล้วครับ ^ ^

copyright 2010 @nuboat in wonderland

ข้อเขียนนี้ช่วยฉัน:

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

ข้อเขียนนี้ช่วยฉัน:

Getting Started with JSF 2.0

สวัสดีครับ ก็จะมาแนะนำ Tutorial ของ JSF 2.0 ครับ อืมจะว่าไงดีนะ ไม่ได้เขียนบทความมานานแถมผมยังเป็นพวกที่คนบอกกันว่า พูดภาษาคนไม่รู้เรื่องซะด้วย ยังไงก็ตั้งใจอ่านกันหน่อยละกันครับ อ๋อ แนะนำตัวกันก่อน ก็ @nuboat ครับเป็นคนที่ว่ารักในการเขียนโปรแกรมก็ว่าได้ ปัจจุบันก็เป็น System Analyst and Banking Specialist ที่แบงค์สีเขียวแห่งหนึ่ง ก็มีหน้าที่ออกแบบและพัฒนาระบบเกี่ยวกับ Treasury ครับ เป็นคนที่ใช้ Java อยู่เป็นนิจ เรียกได้ว่าผมมีประสบการ์ณกับ Java กันแทบทุก platform เลยทีเดียว JavaSE, JavaME, JavaEE, JavaCard ... ว่าไปขาด JavaFX แหะ นอกเรื่องนาน มาดูกันดีกว่ากับ JSF 2.0

JSF เป็นอะไร เอาจากที่ตัวผมเห็นมานะครับ JSF เป็น Web Framework ตัวหนึ่งแต่มันมีลักษณะเหมือน Window Programming มากกว่า Web ที่เป็น Request, Response นะสิครับ ทีนี้ ถ้าคิดจะพัฒนาโปรแรกมด้วย JSF ผมอยากให้คนที่มีพื้นฐานการพัฒนาเว็บเปลี่ยนมุมมองมาเป็นว่ากำลังพัฒนา Window Application ที่เป็น

จริงๆ อยากให้เข้าใจแก่นของ JSF จริงๆก่อน coding แต่ผมว่าเราไป coding กันก่อนให้ชินกับ JSF แล้วค่อยมาดูมันก็ยังไม่สายครับ

ทีนี้เนื่องจาก JavaEE เป็นสิ่งที่มีปัญหาเรื่อง การ config, setup, build, deploy มากพอดู (มากมากเลยแหละ) เพื่อไม่ให้เกิดปัญหา ผมขอบังคับให้ใช้ทุกอย่างตามนี้นะครับ ถ้าใครใช้ไม่เหมือนผมแล้วมาถามว่า Error อะไร ก็ ... ช่วยตัวเองกันครับ 555+

จากการไปเป็น TA ให้กับ #springtrainingday ของ spring66.com ตลอดทุกครั้งคือ แต่ละคนมี environment เป็นของตัวเองกันทั้งนั้น แล้วทีนี้อะไรเกิดขึ้นหร่ะ กว่าจะแค่ทำให้รันได้นี่อย่างเหนือย แล้วนะถ้าคนที่เข้าใจ java architecture จริงๆก็ง่าย ... แต่ความจริงคือหลายคนไม่รู้นะสิ อาจจะเขียน java ได้แต่ไม่เข้าใจมันในหลายๆเรื่อง ทีนี้เพือให้งานนี้ smooth ผมจะขอบังคับ IDE ละกันครับเพราะอยากให้ scope ความรู้ไปที่ JSF จริงๆ

1. JavaSE JDK 1.6 u14 up

2. Netbeans 6.8 up ต้องเป็น release ที่ support Java Web and EE

* default netbeans จะไม่ติดตั้ง tomcat ให้แต่ผมแนะนำให้ customize แล้วเลือกมันมาด้วยเพราะเล็กและง่ายกว่า

โอเค ถ้าเตรียมตัวกันเรียบร้อยก็เริ่มกันเลยครับ เปิด Netbeans แล้วกด New Project กันเลย

1. เลือก Categories เป็น Java Web -> Web application

2. ตั้งชื่อ Project แล้วก็ Browse ไปที่ path ที่จะวาง Projec

3. เลือก Server เป็น Tomcat 6.x Java EE version Java EE 5, context path เป็น /easyjsf

4. เลือก Java Server Faces ,ไปที่ Tap Libraries เลือก Registered Libraries เป็น JSF2.0

5. แล้วไปที่ Tap Confuguration ที่ JSF Servlet URL Pattern ให้กำหมดเป็น *.jsf

6. Finish ได้เลยครับ

เสร็จแล้วยังไม่ต้องคิดอะไรครับ คลิกขวาที่ project แล้วสั่ง deploy เลยครับ

จากนั้นลองเข้า browser ด้วย URL ตามนี้ครับ http://127.0.0.1:8080/easyjsf/index.jsf

จะขึ้นหน้าเปล่าๆ ว่า "Hello from Facelets" .... หวังว่าจะไม่มี error กันทุกคนนะครับ

copyright 2010 @nuboat in wonderland

ข้อเขียนนี้ช่วยฉัน: