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 เพื่อซิงโครไนซ์ตารางและตัวเลื่อนข้อมูล