JavaFX發(fā)現(xiàn)之旅：JavaFX Script With Eclipse 入門（第一部分）
最近Java社區(qū)最火的就是JavaFX Script的發(fā)布了，并且Sun同時(shí)公布了JavaFX Script的開源網(wǎng)站：openJfx，JavaFX Script是Sun的RIA解決方案，是一種用于編寫能夠在支持Java的PC和手機(jī)上運(yùn)行的應(yīng)用軟件的更簡單的腳本語言。其編寫的程序可以直接在Java虛擬機(jī)上運(yùn)行（Java 1.5以上），從其運(yùn)行的環(huán)境、方式看，這是Adobe Apollo的勁敵，其運(yùn)行的效果大家可以查看官方的演示程序（注意，需要Jre 1.5），效果很驚人的哦。下面是其中一個(gè)演示的效果圖：
從語法來看，JavaFX Script是個(gè)Java和VRML的混合體，既有Java的優(yōu)點(diǎn)（面向?qū)ο螅^承等等），又有VRML的優(yōu)點(diǎn)（圖形描述）。在IDE支持方面，目前以及推出NetBeans和Eclipse 的插件，雖然功能還不是很強(qiáng)大，但相信等JavaFX Script正式發(fā)布的時(shí)候，IDE方面的支持會(huì)持續(xù)加強(qiáng)的，比如可視模式的UI編輯、語法提示等。
OpenJfx官方有一個(gè)基于NetBeans的JavaFX Script 起步，考慮到Flex開發(fā)中eclipse(FlexBuilder)的使用情況，今天我們將基于Eclipe來一起開始我們的JavaFX Script發(fā)現(xiàn)之旅。文中除了將原文的使用NetBeans更改為Eclipse，其他均翻譯自官方文檔。
要完成我們今天的旅途，您首先需要安裝Eclipse 3.2.2，以及安裝FlexBuilder也可以，另外如果您的Jre版本低于1.5請(qǐng)升級(jí)。
安裝JavaFX Script For Eclipse插件
首先我們來安裝JavaFX Script For Eclipse插件，官方的安裝說明在這里，安裝步驟如下：
- 啟動(dòng)Eclipse/FlexBuilder；
- 從主菜單選擇 Help > Software Updates > Find and Install；
- 在Install/Update對(duì)話框中, 選擇Search for New Features to Install然后點(diǎn)擊Next；
- 點(diǎn)擊New Remote Site；
- 在New Update Site對(duì)話框中，在Name中輸入JavaFX；
- 在URL中輸入：http://download.java.net/general/openjfx/plugins/eclipse/site.xml；
- 點(diǎn)擊OK；
- 在Install窗口中點(diǎn)擊Finish；
- 在Updates對(duì)話框中選擇JavaFX > JavaFX node > 然后點(diǎn)擊Next；
- 接受協(xié)議并點(diǎn)擊Next；
- 點(diǎn)擊Next和Finish；
- 在Verification對(duì)話框中選擇Install All；
- 安裝完成后重啟Eclipse，JavaFX Script Eclipse 插件就安裝完成了。
新建JavaFX工程
以上準(zhǔn)備好了JavaFX Script的Eclipse開發(fā)環(huán)境，現(xiàn)在我們來實(shí)際開始JavaFX Script之旅。
我們需要?jiǎng)?chuàng)建一個(gè)Java工程來存放我們的JavaFX Script文件。
- 從Eclipse的主菜單選擇New > Project
- 在選擇工程向?qū)Т翱谥羞x擇Java Project
- 點(diǎn)擊Next
- 輸入Project Name為：JavaFXapp
- 不需要添加JavaFX Script Lib，運(yùn)行JavaFX Script程序時(shí)，Eclipse會(huì)自動(dòng)添加并設(shè)置環(huán)境的。點(diǎn)擊Finish，完成。
現(xiàn)在JavaFXapp工程就創(chuàng)建好了，如下圖：
創(chuàng)建我們第一個(gè)JavaFX程序
現(xiàn)在，開始用Eclipse創(chuàng)建我們第一個(gè)JavaFX HelloWorld 程序。
- 右擊JavaFXapp > New > Other
- 在New窗口中選擇JavaFX > JavaFX File，
- 點(diǎn)擊Next，在File name輸入：HelloWorld.fx，
- 點(diǎn)擊Finish，HelloWorld.fx就被添加到JavaFXapp工程中，并且在右邊自動(dòng)被打開了。
- 將下面代碼粘貼到HelloWorld.fx中：
import javafx.ui.*;
Frame {
title: "Hello World JavaFX"
width: 200
height: 50
content: Label {
text: "Hello World"
}
visible: true
}
運(yùn)行我們的第一個(gè)JavaFX程序
現(xiàn)在讓我們用Eclipse運(yùn)行我們的第一個(gè)JavaFX程序。
- 在Eclipse主菜單，選擇Run > Run...：
- 在Run窗口中，雙擊JavaFX Application：
- 然后在Name輸入：HelloWorld：
- 點(diǎn)擊Arguments，在Program arguments中輸入我們的JavaFX程序名稱：HelloWorld，這里的名稱與Java類名一致，如果我們的HelloWorld存放在prac目錄下，那們就輸入prac.HelloWorld：
- 點(diǎn)擊Run，自動(dòng)編譯運(yùn)行，將出現(xiàn)下面運(yùn)行窗口：
恭喜，我們現(xiàn)在完成了第一個(gè)JavaFX程序。
語法解釋
正如您在前面章節(jié)看到的，JavaFX語言提供了一種用于表述用戶界面組件結(jié)構(gòu)和內(nèi)容的聲明式的語法(Declarative Syntax)。為了幫助您理解發(fā)生了什么，我們使用類似于Swing的純程序的形式（類似AS3）重寫以上代碼：
var win = new Frame();
win.title = "Hello World JavaFX";
win.width = 200;
var label = new Label();
label.text = "Hello World";
win.content = label;
win.visible = true;
以上源代碼同樣是正確的JavaFX程序并且和前面的運(yùn)行效果相同。
以下同時(shí)說明了以上聲明式和程序式方式的代碼實(shí)際發(fā)生了什么：
- 調(diào)用Frame類構(gòu)造器創(chuàng)建一個(gè)新的Frame。
- 對(duì)Frame的title、width、visible和content屬性進(jìn)行賦值。
- 在content屬性的賦值過程中，調(diào)用Label類構(gòu)造器創(chuàng)建了一個(gè)新的Label，并且給它的text屬性賦了一個(gè)值。
但是，即使像這里這么極端簡單的示例中，描述性語法編寫的程序的意識(shí)還是更加容易理解。
因?yàn)槁暶魇骄幊?declarative programming)可以從單個(gè)表達(dá)式創(chuàng)建程序，如前面第一個(gè)例子，表達(dá)式的根一般為一個(gè)生成程序的對(duì)象圖形的對(duì)象分配表達(dá)式（構(gòu)造器）。
添加動(dòng)態(tài)行為（dynamic behavior）
上面的“Hello World”程序沒有動(dòng)態(tài)行為。在JavaFX中創(chuàng)建一個(gè)帶動(dòng)態(tài)行為的圖形用戶接口，即創(chuàng)建一個(gè)屬性依賴其他對(duì)象屬性值的圖形用戶接口組件（和Flex中的綁定的概念一致）。這些其他對(duì)象可以是任何您覺得合適的代表您的應(yīng)用狀態(tài)的對(duì)象。因?yàn)樵揋UI組件的屬性依賴于另一個(gè)對(duì)象，它會(huì)自動(dòng)反應(yīng)任何時(shí)候您對(duì)另一個(gè)對(duì)象的修改。相應(yīng)的，GUI組件是視圖（View）而另一個(gè)對(duì)象就是模型（Model)，下面是“Hello World”程序的Model/View版本：
import javafx.ui.*;
class HelloWorldModel {
attribute saying: String;
}
var model = HelloWorldModel {
saying: "Hello World"
};
var win = Frame {
title: "Hello World JavaFX"
width: 200
height: 50
content: Label {
text: bind model.saying
}
visible: true
};
運(yùn)行程序顯示如下：
如果model對(duì)象的saying改成下面這樣：
model.saying = "Goodbye Cruel World!";
運(yùn)行結(jié)果將變?yōu)橄聢D所示：
注意該示例通過JavaFX的bind操作將label的text屬性初始化為mode的saying屬性。在這里，bind操作聲明增量更新。這意味著任何時(shí)候model.saying改變，label的text屬性都將更新為相同的值。
對(duì)于輸入構(gòu)件，如按鈕、復(fù)選框和文本輸入域，模式屬性和GUI組件之間的連接可以是雙向的。
考慮以下示例：
import javafx.ui.*;
class HelloWorldModel {
attribute saying: String;
}
var model = HelloWorldModel {
saying: "Hello World"
};
var win = Frame {
title: bind "{model.saying} JavaFX"
width: 200
height: 50
content: TextField {
value: bind model.saying
}
visible: true
};
運(yùn)行該程序，顯示如下：
如果您在文本輸入域中輸入其他內(nèi)容然后敲回車，窗口的標(biāo)題將相應(yīng)的改變：
在這一情況下，文本域的值的更新是用戶輸入的結(jié)果（通過TextField類的實(shí)現(xiàn)）。當(dāng)model的saying屬性更新到與文本域相同值發(fā)生時(shí)，因?yàn)樵摫磉_(dá)式指定窗口的title屬性依賴于model的saying屬性，表達(dá)式被重新計(jì)算并且窗口的title屬性更新到上面的結(jié)果。但是，這樣的內(nèi)容表達(dá)依然是聲明。
出自：http://blog.eshangrao.com/index.php/2007/05/16/391-javafx-script-javafx-script-with-eclipse