スポンサーサイト

-- --, --
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

解説: FileMaker 13 スライドコントロールとレイアウト切り替え

02 23, 2014
SeedCode の素晴らしい動画に感謝します。

こちらが本家の動画です。
http://youtu.be/oXQKKNCJOhw


スライドコントロールを利用して
レイアウト切り替えにアニメーションを付けています。


実は本家の Webページ ではサンプルも公開されていますが、
そちらに気付かずに作ってしまったファイルの解説です。
※本家とは若干異なる部分もあると思われます。

登場する関数:
Get ( レイアウト名 )
LayoutNames
FilterValues
Position



ポイント:
切り替えさせるためのメニューの並び順と、
レイアウトの並び順は同じにしておく。


動作の流れ:
・スライドコントロールを操作するスクリプト(ボタン等)
1.切り替え先のレイアウト名を引数から取得
2.現在のレイアウトと切り替え先のレイアウトの位置関係を比較
3.[2]の結果に応じてパネルを切り替える
4.オンタイマーをインストール

・レイアウトを切り替えるスクリプト(オンタイマー)
5.レイアウトを切り替える
6.オンタイマーをアンインストール

・入力用のパネルを表示するスクリプト(スクリプトトリガ)
7.切り替えたレイアウト上のスライドコントロールで入力用のパネルを表示する


下準備:
・ホームレイアウト
スライドコントロール(パネルは2枚)

パネル1 [MasterPanel_Center] ホーム画面のパネル
20140223_001.png

パネル2 [MasterPanel_Right] ボタン以外は白紙のパネル
20140223_002.png


・入力用レイアウト
スライドコントロール(パネルは4枚)

パネル1 [MasterPanel_Left] ボタン以外は白紙のパネル
20140223_002.png

パネル2 [MasterPanel_Home] ホーム画面のオブジェクトの一部を配置
20140223_004.png

パネル3 [MasterPanel_Center] 入力用パネル
20140223_003.png

パネル4 [MasterPanel_Right] ボタン以外は白紙のレイアウト
20140223_002.png

レイアウト切り替え用のボタン等はすべてのパネルに配置します。
ボタン設定は [MasterPanel_Center] のみ行えばOKです。

※レイアウト作成時のポイントとして、
入力レイアウトの背景色は共通にしておきましょう。(白紙など)


スクリプトの作成:
・ボタン割当とレイアウト切り替え用スクリプト(ボタン/オンタイマー)
この2つの役割は同じスクリプトに作成します。

20140223_005.png

スクリプト引数が「タイマー実行」であるか否かで処理を分けます。
※この文字列は任意の文字列で構いませんが、
レイアウト名と同じにならないように気を付けます。


切り替え先のレイアウト名(引数)をグローバル変数に設定します。

LayoutNames:
デザイン関数でレイアウト名の一覧を取得します。

FilterValues:
レイアウト名の一覧に切り替え先のレイアウト名が存在する場合、
そのレイアウト名のみが残ります。

万が一存在しないレイアウト名が指定された場合は空欄になるので、
何も処理をせずに終わります。

Get ( レイアウト名 ):
現在のレイアウト名と切り替え先のレイアウト名が同じ場合、
何も処理をせずに終わります。


20140223_006.png

スクリプトアニメーションを[オン]に切り替えて
パネル移動の際にスライドアニメーションが表示されるようにします。

現在のレイアウト名が「ホーム」の場合は、
必ずレイアウト順があとのレイアウトに切り替わるはずなので
右からパネルがスライドするように[MasterPanel_Right]に切り替えます。

移動先のレイアウト名が「ホーム」の場合は、
ホーム画面の一部が配置された[MasterPanel_Home]に切り替えます。
この場合パネルは左からスライドします。

LayoutNames, Position:
レイアウト名の一覧で現在のレイアウト名の出現位置が
切り替え先のレイアウト名より大きい場合は順番がまえのレイアウトに移動するので
左からパネルがスライドするように[MasterPanel_Left]に切り替えます。

それ以外の場合は右からスライドするように[MasterPanel_Right]に切り替えます。

最後にオンタイマーをインストールします。引数には「タイマー実行」を設定します。


20140223_007.png

スクリプト冒頭の IF で引数が「タイマー実行」だった場合の処理です。
レイアウトを切り替え、オンタイマーをアンインストールします。


20140223_008.png

・入力用のパネルを表示するスクリプト(スクリプトトリガ)
スクリプトアニメーションを[オフ]に切り替えて
パネル移動の際にスライドアニメーションが表示されないようにします。
入力用のパネル[MasterPanel_Center]を表示します。




スクリプトのボタン/スクリプトトリガ設定:
・ボタン設定
20140223_010.png
レイアウト切り替えを行うためのオブジェクトにボタン設定します。
引数は切り替え先のレイアウト名を指定します。

・スクリプトトリガ
20140223_009.png
各レイアウトの[OnLayoutEnter]にスクリプトトリガを設定します。


以上。
素晴らしいアイデアです。



LayoutNames に FilterValues でレイアウトの有無の判別や
Position の結果でレイアウトの前後関係を判定するアイデアに驚きです。


レイアウトが増えても同じスライドコントロールを配置し、
[MasterPanel_Center]をそれぞれ必要なものに変えるだけでよいのもポイントです。
Posted in FileMaker
プロフィール

まめちゃい

Author:まめちゃい
FileMaker でご飯を食べています。

最新記事
カテゴリ
おすすめ
Powered by amaprop.net
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。