如何使用谷歌的用户界面生成器和应用程序脚本一个明显的例子(a clear example of ho

我已经到处找，找不到如何使用谷歌的用户界面生成器和Google Apps脚本一个明显的例子。我不知道我错过了什么。我想这应该是简单的：V /是的，我读过的所有谷歌文档，观看西元等-几次-没有GUIB的组合（谷歌的用户界面生成器）和回调处理函数，我能找到。
编辑：对于电子表格的例子-不GSites

我需要做什么：
我想嵌入一个文本框和按钮，从用户收集搜索短语，谷歌的网站页面上。我已经建立了一个单一的flowpanel，文本框和按钮非常简单的用户界面，但永远只能得到“未定义”从Logger.log（）返回不管我做什么（请参见下面的代码）。

夸大其词的一点：
我一直很小心的名字，并通过正确的名字叫。我已经使用FormPanel中尝试，但在GUIB，你只能将一个小部件呢？！ ...和一个提交按钮只会进入FormPanel中 - 嗯 - 我不能把我的文本框，以及！？ （为什么与FormPanel中那么麻烦- ！我没有得到......是啊，我知道的doPost（）会自动调用上提交）。 我想小部件保持活跃和一次使用后不会消失，所以也许FormPanel中/提交按钮无论如何都不会工作 - 或者是不这样做的正确方法？

正事：
无论如何，我已经试过是把常规按钮和文本框的flowpanel用下面的代码...
编辑：我删除了我在这里的原创内容，转贴本节...

// Google Sites and UIBuilder (GUIB) - kgingeri (Karl)
// - this script is embedded in a GSite page via: Insert -> Apps Script Gadget.
//
// Withing GUIB I have defined:
// - a FlowPanel named 'pnlMain'
// - inside that a textBox named 'tbxQuery' and a button called 'btnSearch'
// - for btnSearch, I have defined (in the Events subsection) a callback function
//   btnSearchHandler (see it below doGet() here.  I expanded the [+] beside that
//   and entered 'tbxQuery'    
//
// the GUIB compnent tree looks like this...
//
//  [-] testGui
//    [-] pnlMain
//          btnSearch
//          tbxQuery
//
// btnSearch Event section looks something like this...
//
// Events
//  On Mouse Clicks
//  [X][btnSearchHandler][-]
//  [tbxQuery         ]<--'
//  [Add Server]
//  ...
//
// So... 
// 1) when the page is opened, the doGet() function is called, showing the defined UI 
// 2) when text is entered into the textBox and the button is clicked
// 3) the data from tbxQuery is **SUPPOSED TO BE** returned as e.parameter.tbxQuery
//    in the function 'btnSearchHandler(e)' **BUT IS NOT**  :v(
//
// (this functionality appears to work in a spreadsheet?! - weird?!)

//
//    [ predefined function --- Google calls on page open ]
//
// ...this works 'as advertised' ;v)
//
function doGet(e) {
  var app = UiApp.createApplication();
  app.add(app.loadComponent("testGui"));  // ...the title that shows in G/UIBuilder
  return app;
}

//
//    [ callBack for when a button is clicked ]
//
// ...I always get 'Resp: [Undefined]' returned in the View -> Logs menu?!
// ...I also tried to put 'pnlMain' in the Event [+] param, no go :v(
//
function btnSearchHandler(e) {
  var resp = e.parameter.tbxQuery  // ...the data I want in the textBox widget
  Logger.log('Resp: [' + e.parameter.tbxQuery + ']');
  // ...more code to come, once this works!
}

我也尝试添加代码手动设置处理等，在的doGet（），而不是使用GUIB事件设置，但无济于事无论是。

结论？
是什么赋予了？我必须手工编写的图形用户界面，而不是使用GUIB？我知道这是一个简单的这段时间，但如果我能得到这个工作，我可以肯定看到正在好得多建立其他应用程序与GUIB！谁能给我或我指向一个明显的例子？

谢谢阅读！

Answer 1:

这里是具有一个共享的电子表格GUI生成器的示例

当你在GUI构建器看看元素的属性是要触发功能，在参数列表有一个“事件”的属性，您可以添加函数名和callbackElements以及结束。！

希望这是不够清晰，欢呼，塞尔

编辑：如果你想看看一个更复杂的例子，请打开这个（创建它的副本，以使其可编辑），或看到它的工作在这里，我想你可能会相信，GUI Builder是一个非常强大的工具。

Answer 2:

非常感谢塞尔INSAS！

如下图所示答案 - 我已经错过了两件事情：

小[+] 开鼠标单击服务器处理器旁边-增加一个参数，返回
名称是什么，是使用未ID -在tbxQuery 输入栏设置部分

（注：非数据元素没有名字 - 所以fplMain只有一个ID，但仍然有效）

所以，这里是生成的代码和注释说明GUIB设置：

// Google Sites and UIBuilder (GUIB) - kgingeri (Karl)
// - this script is embedded in a GSite page via: Insert -> Apps Script Gadget.
//
// Withing GUIB I have defined:
// - a FlowPanel named 'fplMain'
// - inside that, a textBox named 'tbxQuery' (see Input Fields section - this in NOT ID)
//   and a button called 'btnSearch'
// - for btnSearch, I have defined (in the Events subsection) a callback function
//   btnSearchHandler (see it below doGet() here).  I expanded the [+] beside that,
//   and entered "fplMain" as the return param (it will return all data elements)   
//
// the GUIB compnent tree looks like this...
//
//  [-] SearchGui
//    [-] fplMain
//          btnSearch
//          tbxQuery
//
// "tbxQuery" Input Fields param, "Name"... **THIS MUST BE SET!
//
// Input Fields
//  ...
//  Name
//  [tbxQuery     ]
//
// "btnSearch" Event section looks like this...
//
// Events
//  On Mouse Clicks
//  [X][btnSearchHandler][-]
//  [fplMain          ]<--'
//  [Add Server]
//  ...
//
// So... 
// 1) when the page is opened, the doGet() function is called, showing the defined UI 
// 2) when text is entered into the textBox and the button is clicked
// 3) the data from tbxQuery is returned as e.parameter.tbxQuery (as would be any other
//    params under the flow panel "fplMain") in the function 'btnSearchHandler(e)'

//
//    [ predefined function --- Google calls on page open ]
//
function doGet(e) {
  var app = UiApp.createApplication();
  app.add(app.loadComponent("SearchGUI"));  // ...the title you choose in G/UIBuilder
  return app;
}

//
//    [ callBack for when a button is clicked ]
//
function btnSearchHandler(e) {
  var resp = e.parameter.tbxQuery  // ...the data in the textBox widget
  Logger.log('Resp: [' + e.parameter.tbxQuery + ']');
  //
  // ...more code goes here, to do something with the returned data
  //
}

文章来源: a clear example of how to use Google UI Builder and Apps script