CellTable is not visible in TabLayoutPanel

Question

I have an EntryPoint class WebCrawlerOne.java which contains the TabLayoutPanel and in one of the tabs I am calling CrawlerOne.java which contains the CellTable. I have tried a lot but am not able to find any error whatsoever. I have tried to search relevant topics but still the CellTable is not visible in the TabLayoutPanel when the project is run.

1. I am in the standards mode (using DOCTYPE html)
2. using GWT 2.2.4

3. Have specified the height of the TabLayoutPanel in css as .gwt-TabLayoutPanel { height: 100%; }

   CrawlerOne.ui.xml looks like-- inside g:HTMLpanel tags

   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 looks like--

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

and WebCrawlerOne.java looks like--

    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);
    }
  }

The output looks like--

The CellTable is being displayed if run directly from the EntryPoint class. Any help appreciated. Thanks!

Answer 1

I wrote a little bit before I realized the simple answer I think you actually need, so first, the simple answer, then some more things to consider.

You are creating a new instance of the CellTable in your ui.xml file. This is replacing the already configured CellTable instance in onInitialize, which means it has no columns, and so isn't visible. The call to uibinder.createAndBind is going to go through and create all of the widgets with @UiField annotations, unless you mark them as already provided. Two options:

• Mark it as provided:

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

• Don't configure the table until after uibinder.createAndBind is called

  //...
  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%");
  

First option is probably better, so you can completely configure it before drawing anything. That said, I haven't tested either (not enough code provided to easily test).

---

The various LayoutPanels (generally, things that implement ProvidesResize and RequiresResize) size their children, based on whatever particular rules each one has.

These only can size their direct children - if given a child that doesn't require resize (like HTMLPanel), they don't do any layout work there, instead expecting that container to size its children however it sees fit.

So the HtmlPanel and the html you've drawn in your ui.xml file have likely gotten in the way of allowing the TabLayoutPanel to correctly pass layout info down to the CellTable. If you don't want to use the layout stuff, then this is a good thing - you'll need to size the CellTable some other way.

One last thought: use FireBug or the like to make sure the dom is set up as you expect it to be. There you will see that the celltable is present, but doesnt have any content.