您的位置: 新闻频道 Java新闻

原创新闻 JavaFX初识

2008-08-06 by 见习记者 metaphy
评论(7) 有2309人浏览 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/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

评论 共 7 条 发表评论

summerfeel 2008-09-04 17:15
支持拖放的功能其实并不新鲜了,个人感觉图形界面用flex的MXML来写更加符合规范也更容易维护,Adobe的UI组件很好很强大,产品的成熟度上也比JavaFx领先很多,除了swing的骨灰级fans,Java在UI方面凭什么与别人竞争?
fight_bird 2008-08-07 17:33
产品级RIA?拜托楼主提供一个产品级的AIR版本给我用,AIR还很不完善。
geminiyellow 2008-08-07 08:24
sun~sun~sun~~
ltian 2008-08-06 16:56
Flex 不会给它机会的
Nighthaven 2008-08-06 15:32
引用
其次是部署体验,通过Web部署一个JavaFX程序,要用JavaWebStart下载,还会在添加删除程序里面增加一个项

这是因为现在只是预览版,jre update 10还没有发布,发布之后这些问题就不存在了。
metaphy 2008-08-06 12:16
引用
首先开发体验,很难把美工与程序员的职责比较好的区分开来。

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

部署确实不太好。嵌入网页倒是可以用applet。说鸡肋为时过早,毕竟一切还在进展中。
qhfrose 2008-08-06 11:14
试用过,
首先开发体验,很难把美工与程序员的职责比较好的区分开来。
其次是部署体验,通过Web部署一个JavaFX程序,要用JavaWebStart下载,还会在添加删除程序里面增加一个项。貌似现在还不能很好的整合在网页里。
按现在的情况 ,JavaFX只是鸡肋而已。希望正式版能有所改变。

发表评论

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