JavaFx入门教程

什么是JavaFX？SUN（太阳公司）在2007年春天发布了一个叫JavaFX新框架。这是一个泛泛的名字，因为JavaFX主要包含Script and Mobile两个组件，在将来SUN将开发更多的组件。      JavaFX 的核心是 JavaFX 脚本，是一个声明式脚本语言。尽管同Java代码非常不同，但是同Java类具有很高的交互度。 JavaFX 中的很多类主要为了更容易实现Swing和Java2D而设计的。使用 JavaFX 脚本，您能很容易的为文本和图形开发GUI接口、动画和非常COOL的效果。并且，您能将Java和HTML代码包装到 JavaFX 脚本中。     第二个组件- JavaFX Mobile，是为移动设备开发Java应用的平台。它最终会成为开发 JavaFX 脚本的平台但是现在同这篇文章实用的技术还很不兼容。

JavaFX 应用的一些例子

 

    在开始学习一门新的语言前，让我们先看一下JavaFX代码的一些例子。JavaFX 官方站点具有大量的JavaFX 实例。请点击JavaFX Script 2D Graphics Tutorial下载该实例. 下载完成以后，双击tutorial.jnlp 文件即可运行。几秒过后，你应该能够看到如图一的JavaFX实例运行场景（若没有出现该图片，你必须为.jnlp扩展名重新配置Java Web Start）。 

图一、运行 tutorial.jnlp tutorial

    花些时间看一看这些例子和源代码。仅仅使用有限的几行JavaFX代码就能得到很多有趣的效果。如果你对于JavaFX的应用还是感到摸不着头脑，看一看下面的两个demo。它们是StudioMoto 和 Tesla Motors 站点的部分重新实现。您可以从OpenJFX 项目站点下载OpenJFX 脚本Studiomoto Demo 和 Tesla Demo。它们需要Java Web Start 才能运行，但是也取决于你的机器配置它们可能自动运行，或者你必须找到和运行已经下载的.jnlp文件。

下载安装JavaFX

  如果你对于学习开发JavaFX应用程序，您应该了解至少使用JavaFX三个方法。同时了解JavaFX应用程序不是基于浏览器的也很重要。最简单最快捷的方法是基于叫JavaFXPad轻量级的工具。使用该工具的主要优势是你总能立即看到你在编辑器里所作更改的效果。你能从JavaFX项目网站下载到该工具（ JavaFXPad ）。并且运行它需要Java Web Start （如图二）。

 
图二、运行JavaFXPad编辑器

     使用JavaFX的另一种方式是使用JavaFX脚本NetBeans 5.5插件或者Eclipse 3.2插件（需要下载和安装NetBeans 5.5 或者 Eclipse 3.2.2 以上集成开发工具 ）。若您已经使用 NetBeans 5.5开始你的JavaFX之旅,OpenJFX项目网站的对于NetBean开发JavaFX的说明将会给予你帮助。 相似的如果您使用基于Eclipse的JavaFX插件，您可以去JavaFX的Eclipse插件。注意这篇文章中的所有例子已经在NetBeans5.5的JavaFX插件中测试过，但是应该能够使用其他方法运行。

使用NetBeans 5.5下的JavaFX插件开发Hello World 程序

每当开始学习一门新的语言时，我们必定要写Hello World 小程序：

源码列表1

import javafx.ui.*;

import java.lang.System;

Frame {

centerOnScreen: true

visible: true

height: 50

width: 350

title: "HelloWorld application..."

background: yellow

onClose: operation() {System.exit(0);}

content: Label {

text: "Hello World"

}

}

在NetBeans5.5开发和运行这个小程序步骤如下:

1.                   启动NetBeans 5.5.

2.                   从主菜单选择File -> New Project.

3.                   在新项目窗口,选择目录常规目录和 Java 应用项目(点击下一步).

4.                   在新的Java应用程序窗口,在项目名文本框敲入 "FXExample".

5.                   在相同窗口，用浏览按钮选择项目的目录.

6.                   取消 "Set as main project" 和 "Create main class" 复选框 (点击完成).

7.                   右击FXExample -> Source Packages 和选择 New -> File/Folder.

8.                   在新的文件窗口，选择另一个目录和JavaFX文件类型（点击下一步）.

9.                   在新的JavaFX文件窗口，敲入"HelloWorld" 作为文件名和"src"作为目录(点击完成).

10.               拷贝源码列表1到 HelloWorld.fx.

11.               右击FXExample 项目选择项目属性.

12.               在项目FXExample属性对话框 ,选择从目录面板运行节点.

13.               在参数文本框敲入 "Hello World" (点击完成).

14.               右击FXExample 项目选择运行项目选项.

如果一切良好,你应该看到一个窗体如图三：

 

图三、 在NetBeans 5.5中运行 Hello World 应用程序

现在你拥有了开发和运行任何JavaFX应用程序的IDE软件支持.

JavaFX 语法

    在正式开始学习JavaFX，让我们浏览一遍该语言的语法要点。如果你非常熟悉Java语言，这些语法的大多数会让你感到非常熟悉，但是有一些会相当不一样。

