back
スクリプトによるGUIの生成 (3/5)
■フォーム送信の処理
続いて「フォーム送信」について説明しておきましょう。フォームを送信して処理させるようなサービスでは、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;
}
| << 前へ | 次へ >> |