0

Google Apps Script を使用して Web アプリを作成し、ボタン ウィジェットをグリッド ウィジェットに配置すると、グリッド全体が "ボタン" に変わったように見えます。

つまり、私が置くと：

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 アプリで、グリッドの任意の場所をクリックすると、ボタンのクリックハンドラーが起動します。さらに悪いことに、グリッドに複数のボタンを埋め込むと、グリッド上の任意の場所をクリックすると、すべてのボタン クリック ハンドラが起動します。

グリッド内のボタンはサポートされていませんか? それとも私は何か間違ったことをしていますか？

ありがとう。

編集: 自分で動作を確認したい場合は、Google の例の 1 つを変更して問題を再現しました。「バリデーター」の 2 番目の例: https://developers.google.com/apps-script/uiapp#Validatorsテキスト ボックスとボタンを変更してグリッド ウィジェットに配置しました。テキスト ボックスに数値を入力した後、グリッドの任意の場所をクリックするたびに、「追加」クリック ハンドラが起動し、数値が再度追加されます。

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 に答える