このブログを検索

2012年11月9日金曜日

チェックボックス(随時)

■久々のスクリプト

   ちょっと間があいてしまいましたが、チェックボックスを実装するべく、
   オベンキョオベンキョしていました。

   前回の記事で、チェックボックスを実装するには、BUIビルダーを使用せずに、
   直接スクリプトを記述した方が良い、ということが分かりました。

   そこで、今回は、全文スクリプトを記述して次のような簡単なチェックボックスを
   作りました。

    チェックボックスを選択すると、選択したチェック項目名を下段に表示
     

■参照元

   前回の記事と同様に、今回も【bmoo】さんのお世話になりました。

   http://www.bmoo.net/archives/2012/04/314029.html


■スクリプト

   作成したスクリプトは、こんな感じです。
   (ほとんど、bmooさんのコピーに近いですねっっ)




   ☆簡単コード説明☆

     1~33行目  :  UIの定義
                  -外枠作成
                  -チェックボックス作成
                  -チェックボックス選択時の表示用ラベル作成

     34~70行目 :  チェックボックスが選択された際の処理  

    ----------------------------------------------------------------

      2~4行目 : 決まり文句
      
      7~13行目 : Panel”checkboxContainer”の中にチェックボックスを6つ作成
                  ・チェックボックスの表示名をそれぞれ定義
                     ex) 幼少期(0~6歳頃)
                  ・チェックボックスオブジェクトの名前をそれぞれ定義
                     ex) age1
                  ・チェックボックスが選択された際の処理functionを紐付け
 
     16~22行目 : Panel”infobox”にラベルを6つ作成
                  ・各チェックボックスを選択時に表示させたいメッセージを定義
                     ex) age1を選択 ⇒ 「幼少期(0~6歳頃)」と表示
                  ・初めは「Visible = false」で表示されないようにする

     25~32行目 : Panelをアプリに追加する    ※後記「補足」参照

  ---------------------------------------------------------------------

     37~70行目 : 各チェックボックス選択時の処理を定義
                  ex) age1を選択 ⇒ info1を「Visible = true」で表示する


    【補足】  
       VerticalPanelが3つも登場したので、念のためどんな配置になっているかを
       簡単に図示します。



■動作テスト

   これで、動作テストしてみます。

   初めの表示はこんな感じ。


   適当にチェックしてみます。(1,3,4,5,6をチェックした際の画面↓)
   すると、下の段に選択されたチェック項目が表示されます。



    チェックを外すと、下の段の表示も消えます。



   とってもシンプルですが、こんな感じで~す。

今日はここまで。


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

   以下のURLに、スクリプト全文+UIを載せています。   https://sites.google.com/a/mypleis.com/gas_mypleis/GAS_ALL/13_checkbox_realtime_v2/13_checkbox_realtime


■予告編

   次回は、今日のチェックボックスを改良して、「保存ボタン押下でSSに保存」できる
   ようにしたいと思います。