DataTable chứa inputText: có thể với JSF Custom Component

Question

Tôi mới làm quen với JSF và cho ứng dụng tôi đang lo lắng về tôi đã làm một biểu mẫu nhập nhiều trường.

Trong vài từ, người dùng phải có inputText khi nhập dữ liệu và nút "thêm" thêm văn bản nhập mới để nhập dữ liệu khác. Khi người dùng hoàn tất, anh ta nhấn nút gửi khác. Tôi đã tìm một cái gì đó đã được thực hiện, nhưng tôi đã không tìm thấy bất cứ điều gì, vì vậy tôi quyết định tạo thành phần jsf tùy chỉnh của riêng mình

Ý tưởng là tạo một thành phần kết hợp một dataTable chứa inputText cho mỗi hàng trong datatable, cộng một nút thêm hàng vào bộ sưu tập được liên kết với dữ liệu.

Tôi đang xem qua tài liệu và sách jsf, nhưng tôi hơi bối rối và tôi không chắc liệu có thể tạo thành phần như vậy ... Ai đó có thể giúp tôi không? TIA

Answer 1

Có thể thực hiện mọi thứ bạn muốn.

---

Bạn có thể tạo thứ gì đó gần với những gì bạn muốn bằng các điều khiển hiện có. Cách tốt nhất để khai thác tối đa JSF là điều chỉnh mô hình cho khung nhìn. Ví dụ: chế độ xem này hiển thị các tùy chọn chỉnh sửa cho phép bạn thêm giá trị vào bảng dữ liệu.

<f:view> 
    <h:form> 
     <h:dataTable value="#{people.list}" var="row"> 
      <h:column> 
       <f:facet name="header"> 
        <h:outputText value="#" /> 
       </f:facet> 
       <h:selectBooleanCheckbox value="#{row.selected}" /> 
      </h:column> 
      <h:column> 
       <f:facet name="header"> 
        <h:outputText value="First Name" /> 
       </f:facet> 
       <h:inputText value="#{row.firstname}" /> 
      </h:column> 
      <h:column> 
       <f:facet name="header"> 
        <h:outputText value="Last Name" /> 
       </f:facet> 
       <h:inputText value="#{row.lastname}" /> 
      </h:column> 
      <f:facet name="footer"> 
       <h:panelGroup> 
        <h:commandButton value="Add Row" action="#{people.addPerson}" /> 
        <h:commandButton value="Delete Selected" 
         action="#{people.deleteSelected}" /> 
        <h:commandButton value="Finish" action="#{people.finish}" /> 
       </h:panelGroup> 
      </f:facet> 
     </h:dataTable> 
    </h:form> 
</f:view> 

dân đậu:

public class People implements Serializable { 

    private static final long serialVersionUID = 1L; 

    private List<Person> people = new ArrayList<Person>(); 

    public People() { 
     // initialise with one entry 
     people.add(new Person()); 
    } 

    public List<Person> getList() { 
     return people; 
    } 

    public String addPerson() { 
     people.add(new Person()); 
     return null; 
    } 

    public String deleteSelected() { 
     Iterator<Person> entries = people.iterator(); 
     while (entries.hasNext()) { 
      Person person = entries.next(); 
      if (person.isSelected()) { 
       entries.remove(); 
      } 
     } 
     return null; 
    } 

    public String finish() { 
     System.out.println(people); 
     return "someNavigationRule"; 
    } 

} 

Person đậu:

public class Person implements Serializable { 

    private static final long serialVersionUID = 1L; 

    private String firstname; 
    private String lastname; 
    private transient boolean selected = false; 

    public String getFirstname() { 
     return firstname; 
    } 

    public void setFirstname(String firstname) { 
     this.firstname = firstname; 
    } 

    public String getLastname() { 
     return lastname; 
    } 

    public void setLastname(String lastname) { 
     this.lastname = lastname; 
    } 

    public boolean isSelected() { 
     return selected; 
    } 

    public void setSelected(boolean selected) { 
     this.selected = selected; 
    } 

} 

faces-config.xml:

<managed-bean> 
    <managed-bean-name>people</managed-bean-name> 
    <managed-bean-class>addmultiple.People</managed-bean-class> 
    <managed-bean-scope>session</managed-bean-scope> 
</managed-bean> 

Cách tiếp cận này là khá linh hoạt và với một số CSS, có thể trông khá tốt. Ví dụ: với một vài thay đổi đối với chế độ xem và mô hình, bạn chỉ có thể có hàng cuối cùng có thể chỉnh sửa.

---

Nếu trải nghiệm kết quả không đủ phong phú hoặc nếu bạn cần thứ gì đó bạn có thể sử dụng lại, bạn có thể tạo điều khiển tùy chỉnh. Rất khó để đi vào chi tiết cụ thể mà không biết chính xác những gì bạn muốn, nhưng có thể bạn sẽ cần:

1. Mới phát ra HTML và giải mã yêu cầu biểu mẫu.
2. (Có thể) mới component, có thể mở rộng UIData và concrete form để hiển thị các thuộc tính cụ thể cho trình hiển thị (ví dụ: HTML).
3. JSP tag class mới để cho phép kiểm soát được sử dụng trong JSP.
4. Định nghĩa cho tất cả các điều trên trong một faces-config.xml (xem spec).