JavaFX Demo学习2-----ImageRollover

今天偷个懒。一个很简单的程序，响应鼠标事件，效果如下。代码在附件。

[img]/upload/attachment/48810/b5204f02-9623-3602-ae96-c3560918ab4d.png[/img]

鼠标点上会变色，其实就是换图片，Swing里面也很简单就实现了。看下代码。

public class CloseButton extends CustomNode {
    private attribute image:Image;
    private attribute images:Image[];
    public attribute onClicked:function():Void;

    init {
        images = [
            Image { url: __DIR__+"resources/close_normal.png" },
            Image { url: __DIR__+"resources/close_hover.png" },
            Image { url: __DIR__+"resources/close_pressed.png" },
        ];
        image = images[0];
    }

    public function create():Node {
        return ImageView {
            image: bind image
            onMouseEntered:  function(e:MouseEvent) { image = images[1] }
            onMouseExited:   function(e:MouseEvent) { image = images[0] }
            onMousePressed:  function(e:MouseEvent) { image = images[2] }
            onMouseReleased: function(e:MouseEvent) { 
                image = images[0];
                if(onClicked != null) {
                    onClicked();
                }
            }
        }
    }

}

Frame {
    visible: true
    stage: Stage {
        content: CloseButton { 
        }
    }
}

Frame里面显示CloseButton这个继承了CustomNode的Node，CloseButton里面重写create方法。很简单，当作前一个例子的复习。

在CloseButton里面，定义了三个属性，一个Image类型，一个Image数组类型，一个则是个没有返回值的方法。
接着是一个init{...},这个东东前一个程序也出现了，好像没解释，不过应该能猜出来，相当于java里的构造方法。写个测试例子看看。

package imagerollover;

import java.lang.System;

/**
 * @author Ivan
 */

public class TestInit {
    init{
        System.out.println("Hello");
    }
}

TestInit{}

运行试试，会打印出Hello。这就证明了init{}是相当于java里构造方法的东东。另外也证实了，javaFX里面实例化对象的方法是类名后面加个{}。还有一个注意的，不过也没什么，就是javaFX里面，不会自动的导入java.lang.*这个包，所以，你要使用System这个类的话，就要先导入java.lang.*这个包。

初始化完之后，返回了一个ImageView，之前是返回一个Group，里面包含了n个Node的子类，这里只返回一个，这里又用到了bind，具体机制还不清楚，只要知道，使用了bind，当一个值改变后，另一个值也会随之变化。可以试试看，把bind去掉后，会有什么区别。

在这里也出现了__DIR__,观察下目录结构，发现，此符号应该就是代表此类所在的位置了。

接着是四个鼠标事件。和Swing很类似，鼠标移入，移出，按下，释放，分别触动什么方法。
在鼠标释放的方法中，判断onClicked方法是否为空，不为空则执行，这里为空，所以不执行，可以自己加一个打印代码，测试一下 :)

只要在init里面加上

onClicked = function(){
            System.out.println("Clicked");
        };

就行了。记得导入java.lang.System :D