java - CellTable 在 TabLayoutPanel 中不可见

Question

我有一个 EntryPoint 类 WebCrawlerOne.java，其中包含 TabLayoutPanel，并且在其中一个选项卡中我调用包含 CellTable 的 CrawlerOne.java。我已经尝试了很多，但找不到任何错误。我尝试搜索相关主题，但项目运行时 CellTable 在 TabLayoutPanel 中仍然不可见。

1. 我处于标准模式(使用 DOCTYPE html)
2. 使用 GWT 2.2.4

3. 已在 css 中指定 TabLayoutPanel 的高度为 .gwt-TabLayoutPanel {高度:100%；}

   CrawlerOne.ui.xml 看起来像——g:HTMLpanel 标签内

   Hello,
   <g:Button styleName="{style.important}" ui:field="button" />
   <table cellspacing='0' cellpadding='0' style='width:100%;'>
       <tr>
           <td valign='top'>
               <c:CellTable addStyleNames="{style.cellTable}" ui:field="table"/>
           </td>
       </tr>
   </table>    
   
   <g:TextBox ui:field="box"></g:TextBox>
   <g:Button ui:field="addSite"></g:Button>
   

CrawlerOne.java 看起来像 -

public class CrawlerOne extends Composite implements HasText {

interface CrawlerOneUiBinder extends UiBinder<Widget, CrawlerOne> {
}

@UiField
CellTable<Contact> table;

@UiField
Button addSite;

@UiField
TextBox box;

public CrawlerOne() {
    Widget w = new Widget();
    w = onInitialize();
    initWidget(w);    
}

@UiField
Button button;

@UiHandler("button")
void onClick(ClickEvent e) {
    Window.alert("Hello!");
}

public void setText(String text) {
    button.setText(text);
}

public String getText() {
    return button.getText();
}

/**
   * A simple data type that represents a contact with a unique ID.
   */
  private static class Contact {
    private static int nextId = 0;
    private final int id;

    private String site;
    private String document;
    private String pending;

    public Contact(String site, String document, String pending) {
      nextId++;
      this.id = nextId;
      this.site = site;
      this.document = document;
      this.pending = pending;
    }

    public String getDocument() {
        return document;
    }

    public int getId() {
        return id;
    }

    public String getSite() {
        return site;
    }

    public void setSite(String site) {
        this.site = site;
    }

    public String getPending() {
        return pending;
    }
  }

  /**
   * The list of data to display.
   */
private static final List<Contact> CONTACTS = new LinkedList<Contact>(Arrays.asList(
        new Contact("www.google.com", "12", "123"),
        new Contact("www.yahoo.com", "23", "124"),
        new Contact("www.rediff.com", "24", "124"),
        new Contact("www.gmail.com", "23", "124"),
        new Contact("www.facebook.com", "23", "124"),
        new Contact("www.flickr.com", "23", "124"),
        new Contact("www.youtube.com", "45", "125")));

private static final ProvidesKey<Contact> KEY_PROVIDER =
      new ProvidesKey<Contact>() {
        @Override
        public Object getKey(Contact object) {
          return object.getId();
        }
      };

  /**
   * Initialize.
   */
      public Widget onInitialize() {
        table = new CellTable<Contact>(KEY_PROVIDER);
        table.setWidth("100%", true);
        table.setKeyboardSelectionPolicy(KeyboardSelectionPolicy.ENABLED);

        initTableColumns();

        // Push the data into the widget.
        table.setRowData(CONTACTS);

        // Set table width.
        table.setWidth("100%");

        box = new TextBox();
        box.setText("Enter New Site");

        addSite = new Button("Add Row");
        addSite.addClickHandler(new ClickHandler() {

            @UiHandler("addSite")
            public void onClick(ClickEvent event) {
                // TODO Auto-generated method stub
                try {
                    if(box.getValue()=="") {
                        Window.alert("Error: Invalid Site Value");
                        box.setText("Enter New Site");
                    }
                    else {
                        CONTACTS.add(new Contact(box.getValue(), "23", "127"));
                        table.setRowCount(CONTACTS.size(), true);
                        table.setRowData(CONTACTS);
                        table.redraw();
                    }
                }catch (Exception e) {
                    Window.alert("Exception Error: " + e);
                }   
            }
        });

     // Create the UiBinder.
        CrawlerOneUiBinder uiBinder = GWT.create(CrawlerOneUiBinder.class);
        Widget widget = uiBinder.createAndBindUi(this);

        return widget;
  }

private void initTableColumns() {

    //code to add columns
}}//end of file

WebCrawlerOne.java 看起来像 -

    public class WebCrawlerOne implements EntryPoint {
    /**
     * This is the entry point method.
     */
    public void onModuleLoad() {
        TabLayoutPanel menu = new TabLayoutPanel(10, Unit.EM);

        menu.add(new CrawlerOne(), "Crawler");
        menu.add(new HTML("This is my page!"), "Page 2");
        menu.selectTab(0);
        RootLayoutPanel.get().add(menu);
    }
  }

输出看起来像——

如果直接从 EntryPoint 类运行，则会显示 CellTable。任何帮助表示赞赏。谢谢!

Answer 1

在意识到我认为您真正需要的简单答案之前，我写了一点，所以首先是简单的答案，然后是一些需要考虑的事情。

您正在 ui.xml 文件中创建 CellTable 的新实例。这将替换 onInitialize 中已配置的 CellTable 实例，这意味着它没有列，因此不可见。对 uibinder.createAndBind 的调用将遍历并创建所有带有 @UiField 注释的小部件，除非您将它们标记为已提供。两种选择:

• 将其标记为已提供:

  @UiField(provided = true)
  CellTable<Contact> table;
  

• 在调用 uibinder.createAndBind 之前不要配置表

  //...
  Widget widget = uiBinder.createAndBindUi(this);
  table.setWidth("100%", true);
  table.setKeyboardSelectionPolicy(KeyboardSelectionPolicy.ENABLED);
  
  initTableColumns();
  
  // Push the data into the widget.
  table.setRowData(CONTACTS);
  
  // Set table width.
  table.setWidth("100%");
  

第一个选项可能更好，因此您可以在绘制任何内容之前完全配置它。也就是说，我也没有测试过(没有提供足够的代码来轻松测试)。

<小时/>

各种 LayoutPanel(通常是实现 ProvidesResize 和 RequiresResize 的事物)根据每个 LayoutPanel 具有的特定规则来调整其子级的大小。

这些只能调整其直接子级的大小 - 如果给定一个不需要调整大小的子级(例如 HTMLPanel)，它们不会在那里进行任何布局工作，而是期望容器根据其认为合适的方式调整其子级的大小。

因此，HtmlPanel 和您在 ui.xml 文件中绘制的 html 可能会妨碍 TabLayoutPanel 正确地将布局信息传递到 CellTable。如果您不想使用布局内容，那么这是一件好事 - 您需要以其他方式调整 CellTable 的大小。

最后一个想法:使用 FireBug 或类似的工具来确保 dom 按照您的预期设置。在那里您将看到单元格表存在，但没有任何内容。