Làm cách nào để kết hợp html với tiện ích gwt?

Question

Tôi cố gắng tạo ra một ui gwt động. Do đó, tôi sẽ nhận được một đoạn html như sau:

<ol> 
<li>MyLabel</li> 
<li><input type="text"></li> 
</ol> 

Nhãn phải là Nhãn GWT và đầu vào phải là Hộp văn bản GWT. Tôi làm cách nào để đạt được điều này với GWT? Tôi đã cố gắng sử dụng lớp HTMLPanel, nhưng làm cách nào tôi có thể tiêm các thẻ

<li> 

?

Tôi không thể sử dụng UIBinder, vì tôi muốn tạo động các đoạn như vậy như minh họa ở trên.

Answer 1

Bạn nên tạo lớp con của riêng bạn ComplexPanel. Điều này sẽ cung cấp cho bạn một cái gì đó hoạt động giống như một HorizontalPanel hoặc VerticalPanel, chỉ dựa trên các yếu tố danh sách chứ không phải là các phần tử bảng. Hình ảnh trông giống như sau:

public class OListPanel extends ComplexPanel { 
final OListElement ol = Document.get().createOLElement(); 

public OListPanel() { 
    setElement(ol); 
} 

public void add(Widget w) { 
    LIElement li = Document.get().createLIElement(); 
    ol.appendChild(li); 
    add(w, (Element)li.cast()); 
} 

public void insert(Widget w, int beforeIndex) { 
    checkIndexBoundsForInsertion(beforeIndex); 

    LIElement li = Document.get().createLIElement(); 
    ol.insertBefore(li, ol.getChild(beforeIndex)); 
    insert(w, (Element)li.cast(), beforeIndex, false); 
} 

public boolean remove(Widget w) { 
    Element li = DOM.getParent(w.getElement()); 
    boolean removed = super.remove(w); 
    if (removed) { 
     ol.removeChild(li); 
    } 
    return removed; 
} 
} 

Tôi chưa thử nghiệm nhưng về cơ bản là đúng. WRT đánh dấu bạn được đăng trong câu hỏi của bạn, mã này sẽ tạo ra một sự khác biệt nhỏ, vì nhãn GWT có riêng <div> yếu tố của họ:

<ol> 
<li><div>MyLabel</div></li> 
<li><input type="text"></li> 
</ol> 

Bạn có thể thích InlineLabel, mà là dựa trên các yếu tố ít xâm nhập <span>.

Answer 2

Tại sao không đặt đoạn đó trong một Widget độc lập được tạo thông qua UiBinder? (nếu bạn biết cấu trúc sẽ trông như thế nào trước đây và chỉ muốn chèn MyLabel và TextBox)
Đừng ngại chia tiện ích của bạn như thế này - Trình biên dịch GWT rất tốt khi tối ưu hóa và các mẫu UiBinder được xử lý tại thời gian biên dịch không nên có bất kỳ hình phạt hiệu suất nào (điểm chuẩn vẫn được khuyến khích mạnh mẽ - YMMV). Tôi thậm chí sẽ nói rằng nó sẽ nhanh hơn sau đó cố gắng để thêm cấu trúc này thông qua gói DOM - với UiBinder, trình biên dịch biết nó đang xử lý, với DOM bạn về cơ bản nói: "Tôi biết những gì tôi đang làm, don 't chạm vào mã của tôi! " (ít nhất đó là quan điểm của tôi về điều này :)). HTMLPanel có thể là một thay thế, nhưng bạn phải gán một id cho mọi phần tử bạn muốn sửa đổi/đính kèm nội dung vào ...:/

Tóm lại: sử dụng UiBinder cho điều này, đó là những gì nó được xây dựng.

Answer 3

Bạn luôn có thể làm điều gì đó như:

Document doc = Document.get(); 
    final OListElement ol = doc.createOLElement(); 
    LIElement li = doc.createLIElement(); 
    li.appendChild((new Label()).getElement()); 
    ol.appendChild(li); 
    li = doc.createLIElement(); 
    li.appendChild((new TextBox()).getElement()); 
    ol.appendChild(li); 
    panel.add(new Widget() {{ 
     setElement(ol); 
    }});