JavaFX 原始类型

    JavaFX 支持原始类型：String (对应于 java.lang.String), Boolean (对应于 java.lang.Boolean), Number (对应于 java.lang.Number) 和 Integer (对应于 byte,short,int,long,BigInteger).

JavaFX 变量

一个JavaFX变量使用var关键字声明。看下面的例子：

var x:Number = 0.9;

var name:String = "John";

var y:Integer = 0;

var flag:Boolean = true;

var numbers:Number = [1,2,3,4,5]；

JavaFX 操作符

众所周知的Java操作符&&, || 和 ! 在JavaFX中采用下面的形式：

·                     Java: && JavaFX: and
·                     Java: ||  JavaFX: or

·                     Java: !    JavaFX: not

JavaFX 方法

JavaFX 支持这些方法. 具有参数、变量声明和返回值的方法举例：

function taxes(x) { var t:Number = (19.0/100.0)*x; return t; }

JavaFX if 语句

在JavaFX中，你你能通过使用if语句使用条件判断。

if (条件) { //动作 } else if (条件) { //动作 } else { //动作 }

JavaFX while 语句

这个 while 语句同在Java中的while语句相似。 while (条件) { //动作}

JavaFX for 语句

for 语句用于循环和间隔（间隔使用方括号[]和 .. 符号表示).

//i 将取值： 0, 1, 2, 3, 4, 5象在 (i in [0..5]) { //伴随 i的动作 }代码块中

JavaFX 过程

JavaFX 过程以operation 关键字为标志。一个简单的例子：

operation startClock() {do{ while(true) {

if(seconds>=360) {seconds = 0; seconds = [0,6..360] dur 60000 linear;}

if(minutes>=360) {minutes = 0; minutes = [0,6..360] dur 3600000 linear;}

if(hours>=360) {hours = 0; hours = [0,6..360] dur 43200000 linear;} } }}

JavaFX 类

   JavaFX 类使用class关键字. 一个 JavaFX 类能够使用extends 关键字继承多个类使用逗号分割这些类的名字。在花括号中间你可以放属性、方法和过程，例如下面的例子：

class Order {

attribute order_nr: String;

attribute ordertype: Order inverse Order.products;

attribute products: Order* inverse Order.ordertype;

function getOrderNr(): String;

operation addOrder(order: Order);

}

    注意属性使用attribute关键字声明，方法体和过程不在类体中，它们单元定义在类声明以后，在下文你很快就能看到。 inverse 子句是一个可选项 ，它表示一种同在类中另一个属性的双向关系。在这个案例中JavaFX将自动完成更新（插入、替代和删除）你能在Java.net上找到更完整的文档。

熟悉JavaFX

    在本小节，您将会看到一系列的小例子，这些例子覆盖JavaFX的各种特性和功能。主要目的是让你熟悉JavaFX代码和JavaFX应用程序的逻辑。第二个目标是当你需要开发仅仅需要几行代码就会有非常酷的GUI，动画和好的效果时候使你确信JavaFX值得好好研究一下。所有列出的例子将介绍关于JavaFX的技巧。每一个例子只使用很少的描述处理，所以不要想找到大量的注释。所有这些可访问的例子你都是你自己就能运行的，所以让我们开始吧。当我们需要使用System.out.println 打印属性值时候，你可以把它的名字放进含有引用的字符串，象源码列表2中所示的那样。

源码列表2

//带有应用文本的表达式

import java.lang.System;
var mynumber:Number = 10;
System.out.println("数字是: {mynumber}");

结果: 数字是: 10
JavaFX 支持变量的计数这样一个有用的功能。这个功能利用下面的三个操作符实现：

·                     ?: 可选的(可能为 null)

·                     +: 1或多个

·                     *: 0或多个

源码列表3

//变量计数

import java.lang.System;
var mynumbers:Number* = [1,2,7];
System.out.println("数字是: {mynumbers}");

结果: 数字是: 1 2 7
   在JavaFX中, 在声明部分不指定变量的类型是可能的。 这不会产生错误，因为JavaFX 将在该变量的使用中自动发现它的类型。

源码列表 4

//变量类型是可选的

import java.lang.System;
var days = ["Monday,","Friday,","Sunday"];
System.out.println("你必须工作: {days}");

结果: 你必须工作: Monday, Friday, Sunday
你可以使用sizeof 操作符得到一个数组的大小：

源码列表 5

//得到一个数组的大小

import java.lang.System;
var lotto = [21,30,11,40,5,6];
System.out.println("数组大小:{sizeof lotto}");

结果: 数组大小: 6

您能使用 [] 操作符得到满足指定条件的子数组。条件放在 [] 中作为布尔判断 。这个与XPath 谓词相似.

源码列表 6

//使用[] 操作符 -与 XPath相似

import java.lang.System;
var mynumbers = [1,2,7,3,30,15,14,6,4];
var numbers = mynumbers[n|n < 10];
System.out.println("小于10的数字为: {numbers}");

结果: 小于10的数字为: 1 2 7 3 6 4
你可以使用indexof 操作符得到指定序数位置的数组中一个元素：

源码列表 7

//返回指定序数位置的数组中的元素

import java.lang.System;

var mynumbers = [1,2,7,3,30,15,14,6,4];
var number_four = mynumbers[indexof . == 4];
System.out.println("数字4:{number_four}");

结果: 数字4: 30

当您想要向一个数组中插入一个元素时，你可以使用下列 insert 语句中的一个:

·                     as first: 在第一个位置插入

·                     as last:在最后一个位置(默认)插入

·                     before: 在前一个位置插入

·                     after:在下一个位置插入

你可以使用 delete 语句从一个数组中删除一个元素.

源码列表8

//插入和删除语句
import java.lang.System;
var mynumbers = [1,2,7];
System.out.println("Before inserting anything: {mynumbers}");
insert 10 into mynumbers;
System.out.println("After inserting at the end the /"10/" value:{mynumbers}");
insert [8,6,90] as first into mynumbers;
System.out.println("After inserting at the first positions the /"8,6,90/" values:{mynumbers}");
insert 122 as last into mynumbers;
System.out.println("After inserting at the end the /"122/" value:{mynumbers}");
insert 78 before mynumbers[3];
insert 11 after mynumbers[3];
System.out.println("After inserting the /"78/" and /"11/" values before/after the 3rd element:{mynumbers}");
delete mynumbers[. == 122];
System.out.println("After deleting:{mynumbers}");

结果:
Before inserting anything: 1 2 7
After inserting the 10 value at the end: 1 2 7 10
After inserting the 8, 6, and 90 values at the first positions: 8 6 90 1 2 7 10
After inserting the 122 value at the end: 8 6 90 1 2 7 10 122
After inserting the 78 and 11 values before/after the 3rd element: 8 6 90 78 11 1 2 7 10 122
After deleting: 8 6 90 78 11 1 2 7 10

JavaFX中的一个非常好的功能是list。这个功能使用 select 和 foreach 操作符实现。这有两个例子（一个使用 select 和使用 foreach) 得到指定间隔的奇数。

