google-apps-script - 如何使用 Google UI Builder 和 Apps 脚本的清晰示例

Question

我到处搜索，找不到如何使用 Google 的 UI Builder 和应用程序脚本的明确示例。我不知道我错过了什么。我认为这应该很简单 :v/是的，我已经阅读了所有 Google 文档，观看了视频等 - 多次 - 没有 GUIB (Google 的 UI Builder) 和回调处理函数的组合，我能找到。
编辑:有 SpreadSheets 的示例 - 而不是 GSites

我需要做什么:
我想在 Google 网站页面上嵌入一个文本框和按钮来收集用户的搜索词组。我已经使用单个流程面板、文本框和按钮构建了非常简单的 UI，但无论我做什么(请参见下面的代码) 都只能从 Logger.log() 返回“Undefined”。

一点吐槽:
我一直非常小心地命名，并用正确的名字称呼。我试过在 GUIB 中使用表单面板，但你只能在其中放置一个小部件？! ...提交按钮只会进入表单面板 - 哈 - 我也不能把我的文本框放进去!？ (那么为什么要费心于表单面板 - 我不明白!......是的，我知道在提交时自动调用 doPost())。我希望小部件在使用一次后保持事件状态并且不会消失，所以可能 formpanel/submitbutton 无论如何都不起作用 - 或者这不是正确的方法吗？

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

// 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 构建其他应用程序会更好!任何人都可以给我或指出一个明显的例子吗？!

感谢阅读!

Answer 1

这是一个带有 example of GUI builder 的共享电子表格

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

希望它足够清楚，干杯，哔叽

编辑:如果您想看一个更复杂的例子，请 open this one (创建它的副本以使其可编辑)或查看它是否正常工作 here ，我想您可能会相信 GUI 生成器是一个非常强大的工具。