ここ2週間ほど、GUIビルダーを使って基礎的なUIを作ってきました。
今日は、この2週間でお勉強したことを組み合わせて、少しだけ応用的な
UIを作ってみようと思います。（応用的、と言うほどでもないですが・・・）
具体的には、次のようなUIを作ります♪
ボタン押下でダイアログボックス表示。
ダイアログボックス内にメッセージと次の動作をするボタン２つ配置。
①ダイアログボックスを閉じる
②特定のページへのリンクを現在のタブで開く
さぁ、やるぞー。
■参照元
今回は、過去の自分の投稿を参考にしています。
詳細にご興味のある方は、以下の投稿をご覧ください。
☆ 【GUIビルダー】Googleサイト上にボタン・メッセージ表示（１）～（３）
☆ 【GUIビルダー】ダイアログボックス表示（１）～（２）
☆ 【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ビルダーを使っての作業は終了。
任意の名前で「保存」します。
また長くなりそうなので、今日はここまで。
■予告編
明日は、今日の続きです。
0 件のコメント:
コメントを投稿