摘要:
最近Java社區(qū)最火的就是JavaFX Script的發(fā)布了，并且Sun同時(shí)公布了JavaFX Script的開源網(wǎng)站：openJfx，JavaFX Script是Sun的RIA解決方案，是一種用于編寫能夠在支持Java的PC和手機(jī)上運(yùn)行的應(yīng)用軟件的更簡(jiǎn)單的腳本語(yǔ)言。從 語(yǔ)法來(lái)看，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編輯、語(yǔ)法提示等。
OpenJfx官方有一個(gè)基于 NetBeans的JavaFX Script 起步，考慮到Flex開發(fā)中eclipse(FlexBuilder)的使用情況，今天我們將基于Eclipe來(lái)一起開始我們的JavaFX Script發(fā)現(xiàn)之旅。文中除了將原文的使用NetBeans更改為Eclipse，其他均翻譯自官方文檔。
要完成我們今天的旅途，您首先需要安裝Eclipse 3.2.2，以及安裝FlexBuilder也可以，另外如果您的Jre版本低于1.5請(qǐng)升級(jí)。
安裝JavaFX Script For Eclipse插件
首先我們來(lái)安裝JavaFX Script For Eclipse插件，官方的安裝說(shuō)明在這里，安裝步驟如下：
啟動(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中輸入： ；
點(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)在我們來(lái)實(shí)際開始JavaFX Script之旅。
我們需要?jiǎng)?chuàng)建一個(gè)Java工程來(lái)存放我們的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程序。
語(yǔ)法解釋
正如您在前面章節(jié)看到的，JavaFX語(yǔ)言提供了一種用于表述用戶界面組件結(jié)構(gòu)和內(nèi)容的聲明式的語(yǔ)法(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í)說(shuō)明了以上聲明式和程序式方式的代碼實(shí)際發(fā)生了什么：
調(diào)用Frame類構(gòu)造器創(chuàng)建一個(gè)新的Frame。
對(duì)Frame的title、width、visible和content屬性進(jìn)行賦值。
在content屬性的賦值過(guò)程中，調(diào)用Label類構(gòu)造器創(chuàng)建了一個(gè)新的Label，并且給它的text屬性賦了一個(gè)值。
但是，即使像這里這么極端簡(jiǎn)單的示例中，描述性語(yǔ)法編寫的程序的意識(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”程序沒(méi)有動(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所示：
注意該示例通過(guò)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é)果（通過(guò)TextField類的實(shí)現(xiàn)）。當(dāng)model的saying屬性更新到與文本域相同值發(fā)生時(shí)，因?yàn)樵?表達(dá)式指定窗口的title屬性依賴于model的saying屬性，表達(dá)式被重新計(jì)算并且窗口的title屬性更新到上面的結(jié)果。但是，這樣的內(nèi)容表達(dá) 依然是聲明。?
?
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
