スクリプトによるGUIの生成 (3/5)
作成:2011-07-04 08:39
更新:2011-07-06 09:31
更新:2011-07-06 09:31
■フォーム送信の処理
続いて「フォーム送信」について説明しておきましょう。フォームを送信して処理させるようなサービスでは、Form Panelを用意する部分もスクリプトで記述しておかなければいけません。
フォームはForm PanelとしてGUI ビルダーに用意されていました。これは、「createFormPanel」というメソッドで作成することができます。これでFormPanelオブジェクトを作成し、この中にフォーム関連の部品を組み込んでいけば、簡単にフォームを作ることができます。
では、フォームをスクリプト内から利用することの利点はなんでしょうか。それは、送信後の処理などをダイナミックに行える、という点でしょう。既にGUIをスクリプトから生成し組み込む方法はわかっています。ならば、例えば送信後の表示を独自にコンポーネント類を用意して作成したりすることもできるはずですね。
簡単な利用例をあげておきましょう。下のリスト欄では、フォーム送信後、フォームの代りにテキストとボタンが追加表示されるようにしています。ここでは、doPostで送信後の処理を行う際、新たにLabelとButtonを作成してPanelに組み込んでいます。
注意すべきは、「FormPanelとその中に組み込んだものは画面から消えるが、それ以外のものは残っている」ということでしょう。ですから、例えばここでは最初にVerticalPanelを用意し、この中にすべてを組み込んでいますが、このVerticalPanelもちゃんと残されている、ということになります。
doPostで新たに作成した部品は、このVerticalPanelに組み込むことになります。そのためには、VerticalPanelにはsetIdでIDを指定しておく必要があります(でないと、getElementByIdで取得できないので)。
なお、doPostで、消えたフォームを復活させよう、と考える人はきっと多いと思いますが、これはうまくいかないようです。setVisibleでもダメだし、改めてパネルにaddしなおしたりしてもうまく表示されません。それよりは、リロードさせたほうがはるかに簡単のようですね。
フォームはForm PanelとしてGUI ビルダーに用意されていました。これは、「createFormPanel」というメソッドで作成することができます。これでFormPanelオブジェクトを作成し、この中にフォーム関連の部品を組み込んでいけば、簡単にフォームを作ることができます。
では、フォームをスクリプト内から利用することの利点はなんでしょうか。それは、送信後の処理などをダイナミックに行える、という点でしょう。既にGUIをスクリプトから生成し組み込む方法はわかっています。ならば、例えば送信後の表示を独自にコンポーネント類を用意して作成したりすることもできるはずですね。
簡単な利用例をあげておきましょう。下のリスト欄では、フォーム送信後、フォームの代りにテキストとボタンが追加表示されるようにしています。ここでは、doPostで送信後の処理を行う際、新たにLabelとButtonを作成してPanelに組み込んでいます。
注意すべきは、「FormPanelとその中に組み込んだものは画面から消えるが、それ以外のものは残っている」ということでしょう。ですから、例えばここでは最初にVerticalPanelを用意し、この中にすべてを組み込んでいますが、このVerticalPanelもちゃんと残されている、ということになります。
doPostで新たに作成した部品は、このVerticalPanelに組み込むことになります。そのためには、VerticalPanelにはsetIdでIDを指定しておく必要があります(でないと、getElementByIdで取得できないので)。
なお、doPostで、消えたフォームを復活させよう、と考える人はきっと多いと思いますが、これはうまくいかないようです。setVisibleでもダメだし、改めてパネルにaddしなおしたりしてもうまく表示されません。それよりは、リロードさせたほうがはるかに簡単のようですね。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
function doGet(e){ var app = UiApp.createApplication().setTitle("Sample Page"); var panel = app.createVerticalPanel(); panel.setId("mainpanel"); app.add(panel); var l1 = app.createLabel("This is Sample Page."); l1.setStyleAttribute("font-size", "18pt"); l1.setStyleAttribute("background-color", "#CCCCFF"); l1.setStyleAttribute("margin", "10px"); panel.add(l1); var l2 = app.createLabel("label1"); l2.setId("label1"); l2.setText("簡単なフォーム送信を行います。"); panel.add(l2); // フォーム作成 var form = app.createFormPanel(); form.setId("form"); var inpanel = app.createVerticalPanel(); form.add(inpanel); var tbox = app.createTextBox(); tbox.setName("tbox1"); inpanel.add(tbox); var btn = app.createSubmitButton("Submit"); inpanel.add(btn); panel.add(form); return app; } function doPost(e){ var app = UiApp.getActiveApplication(); var str = e.parameter.tbox1; var label = app.getElementById("label1"); label.setText('you typed: ' + str); // 表示修正 var btn = app.createButton("Thank you!!!"); var handler = app.createServerClickHandler("newbtnclick"); btn.addClickHandler(handler); var panel = app.getElementById("mainpanel"); panel.add(btn); return app; } function newbtnclick(e){ Logger.log(e); // ダミーの処理 return app; }
※関連コンテンツ
「初心者のためのGoogle Apps Scriptプログラミング入門」に戻る