开始学习JavaFX (译)

Jeky 发布于 2011/10/10 20:54
阅读 6K+
收藏 6

原文地址:http://download.oracle.com/javafx/2.0/get_started/jfxpub-get_started.htm

如果你想使用  JavaFX  快速创建拥有富客户体验的应用程序,那么这个文章正是为你准备的。你将学习如何建立像图  1  那样简单的应用,并学习使用很少的代码达到复杂图形效果是多么地容易。当然,  JavaFX  并不只是能绘制图形而已,完成这个教程以后,你可以通过  JavaFX  范例看看你所能创建的应用程序的范围有多广。


如果你熟悉JavaFX场景(Scene)编程模型,那么这个应用程序的代码是很容易理解的。舞台(Stage)是应用的顶层容器,场景则是负责绘制应用的外观。场景中的内容是以一棵树来组织结构的。

2展示了ColorfulCircles应用的场景结构。枝干上的节点(Node)都是Group类的实例,而叶子节点则是RectangleCircle类的实例。


建立应用

你可以使用任何支持Java的开发工具来开发JavaFX应用。这个教程所使用的是NetBeans。开始之前,确定你的NetBeans IDE的版本支持JavaFX 2.0。你可以在系统需求文档中找到更多的细节。

按着以下顺序在NetBeans中建立你的JavaFX项目:

1.        打开文件菜单,选择新建项目

2.        JavaFX类别下,选择JavaFX应用程序。单击下一步

3.        将项目命名为ColorfulCircles并单击完成

4.        打开ColorfulCircles.java文件,将import声明粘贴入你的项目,覆盖NetBeans自动生成的声明。或者你可以使用NetBeans中的自动完成或者import修复来完成import声明。当需要选择import声明时,选择以javafx开头的。

//以下为原创部分------------------

Eclipse 

         Windows -> Preference ->Java -> Build Path -> User Library。新建一个库为JavaFX,将添加Jar<JavaFX SDK>\rt\lib\jfxrt.jar,添加Javadoc<JavaFX SDK>\docs\api。在项目的BuildPath中添加JavaFX库就可以了。

Netbeans 7.1以下:

工具 ->  -> 新建库。名称为JavaFX,添加Jarjavadoceclipse。在项目库中添加JavaFX即可。

//以上为原创部分-------------------------

创建应用基础

1展示了想要运行一个JavaFX应用程序,最少的代码是如何写的:

Example 1 Basic Application

 

public class ColorfulCircles extends Application {

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) {

        primaryStage.show();
    }
}

ColorfulCircles类扩展了Application类并包含两个方法。第一个方法是主方法main(),在主方法中调用了launch()方法。作为JavaFX的最佳实践,在main()方法中最好只调用launch()

然后,ColorfulCircles类覆盖了抽象方法start()start()方法的传入参数是应用最初的stage。最后一行使stage显示出来。

在这个教程的每一步,你都可以编译并运行这个应用,看看结果是怎样的。如果有什么问题,可看ColorfulCircles.java中的代码。

添加场景

现在,按着例2,添加三行用来设置场景的代码。在代码中有两个最佳实践:1、为场景设置一个root节点;2、为场景设置大小,这里设置为800x600

Example 2 Scene

@Override
public void start(Stage primarystage) {
    Group root = new Group();
    Scene scene = new Scene(root, 800, 600, Color.BLACK);
    primaryStage.setScene(scene);

    primaryStage.show();
}

3显示了到目前为止应用的情况:


添加图形

下面,向场景中添加30个圆形,这些代码应放在primaryStage.show()的前面:

Example 3 30 Circles

Group circles = new Group();

for (int i = 0; i < 30; i++) {
   Circle circle = new Circle(150, Color.web("white", 0.05));

   circle.setStrokeType(StrokeType.OUTSIDE);
   circle.setStroke(Color.web("white", 0.16));
   circle.setStrokeWidth(4);
   circles.getChildren().add(circle);
}

root.getChildren().add(circles);

以上的代码建立了一个名叫circles的组(Group),然后使用for循环向组中添加了30个圆形。每个圆形的半径为150,使用白色填充,透明度是5%,这意味着他们都是几乎透明的。

为了给圆形加上边框,这里代码加入了StrokeType类。笔刷:OUTSIDE意思是对于圆形的的外边加上StrokeWidth4的边框。笔刷的颜色是white,透明度16%,使得他看起来比圆更加亮一点。

4展示了现在应用的情况。因为代码并没有指定每个圆的位置,所以所有的圆形都重叠在左上角。重叠后透明的效果使得圆看起来像是灰色的。


添加视觉效果

4向圆形添加视觉效果,注意primaryStage.show()应放在最后:

Example 4 Box Blur Effect

circles.setEffect(new BoxBlur(10, 10, 3));

这里添加了一个长宽都是10,模糊迭代是3的模糊,效果很接近高斯模糊。这种模糊技术使圆的边界有了平滑的效果,如图5所示。


创建渐变背景

现在使用例5中的代码创建矩形,并对其进行线性渐变填充。

将以下代码加在root.getChildren().add(circles),这样创建出来的矩形会在圆形后面。

Example 5 Linear Gradient

