JavaFX初识

请您先登录，才能继续操作

资讯频道 → Web前端

15顶
3踩

2008-08-06 09:59 by 见习记者 metaphy 评论(6) 有13482人浏览

JavaFX

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

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/script/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）：here

来自: metaphy.javaeye.com

分享到：

15
顶

3
踩

评论共 6 条请登录后发表评论

6 楼 summerfeel 2008-09-04 17:15

支持拖放的功能其实并不新鲜了,个人感觉图形界面用flex的MXML来写更加符合规范也更容易维护,Adobe的UI组件很好很强大,产品的成熟度上也比JavaFx领先很多,除了swing的骨灰级fans,Java在UI方面凭什么与别人竞争?

5 楼 fight_bird 2008-08-07 17:33

产品级RIA？拜托楼主提供一个产品级的AIR版本给我用，AIR还很不完善。

4 楼 geminiyellow 2008-08-07 08:24

sun~sun~sun~~

3 楼 Nighthaven 2008-08-06 15:32

引用

其次是部署体验，通过Web部署一个JavaFX程序，要用JavaWebStart下载，还会在添加删除程序里面增加一个项

这是因为现在只是预览版，jre update 10还没有发布，发布之后这些问题就不存在了。

2 楼 metaphy 2008-08-06 12:16

引用

首先开发体验，很难把美工与程序员的职责比较好的区分开来。

这个不是问题。美工按程序的要求提供素材，程序把这些东西组织起来。

部署确实不太好。嵌入网页倒是可以用applet。说鸡肋为时过早，毕竟一切还在进展中。

1 楼 qhfrose 2008-08-06 11:14

试用过，
首先开发体验，很难把美工与程序员的职责比较好的区分开来。
其次是部署体验，通过Web部署一个JavaFX程序，要用JavaWebStart下载，还会在添加删除程序里面增加一个项。貌似现在还不能很好的整合在网页里。
按现在的情况，JavaFX只是鸡肋而已。希望正式版能有所改变。

发表评论

您还没有登录,请您登录后再发表评论

15顶3踩