このブログを検索

2012年9月10日月曜日

【GUIビルダー】ボタン・ダイアログボックス・リンク表示(1)

■今までの総集編です

   ここ2週間ほど、GUIビルダーを使って基礎的なUIを作ってきました。
   今日は、この2週間でお勉強したことを組み合わせて、少しだけ応用的な
   UIを作ってみようと思います。(応用的、と言うほどでもないですが・・・)

   具体的には、次のようなUIを作ります♪

      ボタン押下でダイアログボックス表示。
      ダイアログボックス内にメッセージと次の動作をするボタン2つ配置。
        ①ダイアログボックスを閉じる 
        ②特定のページへのリンクを現在のタブで開く

   さぁ、やるぞー。


■参照元

   今回は、過去の自分の投稿を参考にしています。
   詳細にご興味のある方は、以下の投稿をご覧ください。

     ☆ 【GUIビルダー】Googleサイト上にボタン・メッセージ表示(1)~(3)

     ☆ 【GUIビルダー】ダイアログボックス表示(1)~(2)

     ☆ 【GUIビルダー】ボタン押下でリンク表示(@同窓)
     

■手順・スクリプト

   さて、今回は過去に作った『ダイアログボックス表示』のスクリプトをベースにカスタマイズ
   しようと思います。
   ですので、まずはGoogleサイトから「サイトの管理」→「Appsスクリプト」を開いて、
   『【GAS】ダイアログボックス表示』というスクリプトを選択し、コピーを作成します。






   コピーを作ったらば、一旦名前を変更して「保存」します。


    
   今のスクリプトでは、ダイアログボックスの中に表示する「パネル(vpanel)」及び
   そのパネルの中に配置する「ボタン(btn)」は、スクリプトの中で作成しています。
   



   今回は、ダイアログボックスの中のパネルやボタン表示をGUIビルダーを使って作成
   したいと思いますので、ごっそりと上記の赤い枠内の記述(18~24行目)を削除します。
      

   一旦スクリプトの修正は置いておいて、「インターフェース構築...」を押してGUIビルダーを
   開きます。



   コピペ直後は、ボタンが一つ配置しているだけですね。
   これはそのままでOKですが、ちょっと邪魔なので下の方に移動。



   そして、左側の部品(コンポーネント)一覧から以下の部品を中央へドラッグ&ドロップ。

      ①Absolute Panel : ②~⑤を収める土台のため
                     ※ボタンを横に2つ配置できるのは、Absolute Panelのみ
                     ※②~⑤が全てPanel内に収まるように、適宜大きさ調整

      ②Label       : メッセージ表示のため 
      ③Label       : メッセージ表示のため
                     ※ 本当は②と③を一つにまとめたいのですが、
                       GUIビルダー上でどうやって改行すればいいのか
                       分からなかった、、、という超残念な理由から分けています。

      ④Button      : 飾り (⑤Anchorのリンク用)

      ⑤Anchor      : 特定のページへのリンクのため
                      ※④Buttonの上にぴったり重ねてください(幅・高さも)

      ⑥Button       : ダイアログボックスを閉じるため


 


   ②と③のLabelの「テキスト」に任意のメッセージを入力します。




 
   ④と⑥のButtonの「テキスト」に任意のメッセージを入力します。







   ⑥Buttonの「イベント」→「マウスのクリック」に”myClickHandlerDialog”を選びます。



   ⑤Anchorの「テキスト」を【空欄】にして、「リンク」に特定のページのURLを記入します。



   部品数が増えてきて混乱するので、①~⑥の部品それぞれの【ID】を下記のように
   変更しました。
   
      ①Absolute Panel  : 【ID】 Panel  
      ②Label        : 【ID】 Label1 (←デフォルトのまま)
      ③Label         : 【ID】 Label2 (←デフォルトのまま)
      ④Button       : 【ID】 ContinueButton
      ⑤Anchor       : 【ID】 ContinueAnchor
      ⑥Button       : 【ID】 BackButton





   これで、一旦GUIビルダーを使っての作業は終了。
   任意の名前で「保存」します。




また長くなりそうなので、今日はここまで。


■予告編

   明日は、今日の続きです。