0

使用 Google Apps 脚本构建网络应用程序时，当我将按钮小部件放入网格小部件时，似乎整个网格都变成了“按钮”。

即，如果我输入：

var myGrid = app.createGrid(4,4);
var addButton = myGrid.setWidget(3,3,app.createButton("Add"));
var handler = app.createServerClickHandler('add');
addButton.addClickHandler(handler);
app.add(myGrid);

在生成的 Web 应用程序中，如果我单击网格上的任何位置，按钮的 clickhandler 就会触发。更糟糕的是，如果我在网格中嵌入了多个按钮，单击网格上的任何位置都会触发所有按钮单击处理程序。

不支持网格中的按钮吗？还是我做错了什么？

谢谢。

编辑：如果您想亲自查看行为，我已通过修改 Google 的示例之一复制了该问题。“验证器”的第二个示例在这里： https ://developers.google.com/apps-script/uiapp#Validators我修改并将文本框和按钮放在网格小部件中。在文本框中输入数字后，每次单击网格上的任意位置时，“添加”clickhandler 都会触发并再次添加数字：

function doGet() {
  var app = UiApp.createApplication();
  var rgx = "^\\$?[0-9]+$";

  // Create input boxes and button.

  //var textBoxA = app.createTextBox().setId('textBoxA').setName('textBoxA');
  //var textBoxB = app.createTextBox().setId('textBoxB').setName('textBoxB');
  var myGrid = app.createGrid(4,4);
  myGrid.setWidget(0,0,app.createTextBox().setId('textBoxA').setName('textBoxA'));
  myGrid.setWidget(0,1,app.createTextBox().setId('textBoxB').setName('textBoxB'));

  var textBoxA = app.getElementById('textBoxA');
  var textBoxB = app.getElementById('textBoxB');

  var addButton = myGrid.setWidget(3,3,app.createButton("Add").setEnabled(false));
  var label = app.createLabel("Please input two numbers");

  // Create a handler to call the adding function.
  // Two validations are added to this handler so that it will
  // only invoke 'add' if both textBoxA and textBoxB contain
  // numbers.
  var handler = app.createServerClickHandler('add').validateMatches(textBoxA,rgx).validateMatches(textBoxBrgx).addCallbackElement(textBoxA).addCallbackElement(textBoxB);

  // Create a handler to enable the button if all input is legal
  var onValidInput = app.createClientHandler().validateMatches(textBoxA,rgx).validateMatches(textBoxB,rgx).forTargets(addButton).setEnabled(true).forTargets(label).setVisible(false);

  // Create a handler to mark invalid input in textBoxA and disable the button
  var onInvalidInput1 = app.createClientHandler().validateNotMatches(textBoxA,rgx).forTargets(addButton).setEnabled (false).forTargets(textBoxA).setStyleAttribute("color",     "red").forTargets(label).setVisible(true);

   // Create a handler to mark the input in textBoxA as valid
  var onValidInput1 =     app.createClientHandler().validateMatches(textBoxA,rgx).forTargets(textBoxA).setStyleAttribute("color", "black");

   // Create a handler to mark invalid input in textBoxB and disable the button
  var onInvalidInput2 =     app.createClientHandler().validateNotMatches(textBoxB,rgx).forTargets(addButton).setEnabled(false).forTargets(textBoxB).setStyleAttribute("color", "red").forTargets(label).setVisible(true);

  // Create a handler to mark the input in textBoxB as valid
  var onValidInput2 = app.createClientHandler().validateMatches(textBoxB,rgx).forTargets(textBoxB).setStyleAttribute("color","black");

  // Add all the handlers to be called when the user types in the text boxes
  textBoxA.addKeyUpHandler(onInvalidInput1);
  textBoxB.addKeyUpHandler(onInvalidInput2);
  textBoxA.addKeyUpHandler(onValidInput1);
  textBoxB.addKeyUpHandler(onValidInput2);
  textBoxA.addKeyUpHandler(onValidInput);
  textBoxB.addKeyUpHandler(onValidInput);
  addButton.addClickHandler(handler);

  app.add(myGrid);
  //app.add(textBoxB);
  //app.add(addButton);
  app.add(label);
  return app;
}

function add(e) {
  var app = UiApp.getActiveApplication();
   var result = parseFloat(e.parameter.textBoxA) + parseFloat(e.parameter.textBoxB);
   var newResultLabel = app.createLabel("Result is: " + result);
  app.add(newResultLabel);
  return app;
}
4

1 回答 1

1

当你写

var addButton = myGrid.setWidget(3,3,app.createButton("Add"));

然后将处理程序添加到变量addButton 中，实际上是将处理程序添加到网格，而不是按钮。

我建议像这样重写它（我评论了代码），它会正常工作

var myGrid = app.createGrid(4,4);
var addButton = app.createButton("Add");
myGrid.setWidget(3,3,addButton);// here you add the button to the grid
var handler = app.createServerClickHandler('add');
addButton.addClickHandler(handler);
app.add(myGrid);// only the grid must be added, the button is already in it

或者，如果你想让它更紧凑：

var handler = app.createServerClickHandler('add');
var myGrid = app.createGrid(4,4).setWidget(3,3,createButton("Add",handler));// here you add the button to the grid
app.add(myGrid);// only the grid must be added, the button is already in it
于 2013-08-15T18:08:07.817 回答