Gwt 在客户端通过复选框切换小部件的可见性？

我试图使用一个复选框来切换某些小部件的可见性。然而，我真的很难让客户端处理程序正确地切换它们

这是我最好的尝试

编辑：完全可复制的示例

function doGet() {
  var app = UiApp.createApplication();

  var checkbox = app.createCheckBox("Toggle Visiblity").setName("togglebox").setId("togglebox");
  app.add(checkbox);
  var listBox = app.createListBox(true)
    .addItem("Item #1")
    .addItem("Item #2")
    .addItem("Item #3")
    .setVisible(false);
  app.add(listBox);

   checkbox.addValueChangeHandler(app.createClientHandler()
                                        .validateMatches(checkbox, "on")
                                        .forTargets(listBox)
                                        .setVisible(true));
  checkbox.addValueChangeHandler(app.createClientHandler()
                                        .validateMatches(checkbox, "off")
                                        .forTargets(listBox)
                                        .setVisible(false));

  return app;
}

理论上它应该可以工作，但当我切换复选框时，什么也没有发生。我尝试了几个不同的值，有“I”标志，也有没有“I”标志，但都不起作用

---

有人对如何在不使用服务器端处理程序的情况下做到这一点有什么建议吗？

这是使用Henrique建议的“隐身技巧”实现的

编辑：请注意，最后一条语句

listBox.setVisible（true）

在我看来不符合逻辑，但如果我忽略它，则在单击之前，listBox不可见。。。我真的不明白。。。有人知道吗

EDIT2:oooops我真傻，我没有注意到创建列表框时添加的

setVisible（false）

-P哼哼。。。我真的很傻。。。我想你是想开始“隐形”吧？在这种情况下，这段代码会有一些小的变化。。。 像这样（我最终决定显示两个版本…）

---

这是在使用亨里克建议的“隐形技巧”

编辑：请注意，最后一条语句

listBox.setVisible（true）

在我看来不符合逻辑，但如果我忽略它，则在单击之前，listBox不可见。。。我真的不明白。。。有人知道吗

EDIT2:oooops我真傻，我没有注意到创建列表框时添加的

setVisible（false）

-P哼哼。。。我真的很傻。。。我想你是想开始“隐形”吧？在这种情况下，这段代码会有一些小的变化。。。 像这样（我最终决定显示两个版本…）

---

你看到了吗？我想它回答了你的问题，只需在目标中用setVisible（真/假）重新保存setValue（真/假）。看看我的最后一张edit@Sergeinsas将setVisible更改为setValue无效（它们已设置为setVisible）。请注意，目标实际上是一个列表框和一个标签，如果我删除了validate行，它仍然会显示它们，我只是无法取消显示它们。请发布一个可测试的代码好吗？不仅是处理者，还有所有的人，对不起，我不在；-）就是这样，测试和工作你看到了吗？我想它回答了你的问题，只需在目标中用setVisible（真/假）重新保存setValue（真/假）。看看我的最后一张edit@Sergeinsas将setVisible更改为setValue无效（它们已设置为setVisible）。请注意，目标实际上是一个列表框和一个标签，如果我删除了validate行，它仍然会显示它们，我只是无法取消显示它们。请发布一个可测试的代码好吗？不仅是处理者，还有所有的人，对不起，我不在；-）它就在那里，经过测试并在银行工作；-）我稍微修改了第一个版本，因为forTargets（）是可链接的。。。你能勾选“回答框”吗？（哈哈！）谢谢；-）我稍微修改了第一个版本，因为forTargets（）是可链接的。。。你能勾选“回答框”吗（哈哈！）

function doGet() {
  var app = UiApp.createApplication();

  var checkbox = app.createCheckBox("Toggle Visiblity").setName("togglebox").setId("togglebox").setValue(true);
  var checkbox2 = app.createCheckBox("Toggle Visiblity").setVisible(false);
  var hpanel = app.createHorizontalPanel();
  hpanel.add(checkbox).add(checkbox2);
  app.add(hpanel);
  var listBox = app.createListBox(true)
    .addItem("Item #1")
    .addItem("Item #2")
    .addItem("Item #3")
    .setVisible(false);
  app.add(listBox);

 var ChandlerA = app.createClientHandler().forTargets(listBox).setVisible(false)
 .forTargets(checkbox2).setVisible(true).setValue(false)
 .forEventSource().setVisible(false);
  checkbox.addClickHandler(ChandlerA)
 var ChandlerB = app.createClientHandler().forTargets(listBox).setVisible(true)
 .forTargets(checkbox).setVisible(true).setValue(true)
 .forEventSource().setVisible(false);
  checkbox2.addClickHandler(ChandlerB)

  listBox.setVisible(true);
return app
  }

function doGet() {
  var app = UiApp.createApplication();

  var checkbox = app.createCheckBox("Toggle Visiblity").setName("togglebox").setId("togglebox").setVisible(false);
  var checkbox2 = app.createCheckBox("Toggle Visiblity").setVisible(true).setValue(false);
  var hpanel = app.createHorizontalPanel();
  hpanel.add(checkbox).add(checkbox2);
  app.add(hpanel);
  var listBox = app.createListBox(true)
    .addItem("Item #1")
    .addItem("Item #2")
    .addItem("Item #3")
    .setVisible(false);
  app.add(listBox);

 var ChandlerA = app.createClientHandler().forTargets(listBox).setVisible(false)
 .forTargets(checkbox2).setVisible(true).setValue(false)
 .forEventSource().setVisible(false);
  checkbox.addClickHandler(ChandlerA)
 var ChandlerB = app.createClientHandler().forTargets(listBox).setVisible(true)
 .forTargets(checkbox).setVisible(true).setValue(true)
 .forEventSource().setVisible(false);
  checkbox2.addClickHandler(ChandlerB)

return app
}