JavaFX初识

Sun确实反应太慢，在Adobe Flash平台已经可以开发产品级RIA应用的时候，它给出的road map还是慢慢腾腾：

2008年7月，Sun将开放JavaFX Desktop SDK
2008秋，JavaFX Desktop 1.0 发布
2009春，JavaFX Mobile and TV 1.0发布

也就是说，截至今天，1.0依然在按计划进行中，我们体验的只是Preview版本（Sun也不建议用这个版本进行产品开发）,似乎让人灰心，但没关系，相信Sun可以后来居上，譬如NetBeans之于Eclipse（当然它们至今仍未分高下）。从上面也可以看出，JavaFX Desktop和JavaFX Mobile and TV 都会发布，似乎又回到了1995年时候的Sun目标。

OK,先让我们来看一下JavaFX到底是什么。
JavaFX Preview SDK 是JavaFX platform的体验版本。这一版本是定位于web脚本开发人员和那些想事先体验JavaFX技术和工具的家伙。这一SDK同样包含"Nile Project"，这是一套工具和插件，能让脚本开发人员用拖放的方式建立图形化的东西。运行JavaFX Application需要：
1.Java SDK 1.6 Update 7或更新，最好是Update 10
2.JavaFX Preview SDK （上面说了，JavaFX SDK 1.0还在娘胎中），请下载Netbeans IDE 6.1 with JavaFX： http://javafx.com/htdocs/downloadpage.html


而开发JavaFX，则需要写JavaFX Script，这是一种新的脚本语言，旨在方便高效地创建图形界面及绑定数据，而这个所谓的图形界面，最终调到的是swing，但需要注意：
1.JavaFX能提供Swing所没有的一些Widgets
2.对Swing组件的的操作，使用JavaFX Script可能有所限制，也即是说，Swing里面对图形界面元素控制的一些方法或属性，在Java FX里面可能不存在。
下面是用JavaFX开发的一个Clock，其实Swing也完全可以做到：


JavaFX Script看上去：

package myclockproject;

import javafx.application.Frame;
import javafx.application.Stage;
import javafx.scene.CustomNode;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.geometry.Circle;
import javafx.scene.paint.Color;
import javafx.scene.geometry.*;
import javafx.scene.text.Text;
import javafx.scene.Font;
import javafx.scene.FontStyle;
import javafx.scene.transform.Translate;
import javafx.scene.transform.Rotate;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;

import java.util.Date; 
import java.lang.Math;
import javafx.animation.Timeline;
import javafx.animation.KeyFrame;
import javafx.ext.swing.Button;

Frame {
    title : "Java FX Clock Application"
    width : 295
    height: 325
    closeAction : function (){
        java.lang.System.exit(0) ;
    }
    visible: true
    stage: Stage {         
        content: Clock{}
    } 
}

public class Clock extends CustomNode {
    public attribute radius : Number = 77;
    public attribute centerX : Number = 144;
    public attribute centerY : Number = 144;
    public attribute hours:Number;
    public attribute minutes:Number;
    public attribute seconds:Number;

    public function nextTick () {  
        var now = new Date();
        seconds = now.getSeconds();
        minutes = now.getMinutes();
        hours = now.getHours();
    } 
    
    public function create(): Node {
        return Group {
            content:[ 
                ImageView {
                    image: Image {
                        url: "{__DIR__}/clock_background.png"
                    }
                },
 
                Group{
                    transform: Translate { x: centerX, y: centerY }
                    content: [                        
                // code to display the numbers for every third hour 
                        for (i in [3, 6, 9, 12])
                        Text { 
                            transform: Translate { x : -5, y : 5 }        
                            font: Font {size: 16 style: FontStyle.BOLD }
                            x: radius * (( i + 0 ) mod 2 * ( 2 - i / 3)) 
                            y: radius * (( i + 1 ) mod 2 * ( 3 - i / 3)) 
                            content: "{i}"    
                        },

                //code to display a circle for the rest of the hours on the clock    
                        for (i in [1..12]) 
                        if (i mod 3 != 0 ) then Circle {       
                            transform:Rotate { angle: 30 * i }        
                            centerX: radius
                            radius: 3        
                            fill: Color.BLACK
                        } else [ ],
                        Circle { 
                            radius: 5
                            fill: Color.DARKRED
                        },
                //code for the smaller center circle
                        Circle {
                            radius: 3
                            fill: Color.DARKRED
                        },
                        //code for the seconds hand
                        Line {
                            transform: Rotate { angle: bind seconds * 6 }
                            endY: -radius - 3
                            strokeWidth: 2
                            stroke: Color.RED
                        },
                        //code for the hour hand
                        Path {
                        //for the hour hands
                            transform: Rotate { angle: bind (hours + minutes / 60) * 30 - 90 }
                            fill: Color.BLACK
                            elements: [
                                MoveTo {x: 4, y: 4},
                                ArcTo {x: 4 y: -4 radiusX: 1 radiusY: 1},
                                LineTo{ x: radius - 15  y: 0},
                            ]
                        },
                        // code for the minutes hand
                        Path {
                            //for the minutes hand
                            transform: Rotate { angle: bind minutes * 6 - 90 }
                            fill: Color.BLACK
                            elements: [
                                MoveTo {x: 4, y: 4},
                                ArcTo {x: 4 y: -4 radiusX: 1 radiusY: 1},
                                LineTo{ x: radius  y: 0},
                            ]
                        }]}
            ]
        };
    }
    
    init {
        var timeline = Timeline {
            repeatCount: Timeline.INDEFINITE
            keyFrames : [
                KeyFrame {
                    time : 1s
                    action: function() {
                        nextTick();
                    }
                }
            ]
        }
        timeline.start();
        
    }
}

JavaFX Script还是比较简单的。它与Java的差距，比JavaScript与Java的差距，个人感觉小的多。

如何发布JavaFX应用呢？JavaFX内容可以通过Java Web Start发布为应用程序（这将最终运行在用户的Desktop上面），或者发布为Applets作为Java的Plug-In;无论哪种方式，都需要有一个JavaFX runtime.

参考：
Sun：
http://www.sun.com/software/javafx/index.jsp
Sun为Java FX专题建立的网站，网站本身也是Java FX技术的一个演示。
http://javafx.com/
InfoQ:
http://www.infoq.com/news/2008/01/javafx-chet-haase
JavaFX Script：
http://www.sun.com/software/javafx/script/index.jsp

Clock工程src下载（程序和资源来源于Sun）：

评论

1 楼 skzr.org 2008-10-11  

呵呵，Netbean和Eclipse不相上下，我觉得差远了！

对于FX我更加看好Flex，除非jvm大小只有10M，不过我关注的不是做网站，是行业系统，所以觉得Eclipse比FX和Flex更好的选择，除非adobe真正本着开源我就会选择它！
曾经打算使用flex发现相关的配套的都他妈的要授权，对于企业和开发商，这就麻烦了。。。