源码列表9

//JavaFX中的 select 和 foreach 操作符

import java.lang.System;
function odd(p:Number)
{ return select i from i in [1.0 ..p]
 where (i%2 == 0.0);
}

var result = odd(10.0);
System.out.println("Odd numbers:{result}");

结果: Odd numbers: 2.0 4.0 6.0 8.0 10.0

源码列表10 (同 源码列表 9相同, 但是有 foreach)

//JavaFX中的select 和 foreach 操作符

import java.lang.System;
function odd(p:Number) {
       return foreach (i in [1.0 ..p]
     where (i%2 == 0.0)) i;
     }
var result = odd(10.0);
System.out.println("Odd numbers:{result}");

这个例子显示了 foreach 对于创建好的效果非常有用。

源码列表11

//JavaFX中的 select 和 foreach 操作符

import java.lang.*;
import javafx.ui.*;
import javafx.ui.canvas.*;
Frame {
centerOnScreen: true
visible: true
height: 500
width: 500
title: "Foreach demo..."
onClose: operation() {
System.exit(0);
}
content: ScrollPane {
background: white
view: Canvas {
 content: bind
foreach (i in [1..8], j in [1..8])
Rect { x: i*30 y: j*30 width:30 height:30 fill: Color {red: (100+i) green: (100+j) blue: (100+(i*j))
}
stroke:white
strokeWidth:1 } }

}

}

 
图四. 运行源码列表 11

使用双箭头括号引用为JavaFX关键字的变量名或者属性名，如下所示。

源码列表 12

//标志符引用

import java.lang.System;

for (<<for>> in [0..3]) {

System.out.println("for = {<<for>>}");

}

结果: for = 0 for = 1 for = 2 for = 3

当你需要开发Swing接口时，JavaFX 是一个伟大的工具，因为 JavaFX 考虑了非常多用来降低代码量和同javax.swing.*包并存友好。在上一节（使用NetBeans5.5中的JavaFX插件测试Hello World应用程序），你看到了创建一个窗体是如何容易。这有两个更好的例子：创建按钮和文本框。

源码列表 13

import javafx.ui.*;

import java.lang.System;

Frame{

content: Button { text: "Exit" action: operation() { System.exit(0); } }

visible: true

}

 
图五. 运行源码 13

源码列表14

import javafx.ui.*;

Frame {

content: GroupPanel { var myRow = Row { alignment: BASELINE }

var label_col = Column { alignment: TRAILING }

var field_col = Column { alignment: LEADING }

rows: [myRow] columns: [label_col, field_col]

content: [SimpleLabel { row: myRow column: label_col text: "Type your text here:" }, TextField { row: myRow column: field_col columns: 50 }] }

visible: true

};

 
图六. 运行源码 14

Java.net 也有使用JavaFx创建 Swing接口的教程。