Question

我正在尝试使用复选框来切换某些小部件的可见性。但是我真的很难让客户端处理程序正确切换它们。

这是我最好的尝试

编辑：完全可重复的例子

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”标志，没有一个有效。

有没有人对如何执行此操作有任何建议，没有使用服务器端处理程序？

Answer 1

这是使用Henrique建议的{invisibility trick'in a former post

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
  }

编辑：请注意，最后一个语句listBox.setVisible(true)对我来说不符合逻辑但是如果我省略它，则在点击之前看不到listBox ...我真的不明白......有谁知道？

EDIT2：Ooooops我多么愚蠢，我没有注意到你在创建listBox时添加的setVisible(false) ;-哼哼哼哼......真的很愚蠢......我想你想开始'看不见的？在这种情况下，将对此代码进行一些小的更改...... 像这样（我最终决定展示两个版本......）

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
}

使用客户端上的复选框切换窗口小部件的可见性？

1 个答案: