GWT Spreadsheet Cell

Question

I am trying to reproduce the behavior of a spreadsheet cell using GWT. I was able to make a Composite widget called "Cell" which is by default a "Label" widget. When a user clicks on this widget, it becomes a "TextBox" widget. On a blur event, the widget becomes a "Label" widget once again.

My question concerns efficiency and rendering time. It would probably be easiest to just make my "Cell" a "TextBox" and just change the appearance to the user via CSS (according to whether they are entering data or not). However, I think that this will affect rendering time and so I revert to a "Label" widget whenever input is not necessary. The problem with this method, however, is that I am basically creating a new TextBox/Label each time the user needs to enter anything into the "Cell".

Here is my pseudo-code (since I am not around an IDE)...

public class Cell extends Composite {

private SimplePanel sp;

public Cell() {
    Label l = new Label("");
    sp.add(l);
}

private void switchMode() {
    Widget w = sp.getWidget();
    if (w instanceof Label) {
        // we have a Label, change it to a TextBox
        String text = ((Label) w).getText();
        sp.remove(w);
        sp.add(new TextBox(text));
        // force garbage collection
        w = null;
    } else {
        // we have a TextBox, change it to a Label
        String text = ((TextBox) w).getText();
        sp.remove(w);
        sp.add(new Label(text));
        // force garbage collection
        w = null;
    }
}

...

When there is a onBlurEvent on the TextBox or when there is an onClick event on the Label, the switchMode() method is called. Critiquing of code is welcomed.

Would it instead be smarter to include a TextBox and Label as private variables of the Cell class, and then just add or remove the corresponding object as needed?

zmila zmila · Accepted Answer · 2010-01-20T10:43:47

We met similar problem: efficient display of excel-like table (a lot of rows and cols, each cell in-place editable).

The final solution was: render the table as string: each cell is rendered just as text, put all via innerHTML. When the user selects a cell with mouse or keyboard, special hidden TextArea appeared over the selected cell (with the same size) and focus gives to the TextArea. OnBlur - text entered goes back to the cell and the TextArea is hidden again.

We use no widgets for cells. The TextArea is only one for the whole table.

See also "Effective GWT: Developing a complex, high-performance app with Google Web Toolkit" http://code.google.com/events/io/2009/sessions/EffectiveGwt.html

GWT Spreadsheet Cell

2 Answers