jacksparrow

前回は、マウスポインターを動かすイベントを利用して、画像をマウスで動かす簡単なアプリケーションを作成しました。その時利用した Mouse イベントと、 bind の関係に関して、あまり詳述していなかった反省もあったので、今回はその bind と、マウスイベントにフォーカスして、執筆して行きたいと思います。

さて前回より出てきました "bind" 、一体何の為に利用するもの ｢(ﾟ～ﾟo) ? と、まだ知らない方もいるのではないかと思うので、簡単にご説明させて頂きます。

"bind" は、マウスをクリックしたり、マウスを動かしたりした時に発生したイベントと、同期する形で、画面に表示された各アイテムが持っている、表示座標や色等を格納しているエレメントの値を、変更させると言うものです。例えば前回の「その５」では、マウスポインターを動かした時のイベントに合わせて、マウスポインターから送られて行きた位置情報（横方向と縦方向）を、 ImageView の表示座標を指定する x, y に適用させると言うことをやっています。因にマウスイベントについて、私が今現在把握しているものは、以下８つになります。（これは NetBeans のパレットで確認することもできます。）

イベント名	内容
onMouseMoved	: JavaFX アプリケーションで表示しているエレメント上で、マウスポインターを動かした時に発生するイベント
onMouseEntered	: JavaFX アプリケーションで表示しているエレメントに、マウスポインターをのせた時に発生するイベント
onMouseExited	: JavaFX アプリケーションで表示しているエレメントから、マウスポインターがはずれた時に発生するイベント
onMouseClicked	: JavaFX アプリケーションで表示しているエレメントに対して、マウスクリックした時に発生するイベント
onMousePressed	: JavaFX アプリケーションで表示しているエレメントに対して、マウスの左ボタンを押している時に発生するイベント
onMouseReleased	: JavaFX アプリケーションで表示しているエレメントに対して、マウスの左ボタンを離した時に発生するイベント
onMouseDragged	: JavaFX アプリケーションで表示しているエレメントに対して、マウスドラッグした時に発生するイベント
onMouseWheelMoved	: JavaFX アプリケーションで表示しているエレメントに対して、マウスホイールを動かした時に発生するイベント

以上になります。今回は、 onMouseClicked と、 bind の２つの機能を利用して、その５を投稿した時に作成したアプリケーションを改造し、写真をクリックすると、表示している写真を切り替えるアプリケーションを作成して行きます。

まず最初に、画面からボタンをはずし、 Stage のサイズを写真サイズの 500 × 375 に合わせる形で width, height の値をそれぞれ変更します。コードは以下のとおり :
Stage {
title: "My Favor Hamburg"
width: 500
height: 397
scene: Scene {
fill: Color.BLACK
content: [
imageView
]
}
}次に、 変数 imageView の初期化値、 ImageView のネストに、パレットから onMouseClicked を、以下のスクリーンショットのように、ドラッグアンドドロップします。


展開されたコードに対して、 SwingButton のアクションで実装していたコードを追記します。追記したコードは以下のとおり :
onMouseClicked: function( e: MouseEvent ):Void {
index++;
if(index > 6) {
index = 0;
}
}次に、 image: imageList[index] としていた部分を、マウスクリックイベントによって、内容を変更する様にする為、 bind を追記します。追記したコードは以下のとおり :
image: bind imageList[index];以上で実装作業は完了です。早速動かしてみましょう。動作した結果は、以下のスクリーンキャストの通りです。



今回のアプリケーションも、例によって例のごとく、 Web 上にアップしてあります。コマンドラインからお試し頂くには以下のコマンドを、プロンプトから入力して実行してください。
javaws http://www7.atpages.jp/torutuga/javafx/OnMouseClicked.jnlpブラウザから見る場合はこちらです。

如何でしたでしょうか？　非常に簡単ですね！　皆さんも是非お試し下さい。