3

どこでも検索しましたが、Google の UI ビルダーとアプリ スクリプトの使用方法の明確な例が見つかりません。何が欠けているのかわかりません。これは単純なはずだと思います:v/ はい、すべての Google のドキュメントを読み、ビデオなどを見ました - 数回 - GUIB (Google の UI ビルダー)とコールバック ハンドラー関数の組み合わせはありません。
編集:SpreadSheetsの例があります-GSitesではありません

私がしなければならないこと:
ユーザーから検索フレーズを収集するためのテキスト ボックスとボタンを Google サイト ページに埋め込みたいと考えています。私は単一のフローパネル、テキストボックス、およびボタンを備えた非常に単純な UI を構築しましたが、何をしても Logger.log() から返される「未定義」しか取得できません(以下のコードを参照)。

ちょっとした暴言:
私は名前を付けるのに非常に注意を払い、正しい名前で呼んでいます。GUIB で formpanel を使用してみましたが、ウィジェットは 1 つしか配置できませんか?! ...そして、送信ボタンはフォームパネルにしか入りません - えー - テキストボックスも入れられない!? (フォームパネルを気にする必要はありません - わかりません! ...送信時に 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 イベント設定を使用しませんでしたが、どちらも役に立ちませんでした。

結論？
何を与える？GUIB を使用せずに、GUI をハンドコーディングする必要がありますか? 今回は単純なことはわかっていますが、これを機能させることができれば、GUIB を使用して他のアプリを構築する方がはるかに優れていることがわかります! 誰かが私に与えるか、明確な例を教えてもらえますか?!

読んでくれてありがとう！

4

2 に答える 2

6

これは、 GUIビルダーの例を含む共有スプレッドシートです

GUIビルダーを使用しているときに、関数をトリガーする要素のプロパティを確認します。パラメーターリストの最後に、関数名とcallbackElementsを追加できる「EVENT」プロパティがあります。！

画面キャプチャ

それが十分に明確であることを願って、乾杯、セルジュ

編集：より複雑な例を見たい場合は、これを開くか（編集可能にするためにコピーを作成してください）、ここで機能することを確認してください。GUIビルダーは本当に強力なツールであると確信しているかもしれません。 。

于 2012-05-20T07:01:41.857 に答える
2

SergeInsasに感謝します!!

答えは以下のとおりです-私は2つのことを見逃していました：

  1. OnMouseClickサーバーハンドラーの横にある小さな[+] -返すパラメーターを追加します

  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 に答える