The blog of Astro Qi

     什么是JavaFX？SUN（太陽公司）在2007年春天發(fā)布了一個叫JavaFX新框架。這是一個泛泛的名字，因為JavaFX主要包含Script and Mobile兩個組件，在將來SUN將開發(fā)更多的組件。

     JavaFX 的核心是 JavaFX 腳本，是一個聲明式腳本語言。盡管同Java代碼非常不同，但是同Java類具有很高的交互度。 JavaFX 中的很多類主要為了更容易實現(xiàn)Swing和Java2D而設計的。使用 JavaFX 腳本，您能很容易的為文本和圖形開發(fā)GUI接口、動畫和非常COOL的效果。并且，您能將Java和HTML代碼包裝到 JavaFX 腳本中。

    第二個組件- JavaFX Mobile，是為移動設備開發(fā)Java應用的平臺。它最終會成為開發(fā) JavaFX 腳本的平臺但是現(xiàn)在同這篇文章實用的技術還很不兼容。

JavaFX 應用的一些例子

    在開始學習一門新的語言前，讓我們先看一下JavaFX代碼的一些例子。JavaFX 官方站點具有大量的JavaFX 實例。請點擊JavaFX Script 2D Graphics Tutorial下載該實例. 下載完成以后，雙擊tutorial.jnlp 文件即可運行。幾秒過后，你應該能夠看到如圖一的JavaFX實例運行場景（若沒有出現(xiàn)該圖片，你必須為.jnlp擴展名重新配置Java Web Start）。 

圖一、運行 tutorial.jnlp tutorial

    花些時間看一看這些例子和源代碼。僅僅使用有限的幾行JavaFX代碼就能得到很多有趣的效果。如果你對于JavaFX的應用還是感到摸不著頭腦，看一看下面的兩個demo。它們是StudioMoto 和 Tesla Motors 站點的部分重新實現(xiàn)。您可以從OpenJFX 項目站點下載OpenJFX 腳本Studiomoto Demo 和 Tesla Demo。它們需要Java Web Start 才能運行，但是也取決于你的機器配置它們可能自動運行，或者你必須找到和運行已經下載的.jnlp文件。

下載安裝JavaFX

  如果你對于學習開發(fā)JavaFX應用程序，您應該了解至少使用JavaFX三個方法。同時了解JavaFX應用程序不是基于瀏覽器的也很重要。最簡單最快捷的方法是基于叫JavaFXPad輕量級的工具。使用該工具的主要優(yōu)勢是你總能立即看到你在編輯器里所作更改的效果。你能從JavaFX項目網站下載到該工具（ JavaFXPad ）。并且運行它需要Java Web Start （如圖二）。

 
圖二、運行JavaFXPad編輯器

     使用JavaFX的另一種方式是使用JavaFX腳本NetBeans 5.5插件(https://openjfx.dev.java.net/)或者Eclipse 3.2插件（需要下載和安裝NetBeans 5.5 或者 Eclipse 3.2.2 以上集成開發(fā)工具 ）。若您已經使用 NetBeans 5.5開始你的JavaFX之旅,OpenJFX項目網站的對于NetBean開發(fā)JavaFX的說明將會給予你幫助。 相似的如果您使用基于Eclipse的JavaFX插件，您可以去JavaFX的Eclipse插件。注意這篇文章中的所有例子已經在NetBeans5.5的JavaFX插件中測試過，但是應該能夠使用其他方法運行。

使用NetBeans 5.5下的JavaFX插件開發(fā)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開發(fā)和運行這個小程序步驟如下:

1.                   啟動NetBeans 5.5.

2.                   從主菜單選擇File -> New Project.

3.                   在新項目窗口,選擇目錄常規(guī)目錄和 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屬性對話框 ,選擇從目錄面板運行節(jié)點.

13.               在參數文本框敲入 "Hello World" (點擊完成).

14.               右擊FXExample 項目選擇運行項目選項.

如果一切良好,你應該看到一個窗體如圖三：

圖三、 在NetBeans 5.5中運行 Hello World 應用程序

現(xiàn)在你擁有了開發(fā)和運行任何JavaFX應用程序的IDE軟件支持.

JavaFX 語法

    在正式開始學習JavaFX，讓我們?yōu)g覽一遍該語言的語法要點。如果你非常熟悉Java語言，這些語法的大多數會讓你感到非常熟悉，但是有一些會相當不一樣。

JavaFX 原始類型

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

JavaFX 變量

一個JavaFX變量使用var關鍵字聲明?？聪旅娴睦樱?/span>

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 語句用于循環(huán)和間隔（間隔使用方括號[]和 .. 符號表示).

//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

    在本小節(jié)，您將會看到一系列的小例子，這些例子覆蓋JavaFX的各種特性和功能。主要目的是讓你熟悉JavaFX代碼和JavaFX應用程序的邏輯。第二個目標是當你需要開發(fā)僅僅需要幾行代碼就會有非?？岬?/span>GUI，動畫和好的效果時候使你確信JavaFX值得好好研究一下。所有列出的例子將介紹關于JavaFX的技巧。每一個例子只使用很少的描述處理，所以不要想找到大量的注釋。所有這些可訪問的例子你都是你自己就能運行的，所以讓我們開始吧。當我們需要使用System.out.println 打印屬性值時候，你可以把它的名字放進含有引用的字符串，象源碼列表2中所示的那樣。

源碼列表2

//帶有應用文本的表達式

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

結果: 數字是: 10
JavaFX 支持變量的計數這樣一個有用的功能。這個功能利用下面的三個操作符實現(xiàn)：

·                     ?: 可選的(可能為 null)

·                     +: 1或多個

·                     *: 0或多個

源碼列表3

//變量計數

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

結果: 數字是: 1 2 7
   在JavaFX中, 在聲明部分不指定變量的類型是可能的。 這不會產生錯誤，因為JavaFX 將在該變量的使用中自動發(fā)現(xiàn)它的類型。

源碼列表 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 操作符實現(xiàn)。這有兩個例子（一個使用 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 對于創(chuàng)建好的效果非常有用。

源碼列表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

當你需要開發(fā)Swing接口時，JavaFX 是一個偉大的工具，因為 JavaFX 考慮了非常多用來降低代碼量和同javax.swing.*包并存友好。在上一節(jié)（使用NetBeans5.5中的JavaFX插件測試Hello World應用程序），你看到了創(chuàng)建一個窗體是如何容易。這有兩個更好的例子：創(chuàng)建按鈕和文本框。

源碼列表 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創(chuàng)建 Swing接口的教程。