a clear example of how to use Google UI Builder an

Question

I have searched everywhere and cannot find a clear example of how to use Googles UI Builder and apps script. I have no clue what I'm missing. I think this should be simple :v/ YES, I've read all Googles docs, watched vids etc - several times - there is no combination of GUIB (Google's UI Builder) and a callback handler function, that I can find.
EDIT: there are examples for SpreadSheets - not GSites

What I need to do:
I would like to embed a textbox and button to collect a search phrase from a user, on a Google site page. I have built the very simple UI with a single flowpanel, textbox and button, but can only ever get "Undefined" returned from Logger.log() no matter what I do (see code below).

A bit of a rant:
I have been very careful to name, and call by the right names. I've tried using a formpanel BUT in GUIB, you can only put ONE widget in it?! ...AND a submit button will only go into a formpanel - huh - I can't put my text box in as well!? (Why bother with the formpanel then - I don't get that! ...yeah I know about doPost() automatically being called on submit). I want the widgets to remain active and not disappear after one use, so maybe formpanel/submitbutton won't work anyway - or isn't the right way to do it?

Down to business:
At any rate, what I've tried is to put the regular button and text box in a flowpanel with the following code...
EDIT: I deleted my original content here and reposted this section...

// 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!
}

I've also tried adding code to manually set handlers etc in doGet(), and not use GUIB Event settings, but to no avail either.

Conclusion?
What Gives? Do I have to hand-code the GUIs and not use GUIB? I know it's a simple one this time, but if I can get this working I can sure see being much nicer to build other apps with GUIB! Can anyone give me or point me to a clear example?!

Thanks for reading!

Answer 1

Many thanks to Serge Insas!!

The answer is as shown below - I had missed two things:

1. the small [+] beside the On Mouse Click server handler - to add a parameter to return

2. the Name is what is used NOT ID - set in Input Fields section of tbxQuery

(NOTE: non-data elements don't have names - so fplMain has only an ID, but still works)

So, here is the resulting code, and comments describing GUIB settings:

// 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
  //
}

Answer 2

here is a shared spreadsheet with an example of GUI builder

when you're in the GUI builder look at the properties of the element you want to trigger a function, at the end of the parameter list there is an 'EVENT' properties where you can add the function name and the callbackElements as well. !

Hoping it's clear enough, cheers, Serge

EDIT : if you want to have a look at a more complex example please open this one (create a copy of it to make it editable) or see it working here, I think you might be convinced that the GUI builder is a really powerfull tool .