一个关于如何使用Google UI Builder和Apps脚本的明确示例

Question

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

我需要做的是:
我想在Google网站页面上嵌入一个文本框和按钮来收集用户的搜索短语.我使用单个流面板,文本框和按钮构建了非常简单的UI,但无论我做什么,都只能从Logger.log()返回"Undefined" (请参阅下面的代码).

有点咆哮:
我一直非常小心地命名,并用正确的名字打电话.我试过在GUIB中使用formpanel但是你只能放一个小部件吗？!...并且提交按钮只会进入formpanel - 呵呵 - 我也不能把我的文本框放进去!？ (为什么要麻烦formpanel呢 - 我不明白!...是的,我知道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

这是一个共享电子表格,其中包含GUI构建器的示例

当您在GUI构建器中查看要触发函数的元素的属性时,在参数列表的末尾有一个"EVENT"属性,您可以在其中添加函数名称和callbackElements.!

希望它足够清楚,欢呼,塞尔

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