このブログを検索

2012年12月21日金曜日

フォーム自作(テキスト・チェックボックス)(2)

■UI構築まで

   あぁ、師走師走師走ε=ε=ε=ε=ε=┌(; ・_・)┘
   いそがし~いそがし~~ランチとかショッピングとかパーティーとかでいそがし~(笑)

   はい。本題。
   テキスト入力・チェックボックス選択内容をスプレッドシートに保存し、
   Googleサイトに新規にページを追加する、というスクリプト。
   
   前回は下準備だけで終わってしまいましたので、今日はUIを構築する
   ところまでを載せま~す。


■UI構築

   まずは、スクリプトエディタのファイル → ユーザーインタフェース構築を選択し、
   BUIビルダーを開きます。



   名前を付けて、保存。



   今回作成するUIは、大きく次の2つに分類することができます。

     (1)入力フォーム部分
          : テキスト入力欄やチェックボックスを配置する箇所

     (2)ダイアログボックス部分
          : 入力フォーム内の「登録」ボタンを押下した後に表示される
            ダイアログボックス


 <入力フォーム部分>

   左側のコンポーネント(=部品)一覧から、次の部品を中央にドラッグ&ドロップ。
   各部品のプロパティを下記の通り変更する。  
     ※以下、あくまでサンプルですので、適宜お好きなものに変えて下さいね★

     ①Scroll Panel
         -ID      : Main Panel

     ②Vertical Panel
         -ID      : Vertical Panel1 (←デフォルト)

     ③Label ×3
         -ID      : Title / Contents / Age
         -テキスト   : タイトル / 本文 / 年代

     ④Text Box
         -ID      : Title Text Box
         -テキスト   : (空欄)
         -名前     : Title Text Box

     ⑤Text Area
         -ID      : Contents Text Area
         -テキスト   : (空欄)
         -名前     : Contents Text Area

     ⑥チェックボックス ×6
         -ID      : age1~6
         -テキスト   : 幼少期(・・・) / 学童期(・・・) / ・・・ / 老年期(・・・)
         -名前     : age1~6

     ⑦Button
         -ID      : Button1 (←デフォルト)
         -テキスト   : 登録



  IDや名前等の設定例は下記の通りです。(④TextBoxの例)




上記①~⑦の部品が、下記のような階層で配置されていることを確認する。



   部品⑥チェックボックス”age1~6”のプロパティ【イベント】のうち、「マウスクリック」に
   ”checkHandler”を選択する。



   <入力フォーム箇所>の最後。
   部品①Scroll PanelをPC画面の縦の長さで表示される長さにまで縮める。
 


これで<入力フォーム箇所>は終了で~~すフゥ(o´Å`)=з


 <ダイアログボックス箇所>

  続いてダイアログボックス箇所のUIを作りまっす!

  左側の部品一覧から中央へ下記の部品を配置します。

    ①Absolute Panel
        -ID    : DialogPanel
 
    ②Label ×2
        -ID    : Label1、2 (←デフォルト)
        -表示   : 任意(省略)

    ③Anchor(URL表示用)  
        -ID    : ReadAnchor
        -リンク  : URL

    ④Button ×2
        -ID      : ContinueButton / BackButton
        -テキスト  : 続けて書く / 戻る

    ⑤Anchor ×2
        -ID     : ContinueAnchor / BackAnchor
        -テキスト  : (空欄)
        -リンク    : 各URL 


   ※④のButtonと⑤のAnchorは、④の上に⑤がぴったり重なるように配置する
    (Buttonを押したと見せかけて、実はAnchorを押させるという裏ワザ(?)です^^;)
 

   以下、プロパティ設定終了後のイメージとリンクの設定箇所の例示です。



   後半かなり端折ってしまいましたが、これで保存したらば、UI構築は終了ですー。


今日はここまで


■予告編

   次回は、スクリプトの解説を載せます♪