バインドのサンプル

このエントリーは JavaFX Advent Calendar の 18 日目のエントリーです。

昨日は @rewtheblow さんの JavaFXによる既存アプリケーションGUIのリファイン（志半ば・・） です。

明日は @yumix_h さんです。

さて、みなさまご存知のとおり、櫻庭は ITpro で Java 技術最前線 という連載を持っており、現在は「JavaFX 2で始めるGUI開発」と題して JavaFX について書いています。

そして、来月のはプロパティとバインドの解説を行う予定です。

そのために、いくつかサンプルを作ったのですが、分量の関係で載せられなかったサンプルがあります。それをここで公開しちゃいます。

どういうサンプルかというと、結び付けられたボールのサンプルです。

ボールはドラッグできるようになっていて、ボールの間のコネクションの両端はボールの中心にバインドしてあります。すると、ボールをドラッグしても、コネクションがゴムのように伸び縮みします。

ボールをドラッグするようにするには、まずマウスボタンが押されたときにその場所を覚えておきます。そして、ドラッグのイベントで現在のマウスの位置と覚えておいた位置からボールの位置を設定します。

これでドラッグできます。

class Ball extends Circle {
    private double dragBaseX;
    private double dragBaseY;
 
    public Ball(double centerX, double centerY, double radius) {
        super(centerX, centerY, radius);
 
        setOnMousePressed(new EventHandler<MouseEvent>() {
            @Override
            public void handle(MouseEvent event) {
                dragBaseX = event.getSceneX() - getCenterX();
                dragBaseY = event.getSceneY() - getCenterY();
            }
        });
 
        setOnMouseDragged(new EventHandler<MouseEvent>() {
            @Override
            public void handle(MouseEvent event) {
                setCenterX(event.getSceneX() - dragBaseX);
                setCenterY(event.getSceneY() - dragBaseY);
            }
        });
    }
} 

次にコネクションですが、こちらはとても単純でボールの中心位置にバインドするだけです。

class Connection extends Line {
    public Connection(Ball startBall, Ball endBall) {
        startXProperty().bind(startBall.centerXProperty());
        startYProperty().bind(startBall.centerYProperty());        
        endXProperty().bind(endBall.centerXProperty());
        endYProperty().bind(endBall.centerYProperty());        
    }
}

これだけで結び付けられたボールが実現できます。
この原理を使うとお絵かきソフトなどで、ラインを他の要素にバインドさせることなどができるようになると思います。