JavaFX發(fā)現(xiàn)之旅：JavaFX Script With Eclipse 入門（第一部分）

最近Java社區(qū)最火的就是JavaFX Script的發(fā)布了，并且Sun同時公布了JavaFX Script的開源網(wǎng)站：openJfx，JavaFX Script是Sun的RIA解決方案，是一種用于編寫能夠在支持Java的PC和手機(jī)上運行的應(yīng)用軟件的更簡單的腳本語言。其編寫的程序可以直接在Java虛擬機(jī)上運行（Java 1.5以上），從其運行的環(huán)境、方式看，這是Adobe Apollo的勁敵，其運行的效果大家可以查看官方的演示程序（注意，需要Jre 1.5），效果很驚人的哦。下面是其中一個演示的效果圖：

從語法來看，JavaFX Script是個Java和VRML的混合體，既有Java的優(yōu)點（面向?qū)ο螅^承等等），又有VRML的優(yōu)點（圖形描述）。在IDE支持方面，目前以及推出NetBeans和Eclipse 的插件，雖然功能還不是很強(qiáng)大，但相信等JavaFX Script正式發(fā)布的時候，IDE方面的支持會持續(xù)加強(qiáng)的，比如可視模式的UI編輯、語法提示等。

OpenJfx官方有一個基于NetBeans的JavaFX Script 起步，考慮到Flex開發(fā)中eclipse(FlexBuilder)的使用情況，今天我們將基于Eclipe來一起開始我們的JavaFX Script發(fā)現(xiàn)之旅。文中除了將原文的使用NetBeans更改為Eclipse，其他均翻譯自官方文檔。

• 安裝JavaFX Script For Eclipse插件
• 新建JavaFX工程
• 創(chuàng)建我們第一個JavaFX程序
• 運行我們的第一個JavaFX程序
• 語法解釋
• 添加動態(tài)行為

要完成我們今天的旅途，您首先需要安裝Eclipse 3.2.2，以及安裝FlexBuilder也可以，另外如果您的Jre版本低于1.5請升級。

安裝JavaFX Script For Eclipse插件

首先我們來安裝JavaFX Script For Eclipse插件，官方的安裝說明在這里，安裝步驟如下：

1. 啟動Eclipse/FlexBuilder；
2. 從主菜單選擇 Help > Software Updates > Find and Install；
3. 在Install/Update對話框中, 選擇Search for New Features to Install然后點擊Next；
4. 點擊New Remote Site；
5. 在New Update Site對話框中，在Name中輸入JavaFX；
6. 在URL中輸入：http://download.java.net/general/openjfx/plugins/eclipse/site.xml；
7. 點擊OK；
8. 在Install窗口中點擊Finish；
9. 在Updates對話框中選擇JavaFX > JavaFX node > 然后點擊Next；
10. 接受協(xié)議并點擊Next；
11. 點擊Next和Finish；
12. 在Verification對話框中選擇Install All；
13. 安裝完成后重啟Eclipse，JavaFX Script Eclipse 插件就安裝完成了。

新建JavaFX工程

以上準(zhǔn)備好了JavaFX Script的Eclipse開發(fā)環(huán)境，現(xiàn)在我們來實際開始JavaFX Script之旅。

我們需要創(chuàng)建一個Java工程來存放我們的JavaFX Script文件。

1. 從Eclipse的主菜單選擇New > Project
2. 在選擇工程向?qū)Т翱谥羞x擇Java Project
   
3. 點擊Next
4. 輸入Project Name為：JavaFXapp
5. 不需要添加JavaFX Script Lib，運行JavaFX Script程序時，Eclipse會自動添加并設(shè)置環(huán)境的。點擊Finish，完成。
   
   現(xiàn)在JavaFXapp工程就創(chuàng)建好了，如下圖：
   

創(chuàng)建我們第一個JavaFX程序

現(xiàn)在，開始用Eclipse創(chuàng)建我們第一個JavaFX HelloWorld 程序。

1. 右擊JavaFXapp > New > Other
   
2. 在New窗口中選擇JavaFX > JavaFX File，
   
3. 點擊Next，在File name輸入：HelloWorld.fx，
   
4. 點擊Finish，HelloWorld.fx就被添加到JavaFXapp工程中，并且在右邊自動被打開了。
   
5. 將下面代碼粘貼到HelloWorld.fx中：

   import javafx.ui.*;
   	
   Frame {
     title: "Hello World JavaFX"
     width: 200
     height: 50
     content: Label {
        text: "Hello World"
     }
     visible: true
   }

運行我們的第一個JavaFX程序

現(xiàn)在讓我們用Eclipse運行我們的第一個JavaFX程序。

1. 在Eclipse主菜單，選擇Run > Run...：
   
2. 在Run窗口中，雙擊JavaFX Application：
   
3. 然后在Name輸入：HelloWorld：
   
4. 點擊Arguments，在Program arguments中輸入我們的JavaFX程序名稱：HelloWorld，這里的名稱與Java類名一致，如果我們的HelloWorld存放在prac目錄下，那們就輸入prac.HelloWorld：
   
5. 點擊Run，自動編譯運行，將出現(xiàn)下面運行窗口：
   

恭喜，我們現(xiàn)在完成了第一個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程序并且和前面的運行效果相同。

以下同時說明了以上聲明式和程序式方式的代碼實際發(fā)生了什么：

1. 調(diào)用Frame類構(gòu)造器創(chuàng)建一個新的Frame。
2. 對Frame的title、width、visible和content屬性進(jìn)行賦值。
3. 在content屬性的賦值過程中，調(diào)用Label類構(gòu)造器創(chuàng)建了一個新的Label，并且給它的text屬性賦了一個值。

但是，即使像這里這么極端簡單的示例中，描述性語法編寫的程序的意識還是更加容易理解。

因為聲明式編程(declarative programming)可以從單個表達(dá)式創(chuàng)建程序，如前面第一個例子，表達(dá)式的根一般為一個生成程序的對象圖形的對象分配表達(dá)式（構(gòu)造器）。

添加動態(tài)行為（dynamic behavior）

上面的“Hello World”程序沒有動態(tài)行為。在JavaFX中創(chuàng)建一個帶動態(tài)行為的圖形用戶接口，即創(chuàng)建一個屬性依賴其他對象屬性值的圖形用戶接口組件（和Flex中的綁定的概念一致）。這些其他對象可以是任何您覺得合適的代表您的應(yīng)用狀態(tài)的對象。因為該GUI組件的屬性依賴于另一個對象，它會自動反應(yīng)任何時候您對另一個對象的修改。相應(yīng)的，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!";

運行結(jié)果將變?yōu)橄聢D所示：

注意該示例通過JavaFX的bind操作將label的text屬性初始化為mode的saying屬性。在這里，bind操作聲明增量更新。這意味著任何時候model.saying改變，label的text屬性都將更新為相同的值。

對于輸入構(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
};

運行該程序，顯示如下：

如果您在文本輸入域中輸入其他內(nèi)容然后敲回車，窗口的標(biāo)題將相應(yīng)的改變：

在這一情況下，文本域的值的更新是用戶輸入的結(jié)果（通過TextField類的實現(xiàn)）。當(dāng)model的saying屬性更新到與文本域相同值發(fā)生時，因為該表達(dá)式指定窗口的title屬性依賴于model的saying屬性，表達(dá)式被重新計算并且窗口的title屬性更新到上面的結(jié)果。但是，這樣的內(nèi)容表達(dá)依然是聲明。

出自：http://blog.eshangrao.com/index.php/2007/05/16/391-javafx-script-javafx-script-with-eclipse