原作者： Anghel Leonard
時(shí)間：08/01/2007
翻譯：Caoer
2007年8月5日
什么是JavaFX？SUN（太陽(yáng)公司）在2007年春天發(fā)布了一個(gè)叫JavaFX新框架。這是一個(gè)泛泛的名字，因?yàn)?/span>JavaFX主要包含Script and Mobile兩個(gè)組件，在將來(lái)SUN將開(kāi)發(fā)更多的組件。
JavaFX 的核心是 JavaFX 腳本，是一個(gè)聲明式腳本語(yǔ)言。盡管同Java代碼非常不同，但是同Java類具有很高的交互度。 JavaFX 中的很多類主要為了更容易實(shí)現(xiàn)Swing和Java2D而設(shè)計(jì)的。使用 JavaFX 腳本，您能很容易的為文本和圖形開(kāi)發(fā)GUI接口、動(dòng)畫(huà)和非常COOL的效果。并且，您能將Java和HTML代碼包裝到 JavaFX 腳本中。
第二個(gè)組件- JavaFX Mobile，是為移動(dòng)設(shè)備開(kāi)發(fā)Java應(yīng)用的平臺(tái)。它最終會(huì)成為開(kāi)發(fā) JavaFX 腳本的平臺(tái)但是現(xiàn)在同這篇文章實(shí)用的技術(shù)還很不兼容。
JavaFX 應(yīng)用的一些例子
在開(kāi)始學(xué)習(xí)一門(mén)新的語(yǔ)言前，讓我們先看一下JavaFX代碼的一些例子。JavaFX 官方站點(diǎn)具有大量的JavaFX 實(shí)例。請(qǐng)點(diǎn)擊JavaFX Script 2D Graphics Tutorial下載該實(shí)例. 下載完成以后，雙擊tutorial.jnlp 文件即可運(yùn)行。幾秒過(guò)后，你應(yīng)該能夠看到如圖一的JavaFX實(shí)例運(yùn)行場(chǎng)景（若沒(méi)有出現(xiàn)該圖片，你必須為.jnlp擴(kuò)展名重新配置Java Web Start）。
圖一、運(yùn)行 tutorial.jnlp tutorial
花些時(shí)間看一看這些例子和源代碼。僅僅使用有限的幾行JavaFX代碼就能得到很多有趣的效果。如果你對(duì)于JavaFX的應(yīng)用還是感到摸不著頭腦，看一看下面的兩個(gè)demo。它們是StudioMoto 和 Tesla Motors 站點(diǎn)的部分重新實(shí)現(xiàn)。您可以從OpenJFX 項(xiàng)目站點(diǎn)下載OpenJFX 腳本Studiomoto Demo 和 Tesla Demo。它們需要Java Web Start 才能運(yùn)行，但是也取決于你的機(jī)器配置它們可能自動(dòng)運(yùn)行，或者你必須找到和運(yùn)行已經(jīng)下載的.jnlp文件。
下載安裝JavaFX
如果你對(duì)于學(xué)習(xí)開(kāi)發(fā)JavaFX應(yīng)用程序，您應(yīng)該了解至少使用JavaFX三個(gè)方法。同時(shí)了解JavaFX應(yīng)用程序不是基于瀏覽器的也很重要。最簡(jiǎn)單最快捷的方法是基于叫JavaFXPad輕量級(jí)的工具。使用該工具的主要優(yōu)勢(shì)是你總能立即看到你在編輯器里所作更改的效果。你能從JavaFX項(xiàng)目網(wǎng)站下載到該工具（ JavaFXPad ）。并且運(yùn)行它需要Java Web Start （如圖二）。
圖二、運(yùn)行JavaFXPad編輯器
使用JavaFX的另一種方式是使用JavaFX腳本NetBeans 5.5插件或者Eclipse 3.2插件（需要下載和安裝NetBeans 5.5 或者 Eclipse 3.2.2以上集成開(kāi)發(fā)工具 ）。若您已經(jīng)使用 NetBeans 5.5開(kāi)始你的JavaFX之旅,OpenJFX項(xiàng)目網(wǎng)站的對(duì)于NetBean開(kāi)發(fā)JavaFX的說(shuō)明將會(huì)給予你幫助。 相似的如果您使用基于Eclipse的JavaFX插件，您可以去JavaFX的Eclipse插件。注意這篇文章中的所有例子已經(jīng)在NetBeans5.5的JavaFX插件中測(cè)試過(guò)，但是應(yīng)該能夠使用其他方法運(yùn)行。
使用NetBeans 5.5下的JavaFX插件開(kāi)發(fā)Hello World 程序
每當(dāng)開(kāi)始學(xué)習(xí)一門(mén)新的語(yǔ)言時(shí)，我們必定要寫(xiě)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開(kāi)發(fā)和運(yùn)行這個(gè)小程序步驟如下:
1. 啟動(dòng)NetBeans 5.5.
2. 從主菜單選擇File -> New Project.
3. 在新項(xiàng)目窗口,選擇目錄常規(guī)目錄和 Java 應(yīng)用項(xiàng)目(點(diǎn)擊下一步).
4. 在新的Java應(yīng)用程序窗口,在項(xiàng)目名文本框敲入 "FXExample".
5. 在相同窗口，用瀏覽按鈕選擇項(xiàng)目的目錄.
6. 取消 "Set as main project" 和 "Create main class" 復(fù)選框 (點(diǎn)擊完成).
7. 右擊FXExample -> Source Packages 和選擇 New -> File/Folder.
8. 在新的文件窗口，選擇另一個(gè)目錄和JavaFX文件類型（點(diǎn)擊下一步）.
9. 在新的JavaFX文件窗口，敲入"HelloWorld" 作為文件名和"src"作為目錄(點(diǎn)擊完成).
10. 拷貝源碼列表1到 HelloWorld.fx.
11. 右擊FXExample 項(xiàng)目選擇項(xiàng)目屬性.
12. 在項(xiàng)目FXExample屬性對(duì)話框 ,選擇從目錄面板運(yùn)行節(jié)點(diǎn).
13. 在參數(shù)文本框敲入 "Hello World" (點(diǎn)擊完成).
14. 右擊FXExample 項(xiàng)目選擇運(yùn)行項(xiàng)目選項(xiàng).
如果一切良好,你應(yīng)該看到一個(gè)窗體如圖三：
圖三、 在NetBeans 5.5中運(yùn)行 Hello World 應(yīng)用程序
現(xiàn)在你擁有了開(kāi)發(fā)和運(yùn)行任何JavaFX應(yīng)用程序的IDE軟件支持.
JavaFX 語(yǔ)法
在正式開(kāi)始學(xué)習(xí)JavaFX，讓我們?yōu)g覽一遍該語(yǔ)言的語(yǔ)法要點(diǎn)。如果你非常熟悉Java語(yǔ)言，這些語(yǔ)法的大多數(shù)會(huì)讓你感到非常熟悉，但是有一些會(huì)相當(dāng)不一樣。
JavaFX 原始類型
JavaFX 支持原始類型：String (對(duì)應(yīng)于 java.lang.String), Boolean (對(duì)應(yīng)于 java.lang.Boolean), Number (對(duì)應(yīng)于 java.lang.Number) 和 Integer (對(duì)應(yīng)于 byte,short,int,long,BigInteger).
JavaFX 變量
一個(gè)JavaFX變量使用var關(guān)鍵字聲明。看下面的例子：
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 支持這些方法. 具有參數(shù)、變量聲明和返回值的方法舉例：
function taxes(x) { var t:Number = (19.0/100.0)*x; return t; }
JavaFX if 語(yǔ)句
在JavaFX中，你你能通過(guò)使用if語(yǔ)句使用條件判斷。
if (條件) { //動(dòng)作 } else if (條件) { //動(dòng)作 } else { //動(dòng)作 }
JavaFX while 語(yǔ)句
這個(gè) while 語(yǔ)句同在Java中的while語(yǔ)句相似。 while (條件) { //動(dòng)作}
JavaFX for 語(yǔ)句
for 語(yǔ)句用于循環(huán)和間隔（間隔使用方括號(hào)[]和 .. 符號(hào)表示).
//i 將取值： 0, 1, 2, 3, 4, 5象在 (i in [0..5]) { //伴隨 i的動(dòng)作 }代碼塊中
JavaFX 過(guò)程
JavaFX 過(guò)程以operation 關(guān)鍵字為標(biāo)志。一個(gè)簡(jiǎn)單的例子：
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關(guān)鍵字. 一個(gè) JavaFX 類能夠使用extends 關(guān)鍵字繼承多個(gè)類使用逗號(hào)分割
這些類的名字。在花括號(hào)中間你可以放屬性、方法和過(guò)程，例如下面的例子：
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關(guān)鍵字聲明，方法體和過(guò)程不在類體中，它們單元定義在類聲明以后，在下文你很快就能看到。 inverse 子句是一個(gè)可選項(xiàng) ，它表示一種同在類中另一個(gè)屬性的雙向關(guān)系。在這個(gè)案例中JavaFX將自動(dòng)完成更新（插入、替代和刪除）你能在Java.net上找到更完整的文檔。
熟悉JavaFX
在本小節(jié)，您將會(huì)看到一系列的小例子，這些例子覆蓋JavaFX的各種特性和功能。主要目的是讓你熟悉JavaFX代碼和JavaFX應(yīng)用程序的邏輯。第二個(gè)目標(biāo)是當(dāng)你需要開(kāi)發(fā)僅僅需要幾行代碼就會(huì)有非常酷的GUI，動(dòng)畫(huà)和好的效果時(shí)候使你確信JavaFX值得好好研究一下。所有列出的例子將介紹關(guān)于JavaFX的技巧。每一個(gè)例子只使用很少的描述處理，所以不要想找到大量的注釋。所有這些可訪問(wèn)的例子你都是你自己就能運(yùn)行的，所以讓我們開(kāi)始吧。當(dāng)我們需要使用System.out.println 打印屬性值時(shí)候，你可以把它的名字放進(jìn)含有引用的字符串，象源碼列表2中所示的那樣。
源碼列表2
//帶有應(yīng)用文本的表達(dá)式
import java.lang.System;
var mynumber:Number = 10;
System.out.println("數(shù)字是: {mynumber}");
結(jié)果: 數(shù)字是: 10
JavaFX 支持變量的計(jì)數(shù)這樣一個(gè)有用的功能。這個(gè)功能利用下面的三個(gè)操作符實(shí)現(xiàn)：
· ?: 可選的(可能為 null)
· +: 1或多個(gè)
· *: 0或多個(gè)
源碼列表3
//變量計(jì)數(shù)
import java.lang.System;
var mynumbers:Number* = [1,2,7];
System.out.println("數(shù)字是: {mynumbers}");
結(jié)果: 數(shù)字是: 1 2 7
在JavaFX中, 在聲明部分不指定變量的類型是可能的。 這不會(huì)產(chǎn)生錯(cuò)誤，因?yàn)?/span>JavaFX 將在該變量的使用中自動(dòng)發(fā)現(xiàn)它的類型。
源碼列表 4
//變量類型是可選的
import java.lang.System;
var days = ["Monday,","Friday,","Sunday"];
System.out.println("你必須工作: {days}");
結(jié)果: 你必須工作: Monday, Friday, Sunday
你可以使用sizeof 操作符得到一個(gè)數(shù)組的大小：
源碼列表 5
//得到一個(gè)數(shù)組的大小
import java.lang.System;
var lotto = [21,30,11,40,5,6];
System.out.println("數(shù)組大小:{sizeof lotto}");
結(jié)果: 數(shù)組大小: 6
您能使用 [] 操作符得到滿足指定條件的子數(shù)組。條件放在 [] 中作為布爾判斷 。這個(gè)與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的數(shù)字為: {numbers}");
結(jié)果: 小于10的數(shù)字為: 1 2 7 3 6 4
你可以使用indexof 操作符得到指定序數(shù)位置的數(shù)組中一個(gè)元素：
源碼列表 7
//返回指定序數(shù)位置的數(shù)組中的元素
import java.lang.System;
var mynumbers = [1,2,7,3,30,15,14,6,4];
var number_four = mynumbers[indexof . == 4];
System.out.println("數(shù)字4:{number_four}");
結(jié)果: 數(shù)字4: 30
當(dāng)您想要向一個(gè)數(shù)組中插入一個(gè)元素時(shí)，你可以使用下列 insert 語(yǔ)句中的一個(gè):
· as first: 在第一個(gè)位置插入
· as last:在最后一個(gè)位置(默認(rèn))插入
· before: 在前一個(gè)位置插入
· after:在下一個(gè)位置插入
你可以使用 delete 語(yǔ)句從一個(gè)數(shù)組中刪除一個(gè)元素.
源碼列表8
//插入和刪除語(yǔ)句
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}");
結(jié)果:
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中的一個(gè)非常好的功能是list。這個(gè)功能使用 select 和 foreach 操作符實(shí)現(xiàn)。這有兩個(gè)例子（一個(gè)使用 select 和使用 foreach) 得到指定間隔的奇數(shù)。
源碼列表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}");
結(jié)果: 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}");
這個(gè)例子顯示了 foreach 對(duì)于創(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 } }
}
}
圖四. 運(yùn)行源碼列表 11
使用雙箭頭括號(hào)引用為JavaFX關(guān)鍵字的變量名或者屬性名，如下所示。
源碼列表 12
//標(biāo)志符引用
import java.lang.System;
for (<<for>> in [0..3]) {
System.out.println("for = {<<for>>}");
}
結(jié)果: for = 0 for = 1 for = 2 for = 3
當(dāng)你需要開(kāi)發(fā)Swing接口時(shí)，JavaFX 是一個(gè)偉大的工具，因?yàn)?/span> JavaFX 考慮了非常多用來(lái)降低代碼量和同javax.swing.*包并存友好。在上一節(jié)（使用NetBeans5.5中的JavaFX插件測(cè)試Hello World應(yīng)用程序），你看到了創(chuàng)建一個(gè)窗體是如何容易。這有兩個(gè)更好的例子：創(chuàng)建按鈕和文本框。
源碼列表 13
import javafx.ui.*;
import java.lang.System;
Frame{
content: Button { text: "Exit" action: operation() { System.exit(0); } }
visible: true
}
圖五. 運(yùn)行源碼 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
};
圖六. 運(yùn)行源碼 14
Java.net 也有使用JavaFx創(chuàng)建 Swing接口的教程。
凡是有該標(biāo)志的文章，都是該blog博主Caoer（草兒）原創(chuàng)，凡是索引、收藏
、轉(zhuǎn)載請(qǐng)注明來(lái)處和原文作者。非常感謝。