このブログを検索

2012年9月11日火曜日

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

■昨日の続きです

    昨日から始めた、以下のUI作成。

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


   昨日は、GUIビルダーで部品達の配置・設定をするところまで終わりました。
   今日は、スクリプトに手を加えて、若干の微調整をする過程を書きます。


■手順・スクリプト

   スクリプトエディタで、次の三つの処理を修正・追記します。

     ①作成したGUIビルダー全体を呼び出す
       -冒頭の”app.add(app.loadComponent("****"));”という構文の****の箇所を
         GUIビルダーの名前と一致させる。
          (例: dialogBox&LinkTest)
   
     ②GUIビルダーで作成したPanelを呼び出す


  
     ③GUIビルダーで作成したAnchor(=リンク)を「現在のタブで開く」設定にする



   これで、完了です♪
  

■スクリプト全体像

   これで、完了です。
   スクリプトの全体像はこのようになっています。



■動作テスト

   では、どんな感じに動作するのかチェックしてみましょ~~。

   今回も、Googleサイトの中に「Apps スクリプトガジェット」として挿入するのではなく、
   独立したページとして動かしてみます。

   「バージョン管理」してから、「ウェブアプリケーションとして公開」します。



   
   ここで表示されたURLをコピペする or 「最新のコード」を試すという箇所をクリックすると、
   新しいタブで、作成したUIのページが表示されます。



   ここで、「ダイアログボックス表示」ボタンを押します。



   ダイアログボックスが表示されます。



   さらに、「続けて書く」というボタンを押すと、現在のタブがリンク先に切り替わりました。





   一旦戻って、ダイアログボックスの「戻る」ボタンを押すと、ダイアログボックスが消えました。




   いい感じですね~~。


今日はここまで


■実際に試してみたい方へ

   今回作成したUIは、下記のURLからお試し頂けます。

   https://script.google.com/a/macros/mypleis.com/s/AKfycbz9H0HjwLD79L3kuB-HoQkG0pzhtXHrth60tZ-W4KNthK8O5NTA/exec

   また、Googleサイトの方からも飛べるように、リンクを準備しています。

   https://sites.google.com/a/mypleis.com/gas_mypleis/GAS_ALL/10_dialogbox_link_now


■予告編

   明日は、Googleフォームを参考にして、自作のフォームを作ってみようと思います。