3

我到处搜索，找不到一个清楚的例子来说明如何使用 Googles UI Builder 和应用程序脚本。我不知道我错过了什么。我认为这应该很简单：v/ 是的，我已经阅读了所有 Google 的文档、观看了视频等 - 好几次 - 我找不到 GUIB （Google 的 UI Builder）和回调处理函数的组合。
编辑：有电子表格的例子 - 不是 GSites

我需要做的：
我想在谷歌网站页面上嵌入一个文本框和按钮来收集用户的搜索短语。我用单个流程面板、文本框和按钮构建了非常简单的 UI，但无论我做什么，都只能从 Logger.log() 返回“未定义” （参见下面的代码）。

有点咆哮：
我一直非常小心地命名，并用正确的名字称呼。我试过在 GUIB 中使用表单面板，但你只能在里面放一个小部件？！...而且提交按钮只会进入表单面板 - 嗯 - 我也不能把我的文本框放进去！？ （那为什么还要麻烦表单面板 - 我不明白！......是的，我知道 doPost() 在提交时会自动被调用）。我希望小部件在一次使用后保持活动状态并且不会消失，所以表单面板/提交按钮可能无论如何都不起作用 - 或者不是正确的方法吗？

言归正传：
无论如何，我尝试将常规按钮和文本框放在带有以下代码的流程面板中......
编辑：我在这里删除了我的原始内容并重新发布了这个部分......

// 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 事件设置，但也无济于事。

结论？
是什么赋予了？我是否必须手动编码 GUI 而不使用 GUIB？我知道这一次很简单，但如果我能做到这一点，我肯定会看到使用 GUIB 构建其他应用程序会更好！谁能给我或指出一个明确的例子？！

谢谢阅读！

4

2 回答 2

6

这是一个带有GUI builder 示例的共享电子表格

当您在 GUI 构建器中查看要触发函数的元素的属性时，在参数列表的末尾有一个“事件”属性，您可以在其中添加函数名称和回调元素。！

屏幕截图

希望它足够清楚，干杯，塞尔吉

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

于 2012-05-20T07:01:41.857 回答
2

非常感谢 Serge Insas！

答案如下所示 - 我错过了两件事：

  1. On Mouse Click服务器处理程序旁边的小 [+] - 添加要返回的参数

  2. 名称是使用的不是 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
  //
}
于 2012-05-22T03:13:25.550 回答