摘要:
最近Java社區最火的就是JavaFX Script的發布了，并且Sun同時公布了JavaFX Script的開源網站：openJfx，JavaFX Script是Sun的RIA解決方案，是一種用于編寫能夠在支持Java的PC和手機上運行的應用軟件的更簡單的腳本語言。從 語法來看，JavaFX Script是個Java和VRML的混合體，既有Java的優點（面向對象，繼承等等），又有VRML的優點（圖形描述）。在IDE支持方面，目前以及 推出NetBeans和Eclipse的插件，雖然功能還不是很強大，但相信等JavaFX Script正式發布的時候，IDE方面的支持會持續加強的，比如可視模式的UI編輯、語法提示等。
OpenJfx官方有一個基于 NetBeans的JavaFX Script 起步，考慮到Flex開發中eclipse(FlexBuilder)的使用情況，今天我們將基于Eclipe來一起開始我們的JavaFX Script發現之旅。文中除了將原文的使用NetBeans更改為Eclipse，其他均翻譯自官方文檔。
要完成我們今天的旅途，您首先需要安裝Eclipse 3.2.2，以及安裝FlexBuilder也可以，另外如果您的Jre版本低于1.5請升級。
安裝JavaFX Script For Eclipse插件
首先我們來安裝JavaFX Script For Eclipse插件，官方的安裝說明在這里，安裝步驟如下：
啟動Eclipse/FlexBuilder；
從主菜單選擇 Help > Software Updates > Find and Install；
在Install/Update對話框中, 選擇Search for New Features to Install然后點擊Next；
點擊New Remote Site；
在New Update Site對話框中，在Name中輸入JavaFX；
在URL中輸入： ；
點擊OK；
在Install窗口中點擊Finish；
在Updates對話框中選擇JavaFX > JavaFX node > 然后點擊Next；
接受協議并點擊Next；
點擊Next和Finish；
在Verification對話框中選擇Install All；
安裝完成后重啟Eclipse，JavaFX Script Eclipse 插件就安裝完成了。
新建JavaFX工程
以上準備好了JavaFX Script的Eclipse開發環境，現在我們來實際開始JavaFX Script之旅。
我們需要創建一個Java工程來存放我們的JavaFX Script文件。
從Eclipse的主菜單選擇New > Project
在選擇工程向導窗口中選擇Java Project
點擊Next
輸入Project Name為：JavaFXapp
不需要添加JavaFX Script Lib，運行JavaFX Script程序時，Eclipse會自動添加并設置環境的。點擊Finish，完成。
現在JavaFXapp工程就創建好了，如下圖：
創建我們第一個JavaFX程序
現在，開始用Eclipse創建我們第一個JavaFX HelloWorld 程序。
右擊JavaFXapp > New > Other
在New窗口中選擇JavaFX > JavaFX File，
點擊Next，在File name輸入：HelloWorld.fx，
點擊Finish，HelloWorld.fx就被添加到JavaFXapp工程中，并且在右邊自動被打開了。
將下面代碼粘貼到HelloWorld.fx中：
import javafx.ui.*;
????????
Frame {
??title: "Hello World JavaFX"
??width: 200
??height: 50
??content: Label {
???? text: "Hello World"
??}
??visible: true
}
運行我們的第一個JavaFX程序
現在讓我們用Eclipse運行我們的第一個JavaFX程序。
在Eclipse主菜單，選擇Run > Run...：
在Run窗口中，雙擊JavaFX Application：
然后在Name輸入：HelloWorld：
點擊Arguments，在Program arguments中輸入我們的JavaFX程序名稱：HelloWorld，這里的名稱與Java類名一致，如果我們的HelloWorld存放在prac目錄下，那們就輸入prac.HelloWorld：
點擊Run，自動編譯運行，將出現下面運行窗口：
恭喜，我們現在完成了第一個JavaFX程序。
語法解釋
正如您在前面章節看到的，JavaFX語言提供了一種用于表述用戶界面組件結構和內容的聲明式的語法(Declarative Syntax)。為了幫助您理解發生了什么，我們使用類似于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程序并且和前面的運行效果相同。
以下同時說明了以上聲明式和程序式方式的代碼實際發生了什么：
調用Frame類構造器創建一個新的Frame。
對Frame的title、width、visible和content屬性進行賦值。
在content屬性的賦值過程中，調用Label類構造器創建了一個新的Label，并且給它的text屬性賦了一個值。
但是，即使像這里這么極端簡單的示例中，描述性語法編寫的程序的意識還是更加容易理解。
因為聲明式編程(declarative programming)可以從單個表達式創建程序，如前面第一個例子，表達式的根一般為一個生成程序的對象圖形的對象分配表達式（構造器）。
添加動態行為（dynamic behavior）
上 面的“Hello World”程序沒有動態行為。在JavaFX中創建一個帶動態行為的圖形用戶接口，即創建一個屬性依賴其他對象屬性值的圖形用戶接口組件（和Flex中 的綁定的概念一致）。這些其他對象可以是任何您覺得合適的代表您的應用狀態的對象。因為該GUI組件的屬性依賴于另一個對象，它會自動反應任何時候您對另 一個對象的修改。相應的，GUI組件是視圖（View）而另一個對象就是模型（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
};
運行程序顯示如下：
如果model對象的saying改成下面這樣：
model.saying = "Goodbye Cruel World!";
運行結果將變為下圖所示：
注意該示例通過JavaFX的bind操作將label的text屬性初始化為mode的saying屬性。在這里，bind操作聲明增量更新。這意味著任何時候model.saying改變，label的text屬性都將更新為相同的值。
對于輸入構件，如按鈕、復選框和文本輸入域，模式屬性和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
};
運行該程序，顯示如下：
如果您在文本輸入域中輸入其他內容然后敲回車，窗口的標題將相應的改變：
在 這一情況下，文本域的值的更新是用戶輸入的結果（通過TextField類的實現）。當model的saying屬性更新到與文本域相同值發生時，因為該 表達式指定窗口的title屬性依賴于model的saying屬性，表達式被重新計算并且窗口的title屬性更新到上面的結果。但是，這樣的內容表達 依然是聲明。?
?
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
