RichFaces - คอมโพเนนต์การวนซ้ำ
ในบทก่อนหน้านี้เราได้เรียนรู้เกี่ยวกับส่วนประกอบอินพุตและเอาต์พุตต่างๆ ในบทนี้เราจะเรียนรู้วิธีการวนซ้ำผ่านโครงสร้างข้อมูลต่างๆในเว็บไซต์
<rich: dataTable>
แท็กนี้ใช้เพื่อแสดงผลตารางในเว็บไซต์ ในตัวอย่างต่อไปนี้เราจะแสดงตารางหัวเรื่องพร้อมกับระดับประสิทธิภาพระดับมืออาชีพ
<?xml version = '1.0' encoding = 'UTF-8' ?>
<html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:h = "http://java.sun.com/jsf/html"
xmlns:f = "http://java.sun.com/jsf/core"
xmlns:ui = "http://java.sun.com/jsf/facelets"
xmlns:a4j = "http://richfaces.org/a4j"
xmlns:rich = "http://richfaces.org/rich">
<h:head>
<title>Rich Data Table</title>
</h:head>
<h:body>
<h:form>
<rich:dataTable value = "#{subject.subjectListObj}" var = "record" >
<f:facet name = "header">
<h:outputText value = "My Profile" />
</f:facet>
<rich:column>
<f:facet name = "header">Subject Name</f:facet>
<h:outputText value = "#{record.subjectName}"/>
</rich:column>
<rich:column>
<f:facet name = "header">efficiency Level</f:facet>
<h:outputText value = "#{record.efficiency}"/>
</rich:column>
</rich:dataTable>
</h:form>
</h:body>
</html>เราจำเป็นต้องเปลี่ยน subject.java ของเราเพื่อแสดงรายการ ต่อไปนี้เป็นตัวอย่างของ subject.java
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class Subject {
String SubjectName;
private String efficiency;
private List<Subject> subjectListObj=new ArrayList<>();
public Subject() {
}
public Subject(String SubjectName,String efficiency ) {
this.SubjectName = SubjectName;
this.efficiency= efficiency;
}
public String getSubjectName() {
return SubjectName;
}
public void setSubjectName(String SubjectName) {
this.SubjectName = SubjectName;
}
public List<Subject> getSubjectListObj() {
subjectListObj.add(new Subject("JAVA","Expert"));
subjectListObj.add(new Subject("DOTNET","NA"));
subjectListObj.add(new Subject("JAVA Script","Expert"));
subjectListObj.add(new Subject("Web Service","Expert"));
subjectListObj.add(new Subject("Consulting","Expert"));
return subjectListObj;
}
public void setSubjectListObj(List<Subject> subjectListObj) {
this.subjectListObj = subjectListObj;
}
public String getEfficiency() {
return efficiency;
}
public void setEfficiency(String efficiency) {
this.efficiency = efficiency;
}
}ตัวอย่างข้างต้นจะสร้างผลลัพธ์ต่อไปนี้ในเบราว์เซอร์
<rich: dataDefinitionList>
นี่คือแท็กที่ใช้ในการสร้างนิยามข้อมูลจากโมเดล JBoss ไม่รองรับแท็กนี้ตั้งแต่มีการคิดค้น RichFaces 4 หากคุณยังคงใช้ RichFaces 3 คุณสามารถใช้แท็กนี้ในลักษณะต่อไปนี้
<rich:dataDefinitionList var = "car" value = "#{dataTableScrollerBean.allCars}"
rows = "5" first = "4" title = "Cars">
<f:facet name = "term">
<h:outputText value = "#{car.make} #{car.model}"></h:outputText>
</f:facet>
<h:outputText value = "Price:" styleClass = "label"></h:outputText>
<h:outputText value = "#{car.price}" /><br/>
<h:outputText value = "Mileage:" styleClass = "label"></h:outputText>
<h:outputText value = "#{car.mileage}" /><br/>
</rich:dataDefinitionList>ในตัวอย่างข้างต้น“ dataTableScrollerBean” คือคลาส Java ที่ใช้ในการสร้างค่าต่างๆของรถ นี่คล้ายกับแท็กก่อนหน้านี้ที่เราเติมค่าอ็อบเจ็กต์จำนวนมากโดยใช้แท็ก <datatable>
<rich: dataOr แป้งลิสต์>
RichFaces 4 มาพร้อมกับการกลั่นกรองแบบกว้าง ๆ จาก RichFaces 3 <dataOrbledList> เป็นแท็กที่ใช้ในการแสดงรายการในลักษณะสั่ง สิ่งนี้ถูกระงับใน RichFaces 4 เช่นกันเนื่องจากการสั่งซื้อวัตถุหรือรายการนั้นง่ายกว่าและใช้เวลาน้อยกว่ามากหากทำใน Java หากแอปพลิเคชันของคุณใช้ RichFaces 3 คุณสามารถใช้แท็กนี้ในลักษณะต่อไปนี้
<rich:panel style = "width:500px">
<f:facet name = "header">
Using rich:dataOrderedList
</f:facet>
<rich:dataOrderedList value = "#{airlinesBean.airlines}" var = "air">
#{air.name}, #{air.code}
</rich:dataOrderedList>
</rich:panel>ในตัวอย่างข้างต้น“ airlinesBean” เป็นคลาส Java bean ที่มีเมธอดชื่อ“ airlinesBean ()” วิธีนี้ส่งคืนวัตถุประเภท“ อากาศ” ต่อมาเราสามารถใช้วัตถุอากาศนี้เพื่อเติมคุณสมบัติต่างๆในรูปแบบตาราง
<rich: dataList>
ตามชื่อแท็กแนะนำแท็กนี้จะถูกใช้เพื่อแสดงรายการที่ไม่เรียงลำดับลงในเบราว์เซอร์ อย่างไรก็ตามเช่นเดียวกับ <orderedList> แท็กนี้จะถูกระงับใน RichFaces เวอร์ชันล่าสุดด้วย เราสามารถแสดงรายการในเบราว์เซอร์ได้อย่างง่ายดายโดยใช้แท็ก <a4j: Repeat> และ <rich: dataTable> ด้วยวิธีต่อไปนี้
<a4j:repeat value = "#{managedBean.subjectList}" var = "sub">
<h:outputText value = "#{sub}"/>
</a4j:repeat>ในตัวอย่างข้างต้นเรากำลังแสดงรายการซึ่งเป็นผลลัพธ์ของวิธีการที่เรียกว่า“ subjectList ()” หากแอปพลิเคชันของคุณสร้างขึ้นใน RichFaces 3 คุณสามารถใช้แท็กนี้ได้ดังนี้
<rich:panel style = "width:500px">
<f:facet name = "header">
Using rich:dataList
</f:facet>
<rich:dataList value = "#{airlinesBean.airlines}" var = "air">
#{air.name}, #{air.code}
</rich:dataList>
</rich:panel><rich: dataGrid>
การใช้แท็ก <datatable> คุณจะสามารถแสดงรายการเป็นตารางได้อย่างไรก็ตาม <dataGrid> จะช่วยคุณในการแสดงผลวัตถุหรือรายการ ในตัวอย่างก่อนหน้าของ <rich: datatable> เพียงแค่เปลี่ยนหน้า xhtml ดังต่อไปนี้และดูผลลัพธ์ที่เหมือนกัน
<?xml version = '1.0' encoding = 'UTF-8' ?>
<html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:h = "http://java.sun.com/jsf/html"
xmlns:f = "http://java.sun.com/jsf/core"
xmlns:ui = "http://java.sun.com/jsf/facelets"
xmlns:a4j = "http://richfaces.org/a4j"
xmlns:rich = "http://richfaces.org/rich">
<h:head>
<title>Rich Data Table</title>
</h:head>
<h:body>
<h:form>
<rich:panel>
<rich:dataGrid value = "#{subject.subjectListObj}" var = "record"
columns = "2" elements = "4" first = "1" >
<f:facet name = "header">
<h:outputText value = "My Profile" />
</f:facet>
<rich:panel>
<rich:column>
<f:facet name = "header">Subject Name</f:facet>
<h:outputText value = "#{record.subjectName}"/>
</rich:column>
<rich:column>
<f:facet name = "header">efficiency Level</f:facet>
<h:outputText value = "#{record.efficiency}"/>
</rich:column>
</rich:panel>
</rich:dataGrid>
</rich:panel>
</h:form>
</h:body>
</html>โค้ดด้านบนจะให้ผลลัพธ์ต่อไปนี้ในเบราว์เซอร์
<rich: datascroller>
แท็กนี้ช่วยในการสร้างแถบเลื่อนในขณะที่เติมข้อมูลตาราง ค่อนข้างคล้ายกับฟังก์ชันการแบ่งหน้าของ JSF แก้ไขตัวอย่าง dataTable ก่อนหน้านี้ในลักษณะต่อไปนี้
<?xml version = '1.0' encoding = 'UTF-8' ?>
<html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:h = "http://java.sun.com/jsf/html"
xmlns:f = "http://java.sun.com/jsf/core"
xmlns:ui = "http://java.sun.com/jsf/facelets"
xmlns:a4j = "http://richfaces.org/a4j"
xmlns:rich = "http://richfaces.org/rich">
<h:head>
<title>Rich Data Table</title>
</h:head>
<h:body>
<h:form>
<rich:dataTable value = "#{subject.subjectListObj}" var = "record"
rows = "3" id = "MyTable">
<f:facet name = "header">
<h:outputText value = "My Profile"/>
</f:facet>
<rich:column>
<f:facet name = "header">Subject Name</f:facet>
<h:outputText value = "#{record.subjectName}"/>
</rich:column>
<rich:column>
<f:facet name = "header">efficiency Level</f:facet>
<h:outputText value = "#{record.efficiency}"/>
</rich:column>
</rich:dataTable>
<rich:dataScroller for = "MyTable" maxPages = "3">
<f:facet name = "first">
<h:outputText value = "1" />
</f:facet>
<f:facet name = "last">
<h:outputText value = "eof" />
</f:facet>
</rich:dataScroller>
</h:form>
</h:body>
</html>ในตัวอย่างข้างต้นคุณสามารถเพิ่มสไตล์ของคุณเพื่อรูปลักษณ์ที่ดีได้ เราได้ติดตั้งแท็ก <dataScroller> แยกต่างหากที่มีค่า facet ต่างกัน ต่อไปนี้จะเป็นผลลัพธ์ของไฟล์ด้านบน อัปเดตแอตทริบิวต์ style sheer เพื่อซิงโครไนซ์ตารางและตัวเลื่อนข้อมูล
