如何防止使用 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;
}
}
我在我的应用程序中使用 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;
}
}