Question

使用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);

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

网格中的按钮是否不受支持？或者我做错了什么？

感谢。

编辑：如果您想亲眼看到这种行为，我通过修改Google的一个示例来复制该问题。这里的“Validators”的第二个例子是：https://developers.google.com/apps-script/uiapp#Validators我修改了文本框和按钮并将其放在Grid Widget中。在文本框中输入数字后，每次单击网格上的任意位置时，“添加”点击处理程序将触发并再次添加数字：

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;
}

Answer 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

在网格中嵌入按钮会使网格表现为按钮？

1 个答案: