如何防止使用 GWT 无序添加控件?

How to prevent a disorderly adding of controls using GWT?

我在我的应用程序中使用 GWT 创建了两个具有相同按钮的面板。例如,两个面板 PanelFirst 和 PanelSecond 有两个 classes,按钮 MyButton 有一个 class,单击后显示警报。我在两个面板上都添加了一个按钮,并希望看到一个包含两个面板的页面,每个面板上都有相同的按钮。但是我得到两个面板,其中 PanelFirst 是空的,而 PanelSecond 有两个重叠的按钮(按钮看起来像一个按钮,当我单击它时我收到两个警报,在 html 的 DevTool 中我看到两个按钮放在同一个地方)。为什么会这样?根本原因在异步js?我该如何解决这个问题?

为了更好地理解我,我附上了一个代码示例(这不是真正的代码。它只是普通示例)。

class PanelFirst {

   private static Button myFirstButton = new Button();
   private static FlowPanel firstPanel;

   public PanelFirst (){};

   public FlowPanel createPanelFirst(){
     firstPanel = new FlowPanel();
     myFirstButton = MyButton().createMyButton();
     firstPanel.add(myFirstButton);
     return firstPanel;
   }   
}

class PanelSecond  {

   private static Button mySecondButton = new Button();
   private static FlowPanel secondPanel;

   public PanelSecond(){};

   public FlowPanel createPanelSecond(){
     secondPanel= new FlowPanel();
     mySecondButton = MyButton().createMyButton();
     secondPanel.add(mySecondButton);
     return secondPanel;
   }   
}

class MyButton {

   private static Button mySecondButton = new Button();

   public MyButton(){};

   public Button createMyButton(){
     mySecondButton.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                createAlert("I'm button");
            }
        });
     return mySecondButton;
   }   
}

好吧,您基本上是将同一个按钮添加到 2 个面板 2 次并向其添加 2 ClickHandler。您需要像这样更改代码:

首先将您的 createMyButton 更改为静态方法并在那里创建一个新对象

class MyButton {

    public MyButton(){};

    public static Button createMyButton(){
        MyButton button = new MyButton();
        button.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                createAlert("I'm button");
            }
        });
        return button;
    }   
}

现在您可以在面板中使用它了:

class PanelFirst {

    private static FlowPanel firstPanel;

    public PanelFirst (){};

    public FlowPanel createPanelFirst(){
        firstPanel = new FlowPanel();
        firstPanel.add(MyButton.createMyButton());
        return firstPanel;
    }   
}

class PanelSecond  {
    private static FlowPanel secondPanel;

    public PanelSecond(){};

    public FlowPanel createPanelSecond(){
        secondPanel= new FlowPanel();
        secondPanel.add(MyButton.createMyButton());
        return secondPanel;
    }   
}