java - Vaadin SuperDevMode 重新编译有时会失败，Widget 未按应有的方式呈现，并且 Widget 的 Java 代码不可用

Question

我正在尝试在 Vaadin 项目上设置 SuperDevMode。

我基本上有 3 个与此功能相关的问题。

我有以下小部件(使用“New Vaadin Widget”向导创建，位于客户端小部件、连接器、状态和服务器端组件的代码下方):

// Widget:
public class CountedTextFieldWidget extends Composite {

    private TextBox textBox = new TextBox();
    private Label countLabel = new Label("0");
    private HorizontalPanel panel = new HorizontalPanel();

    public static final String CLASSNAME = "countedtextfield";

    public CountedTextFieldWidget() {
        initWidget(panel);
        setStylePrimaryName(CLASSNAME);
        textBox.setStylePrimaryName(CLASSNAME + "-field");
        countLabel.setStylePrimaryName(CLASSNAME + "-label");
        setStylePrimaryName(CLASSNAME);
        panel.add(textBox);
        panel.add(countLabel);
    }

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

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

    public void setCount(int count) {
        countLabel.setText("" + count);
    }

    public int getCount() {
        return Integer.parseInt(countLabel.getText());
    }

    // HandlerRegistration can be used to remove the key up handler (listener) 
    // added with this method
    public HandlerRegistration addKeyUpHandler(KeyUpHandler handler) {
        return textBox.addKeyUpHandler(handler);
    }

}

/********************************************************/
// Connector:
@Connect(CountedTextField.class)
public class CountedTextFieldConnector extends AbstractComponentConnector {

    public CountedTextFieldConnector() {
        getWidget().addKeyUpHandler(new KeyUpHandler() {

            @Override
            public void onKeyUp(KeyUpEvent event) {
                String text = getWidget().getText();
                getWidget().setCount(text.length());
            }           
        });
    }

    @Override
    protected Widget createWidget() {
        return GWT.create(CountedTextFieldWidget.class);
    }

    @Override
    public CountedTextFieldWidget getWidget() {
        return (CountedTextFieldWidget) super.getWidget();
    }

    @Override
    public CountedTextFieldState getState() {
        return (CountedTextFieldState) super.getState();
    }

    @Override
    public void onStateChanged(StateChangeEvent stateChangeEvent) {
        super.onStateChanged(stateChangeEvent);

        final String text = getState().text;
        getWidget().setText(text);
        getWidget().setCount(text.length());
    }

}

/********************************************************/
// State

public class CountedTextFieldState extends com.vaadin.shared.ui.textfield.AbstractTextFieldState {

    {
        primaryStyleName = null;
    }
}

/********************************************************/
// Server-side component:
public class CountedTextField extends com.vaadin.ui.TextField {

    @Override
    public String getValue() {
        return getState().text;
    }

    public void setValue(String value) {
        getState().text = value;
    }

    @Override
    public CountedTextFieldState getState() {
        return (CountedTextFieldState) super.getState();
    }
}

该小部件呈现如下:

现在，我已按照 Vaadin wiki 上的以下指南进行操作:

https://vaadin.com/wiki/-/wiki/Main/Using%20SuperDevMode

CodeServer 按预期启动:

The code server is ready.
Next, visit: http://localhost:9876/

但是当我打开项目并将 ?superdevmode 附加到 URL 时，收到 重新编译失败... 消息，并且浏览器控制台中出现一些错误:

所以我的第一个问题与此问题相关:

1) 为什么有时重新编译会失败？那些SEVERE:JSONP编译调用失败和SEVERE:Timeout Excecution是什么？

然后，如果我...单击重试，有时 super 开发模式会启动，但自定义小部件不会像我发布的上一个屏幕截图中那样呈现。 相反，我得到了标准 Vaadin 的 v-textfield...

2) WTF...为什么？我的自定义组件在哪里？

我注意到，如果我打开localhost:9876，将Dev Mode On按钮拖动到书签工具栏，然后在打开时单击它，也会遇到同样的问题本地主机:8080/项目。我的自定义小部件消失了，取而代之的是 Vaadin 的 v-textfield 小部件...

还有启用源映射功能。在维基百科上，他们说:

To be able to debug Java code in Chrome, open the Chrome Inspector (right click -> Inspect Element), click the settings icon in the lower corner of the window and check "Scripts -> Enable source maps". Refresh the page with the inspector open and you will see Java code instead of JavaScript code in the scripts tab.

在我的 Chrome 中，窗口下角没有设置图标，我单击右侧的齿轮图标，然后转到常规 -> 来源并选中启用 JavaScript 源映射(我的设置选项卡上没有通用的启用源映射条目)。

我可以看到 Java 源代码，但它们都是 GWT 和 Vaadin 组件的源代码:

所以我的第三个问题和相关问题:

3) 我怎样才能看到我的自定义小部件代码？

感谢关注!希望我说清楚了。

Answer 1

我在尝试将 SuperDev 模式与 Vaadin 一起使用时也遇到了类似的问题。我不太确定为什么重新编译有时会失败，但我怀疑它涉及与我尝试发送 Java 源映射相同的问题。我遇到的问题似乎是缓存问题，因为代码服务器在我的/tmp 文件夹中创建了一个持久缓存目录。因此，我删除了它创建的每个文件夹(它们的名称中通常有“gwt”)并重新启动了代码服务器。我建议还添加 -src <complete-path-to-project>代码服务器配置中的参数，用于指定包含要添加到类路径前面的 GWT 源的目录，以进行编译，并可能将日志级别更改为 TRACE或DEBUG 。以下是这些参数的示例:

com.example.AppWidgetSet -src /home/workspace/widgetset/src/main/java 
-logLevel TRACE

我应该提到，日志级别非常冗长，但非常有用。日志还应显示缓存文件夹的位置。