今回は、前半でJavaFXに特有な機能である、バインドとトリガーについて紹介します。後半では、JavaFX Composerを用いてエフェクトについて解説します。

　エフェクトは影を付けるなど、ノードの見た目を変化させる機能です。JavaFX Composerを使えば、エフェクトも簡単に設定できます。

バインド

　GUIアプリケーションの構造としてよく知られているのが、モデル-ビュー-コントローラ(MVC) 構造です。

　MVC構造はビューとモデルを分離することにより、ビューを可換にすることが可能になるなど、さまざまな特徴を持ちます。

　MVC構造では、モデルに保持するデータが更新された場合、ビューにその更新を通知する必要があります。ここでよく使用されるのが、デザインパターンのオブザーバーパターンです。

　しかし、オブザーバーパターンを用いるとしても、ビューをモデルに同期させる処理を記述する必要があります。そして、モデルが複雑になってくると、この同期のための記述がどんどん増えていってしまいます。

　この記述はビジネスロジックや、ビューの構成には直接関わりのない部分なので、できれば記述量は最小限に抑えておきたいところです。

　そこで、登場するのが、モデルとビューの同期を自動で行なうことのできるバインドです。

　バインドを用いることで、変数を他の変数に同期させることができます。すなわち、モデルのデータが変更したら、その変更が自動的にビューに反映させるということが可能になるのです。

　バインドを行なうには、変数の定義時にバインドを行なうことを明示するだけです。 

var x = 10;
var y = bind x; // yをxにバインドさせる
 
println("x = {x} y = {y}");
 
x = 20; // 同時にyも変更される
 
println("x = {x} y = {y}");

　変数の定義時にバインドするには、bindキーワードと同期させたい変数を記述します。上記のスクリプトでは、2行目で変数yを変数xにバインドしています。

　バインドした変数は、バインド元の変数が更新されたら、自動的に更新されます。上記のスクリプトでは変数xに20が代入された時点で、変数yも自動的に20に更新します。

　スクリプトを実行すると次のようになります。 

x = 10 y = 10
x = 20 y = 20

　このように、変数yを更新する記述を書かなくても、バインドを使うことで自動的に更新します。

　一度、バインドした変数は、バインドを解除することはできません。したがって、次のスクリプトはコンパイルエラーになります。 

var x = 10;
var y = bind x; // yをxにバインドさせる
 
y = 20; // NG バインドした変数に代入はできない