GWT 电子表格单元格

Question

我正在尝试使用 GWT 重现电子表格单元格的行为。我能够制作一个名为“Cell”的复合小部件，默认情况下它是一个“标签”小部件。当用户点击这个小部件时，它就变成了一个“文本框”小部件。在模糊事件中，小部件再次变为“标签”小部件。

我的问题涉及效率和渲染时间。将我的“单元格”设置为“文本框”并通过 CSS 更改用户的外观（根据他们是否输入数据）可能是最简单的。但是，我认为这会影响渲染时间，因此只要不需要输入，我就会恢复为“标签”小部件。然而，这种方法的问题在于，每次用户需要在“单元格”中输入任何内容时，我基本上都是在创建一个新的文本框/标签。

这是我的伪代码（因为我不在 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;
    }
}

...

当TextBox有onBlurEvent或者Label有onClick事件时，调用switchMode()方法。欢迎批评代码。

将 TextBox 和 Label 作为 Cell 类的私有变量包含在内，然后根据需要添加或删除相应的对象会更聪明吗？

Answer 1

我们遇到了类似的问题：高效显示类似 excel 的表格（很多行和列，每个单元格就地可编辑）。

最终的解决方案是：将表格呈现为字符串：每个单元格都呈现为文本，全部通过innerHTML。 当用户使用鼠标或键盘选择一个单元格时，特殊隐藏的 TextArea 会出现在所选单元格上（具有相同的大小），并且焦点会出现在 TextArea 上。 OnBlur - 输入的文本返回到单元格，TextArea 再次隐藏。

我们不为单元格使用小部件。 TextArea 仅适用于整个表格。

另请参阅 “Effective GWT：使用 Google Web Toolkit 开发复杂的高性能应用程序” http://code.google.com/events/io/2009/sessions/EffectiveGwt.html

Answer 2

更简单的方法是将它们都添加到您的面板中（虽然不是simplePanel），并使用setVisable 方法来改变可见性。