PR

 今回は、前半で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 バインドした変数に代入はできない