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

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