原文地址:http://download.oracle.com/javafx/2.0/get_started/jfxpub-get_started.htm
如果你想使用 JavaFX 快速创建拥有富客户体验的应用程序,那么这个文章正是为你准备的。你将学习如何建立像图 1 那样简单的应用,并学习使用很少的代码达到复杂图形效果是多么地容易。当然, JavaFX 并不只是能绘制图形而已,完成这个教程以后,你可以通过 JavaFX 范例看看你所能创建的应用程序的范围有多广。
如果你熟悉JavaFX场景(Scene)编程模型,那么这个应用程序的代码是很容易理解的。舞台(Stage)是应用的顶层容器,场景则是负责绘制应用的外观。场景中的内容是以一棵树来组织结构的。
图2展示了ColorfulCircles应用的场景结构。枝干上的节点(Node)都是Group类的实例,而叶子节点则是Rectangle和Circle类的实例。
建立应用
你可以使用任何支持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,添加Jar和javadoc同eclipse。在项目库中添加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意思是对于圆形的的外边加上StrokeWidth为4的边框。笔刷的颜色是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循环为每个圆形都创建两个关键帧,第一关键帧在秒使用translateXProperty和translateYProperty创建一个在窗口内部的随机位置。第二关键帧在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了,下面这些建议可以让你知晓下一步该如何做:
Swing是典型的学院派产物,架构优美,UI功能强大, 但是学习曲线陡峭,性能很容易出问题.
屠龙之术啊屠龙之术
这种屠龙术,从来都是没有实用过,永远的新版本,永远的不可用
浪费太多人的精力了
简单才是真理
引用来自“浪客Dandy”的答案
Java的UI很强啊,很多编辑器不就是Java写的么,Java,PHP领域的知名IDE,如eclipse,zendstudio,phpstorm,idea,netbeans。。还有很多ERP。。
一句话,只有想不到,没有做不到