CellTable не отображается в TabLayoutPanel

Question

У меня есть класс EntryPoint WebCrawlerOne.java, который содержит TabLayoutPanel, и на одной из вкладок я вызываю CrawlerOne.java, который содержит CellTable. Я много пробовал, но не смог найти ни одной ошибки. Я пытался искать соответствующие темы, но все еще CellTable не отображается в TabLayoutPanel при запуске проекта.

1. Я нахожусь в режиме стандартов (используя HTML DOCTYPE)
2. с использованием GWT 2.2.4

3. Указали высоту TabLayoutPanel в css как .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);
    }
  }

Выход выглядит как

CellTable отображается, если запущен непосредственно из класса EntryPoint. Любая помощь приветствуется. Спасибо!

Answer 1

Я написал немного, прежде чем понял простой ответ, который, на мой взгляд, вам действительно нужен, поэтому сначала простой ответ, а затем еще несколько вещей, которые нужно учитывать.

Вы создаете новый экземпляр CellTable в вашем ui.xml файле.Это заменяет уже настроенный экземпляр CellTable в onInitialize, что означает, что у него нет столбцов, и поэтому не отображается.Будет выполнен вызов 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%");
  

Первый вариант, вероятно, лучше, так что вы можете полностью настроить его, прежде чем рисовать что-либо.Тем не менее, я также не тестировал (недостаточно кода, предоставленного для простого тестирования).

---

Различные LayoutPanels (обычно вещи, которые реализуют ProvidesResize и requireResize) измеряют размер своих дочерних элементов в зависимости от конкретных правилу каждого есть.

Они могут только определять размер своих прямых дочерних элементов - если задан дочерний элемент, который не требует изменения размера (например, HTMLPanel), они не выполняют там никакой компоновки, вместо этого ожидая, что контейнер определит размер своих дочерних элементов, как он видитfit.

Таким образом, HtmlPanel и html, которые вы нарисовали в своем файле ui.xml, вероятно, позволили TabLayoutPanel правильно передавать информацию о компоновке в CellTable.Если вы не хотите использовать макет, то это хорошо - вам нужно изменить размер CellTable другим способом.

Еще одна мысль: используйте FireBug или тому подобное, чтобы убедиться, чтоДом настроен так, как вы ожидаете.Там вы увидите, что ячейка присутствует, но не имеет содержимого.