JavaFX發現之旅：JavaFX Script With Eclipse 入門（第一部分）

pytruth1002 發表於 2007-06-01 17:07:13
作者:feiy     來源:feiy
評論數:4 點擊數:474     投票總得分:5 投票總人次:1
關鍵字:JavaFX

摘要:

最近Java社區最火的就是JavaFX Script的發布了，並且Sun同時公布了JavaFX Script的開源網站：openJfx，JavaFX Script是Sun的RIA解決方案，是一種用於編寫能夠在支援Java的PC和手機上啟動並執行應用軟體的更簡單的指令碼語言。

最近Java社區最火的就是JavaFX Script的發布了，並且Sun同時公布了JavaFX Script的開源網站：openJfx，JavaFX Script是Sun的RIA解決方案，是一種用於編寫能夠在支援Java的PC和手機上啟動並執行應用軟體的更簡單的指令碼語言。其編寫的程式可以直接在 Java虛擬機器上運行（Java 1.5以上），從其啟動並執行環境、方式看，這是Adobe Apollo的勁敵，其啟動並執行效果大家可以查看官方的示範程式（注意，需要Jre 1.5），效果很驚人的哦。下面是其中一個示範的：

從 文法來看，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中輸入：http://download.java.net/general/openjfx/plugins/eclipse/site.xml；
點擊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屬性更新到上面的結果。但是，這樣的內容表達 依然是聲明。