Rectangle colors = new Rectangle(scene.getWidth(), scene.getHeight(),
    new LinearGradient(0f, 1f, 1f, 0f, true, CycleMethod.NO_CYCLE, new
        Stop[]{
           new Stop(0, Color.web("#f8bd55")),
           new Stop(0.14, Color.web("#c0fe56")),
           new Stop(0.28, Color.web("#5dfbc1")),
           new Stop(0.43, Color.web("#64c2f8")),
           new Stop(0.57, Color.web("#be4af7")),
           new Stop(0.71, Color.web("#ed5fc2")),
           new Stop(0.85, Color.web("#ef504c")),
           new Stop(1, Color.web("#f2660f")),}));

root.getChildren().add(colors);

这段代码创建了一个叫做colors的矩形。这个矩形与scene的长宽相同,并使用从左下角(0,0)到右上角(1,1)的线性填充。第五个参数为true意味着填充是与矩形成正比的,第六个参数NO_CYCLE标志着颜色循环不会重复。Stop数据指出了在某些特定位置填充的颜色。最后一行则是将colors矩形加入root节点。

原来灰色的圆形现在会变得像彩虹一般,如图6


7显示了当前场景中的结构,现在circles组和colors矩形都是root节点的孩子结点。


应用混合模式

现在使用重叠混合效果(overlay blend effect)来为圆形添加颜色。这需要一些家政技巧(冷笑话.....意思是说你需要对于代码进行比较大型的整理)你需要将circles组和线性填充过的矩形从场景移动到新的重叠混合组里去。

1.        将以下两行移除:

root.getChildren().add(colors);
root.getChildren().add(circles);

2.        在移除的地方添加例6中的代码。

Example 6 Blend Mode

Group blendModeGroup =
   new Group(new Group(new Rectangle(scene.getWidth(), scene.getHeight(),
       Color.BLACK), circles), colors);
colors.setBlendMode(BlendMode.OVERLAY);

root.getChildren().add(blendModeGroup);

blendModeGroup组建立了重叠的结构。他的两个孩子一个是包含黑色矩形和circles组的匿名组,另一个则是colors矩形。

setBlendMode()方法为colors矩形设置了重叠混合。最后一行使将这个组作为孩子节点加入root节点。

重叠混合是一个在图形应用程序中非常常见的效果。他可以根据混合的颜色使图像变暗或变亮。在这里,线性填充矩形被作为底层,黑色的矩形使背景保持黑色,而透明的圆形将线性填充矩形的颜色显现出来,如图8


加入动画

最后一步是使用JavaFX动画来使圆形动起来:

1.        import static java.lang.Math.random加入import列表中。

2.        primaryStage.show()的前面加入例7的动画代码:

 Example 7 Animation

Timeline timeline = new Timeline();
for (Node circle: circles.getChildren()) {
   timeline.getKeyFrames().addAll(
       new KeyFrame(Duration.ZERO, // set start position at 0
           new KeyValue(circle.translateXProperty(), random() * 800),
           new KeyValue(circle.translateYProperty(), random() * 600)
       ),
       new KeyFrame(new Duration(40000), // set end position at 40s
           new KeyValue(circle.translateXProperty(), random() * 800),
           new KeyValue(circle.translateYProperty(), random() * 600)
       )
   );
}
// play 40s of animation
timeline.play();

动画师通过时间线(timeline)驱动的,这段代码创建了一个时间线,并使用for循环为每个圆形都创建两个关键帧,第一关键帧在秒使用translateXPropertytranslateYProperty创建一个在窗口内部的随机位置。第二关键帧在40秒后做同样的事情。这样,当时间线开始运行时,动画在40秒内就显示所有的圆形都从一个随机位置移动到另一个随机位置。

9显示了运动时的情况,完整代码参见ColorfulCircles.java


回顾

下面是一些关于JavaFX应用的总结:

l  主类应继承Application

l  主类应覆盖start()方法

l  start()方法的参数是应用的原始舞台(Stage

l  main()方法应该调用launch()方法,并且最好只调用launch()方法

l  场景要添加一个root节点,可以是本教程中的Group节点,也可是其他祖先节点如layout pane

l  当你创建场景时最好为其设定长宽。否则场景默认为能够显示其内容的最小尺寸

l  root节点添加孩子结点:root.getChildren().add(circles);

l  show()方法使舞台显示出来,最好将其放在最后。

l  JavaFX提供各种错综复杂的图形效果,如模糊,填充,混合和动画。

下面该看什么

现在你已经熟悉了JavaFX了,下面这些建议可以让你知晓下一步该如何做:

l  尝试JavaFX范例,尤其是Ensemble应用

l  阅读其他JavaFX文档,包括场景的细节,视觉效果和动画

加载中
0
浪客Dandy
浪客Dandy
说真的 java的ui能力 真是~~
0
一号男嘉宾
一号男嘉宾
java的ui,没有做不到,只有想不到。SWING如此,javaFX也是如此
0
CheckStyle
CheckStyle

Swing是典型的学院派产物,架构优美,UI功能强大, 但是学习曲线陡峭,性能很容易出问题.

屠龙之术啊屠龙之术

 

0
幽灵
幽灵
这教程不错哦。
0
宏哥
宏哥

这种屠龙术,从来都是没有实用过,永远的新版本,永远的不可用

浪费太多人的精力了

简单才是真理

0
南湖船老大
南湖船老大

引用来自“浪客Dandy”的答案

说真的 java的ui能力 真是~~

Java的UI很强啊,很多编辑器不就是Java写的么,Java,PHP领域的知名IDE,如eclipse,zendstudio,phpstorm,idea,netbeans。。还有很多ERP。。

一句话,只有想不到,没有做不到

返回顶部
顶部