http://blog.csdn.net/frankggyy/archive/2009/04/14/4072397.aspx

使用 Eclipse 和 JavaFX 開發 Mashup 應用

開始之前

Web 2.0 的時代已經全面來臨，Mashup 的應用越來越多，RIA（Rich Internet Application）應用的呼聲也越來越高，很多公司都紛紛推出了自己的 RIA 解決方案，比如 Adobe 公司的 AIR，Microsoft 的 Silverlight 等。而 Java 在互聯網應用系統的開發上卻受到了前所未有的挑戰。在這樣的背景下，SUN 公司於今年的 Java ONE 大會上推出了 JavaFX，希望藉此以迎接這樣的挑戰。JavaFX 是一種聲明式的靜態類型腳本語言，可以讓用戶非常容易和快速地開發應用程序用戶界面，並且能夠很好地和互聯網上提供的衆多 Web 服務結合起來，進行 Mashup 應用的開發。

關於本教程

本教程將採取從簡單到複雜，知識點和實際代碼相結合的方式。先講述一些簡單的概念和代碼，使大家先對 JavaFX 建立起直觀的印象，並且能夠寫出自己的應用程序界面。然後再介紹 JavaFX 的類以及 Mashup 的概念，並且講述如何使用 Web service，從而在建立好程序界面的基礎之上，增加業務邏輯，組建 Mashup 應用。

目標

學完本教程後，您將不僅能夠掌握 JavaFX 的基本概念和語法，用 JavaFX 編寫比較複雜的 UI 界面，並且能夠增加自己的業務邏輯開發滿足自己需求的 Mashup 應用。

先決條件

要學習本教程，您需要有一定的編程經驗，並瞭解面向對象的概念。同時您應該熟悉 Eclipse 開發環境，熟悉插件安裝過程。

代碼示例和安裝要求

您需要一些工具才能試用本教程中的代碼。所有這些工具都可以免費下載（參見參考資源）：

Java SDK 1.5 或更高版本的 JDK；
Eclipse Europa 或更高版本；

JavaFX 簡介

關於 JavaFX

JavaFX 是一個爲了應對快速開發高交互性的跨平臺應用的挑戰而誕生的解決方案。目前它包括兩個部分：JavaFX Script 和 JavaFX Mobile。JavaFX Mobile 主要是爲了開發移動終端應用而設計，本文主要討論 JavaFX Script。以下內容如果不特別指出，JavaFX 均指JavaFX Script。

JavaFX 最大的優點是它強大而簡單的 UI 設計能力。使用其簡單的腳本聲明式語法，利用其基本組件，就能非常容易的設計出非常漂亮，用戶感受極佳的應用程序界面。在下面的例子中您將體驗到用 JavaFX 設計出來的精彩界面。

簡單的語法是 JavaFX 的另外一個優點，它使用腳本聲明式的語法。簡單的語法卻仍然讓 JavaFX 具有強大的處理能力。尤其對數組，JavaFX 提供了非常強大的支持，支持類似 XPath一樣用點號訪問數組中的內容，並且更引入了類似 SQL 語言的數組元素查詢功能！除此之外，JavaFX 還支持面向對象的編程思想，支持類，繼承等。並且與 Java 的單繼承不同，JavaFX 支持多繼承。

作爲 Java 世界的一個新成員，JavaFX 生來便具有了 Java 的很多優點，比如跨平臺，有 JRE 的地方就能運行 JavaFX。並且你能夠在 JavaFX 的代碼裏面引入 Java 的類，有了 Java 的支持，大大的增強了 JavaFX 的競爭力。

體驗 JavaFX 界面

爲了更快地體驗 JavaFX 帶來的豐富界面，我們先來快速地瀏覽幾個 JavaFX 官方網站上提供的應用示例。在 Open JavaFX 官方網站頁面上大家可以找到許多 JavaFX 的應用示例。我們可以隨便挑選一個！

點擊：JavaFX Script Studiomoto Demo，選擇“下載 JNLP 文件到本地”。
用 Java Web Start 打開下載到本地的 studiomoto.jnlp 文件。



如果您的 JDK 是通過嚮導安裝的，則默認情況下系統會自動使用 Java Web Start 打開 JNLP 文件。否則，您可以點擊右鍵，選擇“打開”，在選擇打開程序時指向您機器 JRE_HOME/bin 目錄裏面的 JavaWS.exe 這個程序。然後經過一段時間的下載，就會看到如下圖 1 程序運行界面了。其他例子的運行過程和本例基本相同。關於 JNLP 文件的介紹和本例 JNLP 文件內容的剖析，參見本教程部署 JavaFX 小節。

圖 1. JavaFX 程序運行界面

Hello World！第一個 JavaFX 應用

下面就將開始我們的 JavaFX 開發之旅！首先，我們將配置一個基於 Eclipse 的 JavaFX 開發環境；然後，我們將利用這個開發環境開發一個簡單的 Hello World 應用，同時我們將解釋一些 JavaFX 腳本編程的基本概念。

搭建 Eclipse 開發環境

在開發之前我們通常需要做些準備工作，比如搭建好開發環境。在本教程中，我們將在 Eclipse Europa（Eclipse V3.3）環境中開發 JavaFX，我們假設您已經下載並且在計算機中安裝好了 Eclipse Europa 開發環境（關於如何下載和安裝 Eclipse Europa，請參見參考資源）。爲了使 Eclipse 支持 JavaFX 應用的開發，我們需要在 Eclipse 環境中安裝 JavaFX 開發插件，它給我們提供了一個 JavaFX 的編譯環境和開發的 IDE，能夠提供語法高亮和錯誤提示等基本功能，但是現在的版本功能還比較簡單。希望以後的版本能夠有大幅度的改進，畢竟好的開發環境可以促進語言的普及。

插件的安裝過程比較簡單，其步驟如下：

運行 Eclipse，選擇菜單 help -> software updates -> find and install，如下圖所示：

圖 2. 爲 Eclipse 安裝 JavaFX 插件
然後選擇“search for new features to install”：

圖 3. 爲 Eclipse 新建插件站點
點擊“New Remote Site”按鈕，新建一個遠程站點，可以任意輸入一個名字，例如本例中我們輸入“JavaFX”，然後輸入插件的安裝 URL：

http://download.java.net/general/openjfx/plugins/eclipse/site.xml
點擊“完成”按鈕，將進行一系列的安裝過程，在 Eclipse 重啓之後，插件就已經安裝完畢了。

創建 JavaFX 項目

安裝好 JavaFX 開發插件之後，我們可以在 Eclipse 中創建 JavaFX 項目，您可以按照下面的步驟創建：

從 Eclipse 的主菜單選擇 New --> Project，在選擇工程嚮導窗口中選擇 Java Project。

圖 4. 建立第一個 JavaFX 項目
給這個工程輸入個名字，本例名字爲 JavaFXHello，其它區域默認值即可。

圖 5. 爲第一個 JavaFX 項目取個名字
點擊 next。

圖 6. 其他部分默認即可
默認設置即可，點擊 Finish。

第一個 JavaFX 項目就已經建立起來了，您可以在 package explorer 視圖中看到項目的目錄結構，如下圖所示：

圖 7. 已經建立了第一個 JavaFX 項目

創建 JavaFX 文件

接下來，我們開始創建第一個 JavaFX 文件。

在 src 目錄上 右鍵 --> New --> Other，在彈出窗口中選擇 JavaFX --> JavaFX File：

圖 8. 新建一個 JavaFX 文件
點擊 next：

圖 9. 爲 JavaFX 文件設定一個名字
在文件名處輸入我們的第一個文件名：Mashup.fx，最後點擊 Finish。此時的視圖變成：

圖 10. 建立了第一個 JavaFX 文件

開發 Hello World 應用

到目前爲止，我們已經建立了一個 JavaFX 項目，並且建立了第一個 JavaFX 文件。那麼接下來我們將開始開發一個簡單的 JavaFX 應用程序：Hello World！

正如在 JavaFX 簡介中所介紹，JavaFX 提供了非常簡單的腳本式語言可以讓用戶快速的開發 UI 界面。因此，我們先來做一個最簡單的 Hello World 的 UI 界面。

雙擊 Mashup.fx，進入代碼編輯器，將下面的代碼複製進去。

清單 1. JavaFX 的 Hello World 程序
import javafx.ui.*;
Frame {
title: "Hello World JavaFX"
width: 200
height: 200

content: Label {
text: 'Hello World!'
}
visible: true
};
從代碼中可以看出，JavaFX 的程序非常簡單易懂：整個界面我們用一個 Frame 來表示，title/width/height 三個屬性分別用來設置 Frame 的標題、寬、高等信息。Visible 屬性爲 true，表示可見。Content 屬性表示這個 Frame 的 content 是一個 Label，而 text 又是爲這個 Label 設置顯示的文本屬性。JavaFX 的字符串可以放在一對雙引號 "" 或者一對單引號 '' 中,但是有點細微的區別，放在單引號中的所有字符都當作普通字符處理，但是如果放在一對 "" 雙引號裏面，則可以將變量用一對大括號 {} 括起來放到雙引號內，從而可以實現將變量和普通字符組合起來形成一個完整字符串的作用。

例如下例：

清單 2. JavaFX 的字符串處理
import java.lang.System;
var var1 = 'IBM';
System.out.println("Company： {var1} "); //輸出爲 Company: IBM
OK！第一個程序已經完成，下面我們來看看如何在 Eclipse 中運行：
運行。在 Mushup.fx 文件上 右鍵點擊 --> Run As -- > Open Run Dialog：

圖 11. 運行第一個 JavaFX 文件
在運行窗口中，選中 JavaFX Application 類型，然後點最左上角的“新建”，這個時候會生成一個名字叫做 New_configuration 的運行配置文件，在 Name 輸入框內將配置文件名字改爲我們的 JavaFX 文件名“Mashup”，並且點 Arguments 標籤，在 Program arguments 裏面輸入“Mashup”，最後點擊最下面“Run”按鈕運行程序。

圖 12. 進行必要的設置才能正確運行
程序運行界面如下：

圖 13. Hello World 程序界面

恭喜！我們的第一個 JavaFX 應用程序已經成功運行了！讓我們先喝杯咖啡，稍事放鬆，接下來我們將會用 JavaFX 開發一個更加複雜的應用界面，爲我們的 Mashup 應用做個鋪墊。

爲 Mashup 應用創建 UI

Mashup 這個詞語最近成了互聯網世界的一個熱門詞彙，各技術論壇都紛紛出現了它的身影。那麼什麼是 Mashup 呢？在開始我們的 Mashup 應用開發之前，我們來談談 Mashup 應用的特點。

什麼是 Mashup？

在最初的時候，Mashup 應用的含義只侷限於在一個頁面上集成了幾個網站的內容。比如，您可以在同一個頁面裏面顯示新浪的新聞、CSDN 的技術文章、淘寶網上正在拍賣的熱門款式相機等。這種簡單的內容集合就構成了最初的 Mashup 應用。

但是後來，Mashup 的應用得到了進一步的擴展，人們不僅單純的在一個頁面內顯示來自不同網站的信息，而且還對來自不同網站的信息進行處理，增加自己的業務邏輯，比如篩選過濾等等。爲了幫助人們快速的完成這種業務處理功能，各 IT 巨頭都提供了一些 Mashup 開發工具，比如 IBM 的 QEDWiki、微軟的 Popfly、雅虎的 Pipes 等。Mashup 在業界的受重視程度，可見一斑。

更多關於 Mashup 的資源，請參見參考資源中的相關文檔。

因爲所有的瀏覽器都實現了同源策略，即 JavaScript 腳本只與源於該腳本所屬頁面所在的同一服務器的元素進行交互。所以瀏覽器在跨域訪問數據的時候會存在安全性問題而受到一些限制。而 Mashup 應用在一個頁面內要與多個不同網站的數據進行動態交互，所以現在的 Mashup 應用有時候不得不將一些數據處理功能放到服務器端完成。即在服務器端與不同的網站數據進行交互處理，將最終的處理結果再傳回客戶端。而 JavaFX 作爲全新的 RIA 解決方案，可以脫離瀏覽器單獨運行，所以也就沒有了這樣的限制，從而在根本上使 Mashup 應用能夠擺脫瀏覽器安全性限制問題，更方便的創建 Mashup 應用。

關於 Mashup 應用示例

在本教程的後面，我們將構建兩個示例應用，用來演示如何利用 JavaFX 和 REST 風格的 Web service 來創建簡單的 Mashup 應用。我們首先利用 JavaFX 構建應用程序的 UI 界面，然後在此基礎上添加業務邏輯代碼來分別構建兩個不同的 Mashup 示例應用。在第一個示例應用中，我們將通過調用一個單一的 REST Web 服務 API 來實現股票查詢的功能。在後面的一個示例中，我們將從多個服務源中檢索數據，實現天氣預報和城市信息查詢的功能。

通過示例應用，我們將展示如何利用 JavaFX 調用 REST API 以獲得來自於互聯網的數據檢索服務，以及如何將返回結果與 JavaFX 界面組件之間進行綁定，從而實現查詢結果的顯示。

接下來，我們將首先利用 JavaFX 來構建 Mashup 示例應用程序的 UI 界面。

創建 Mashup 應用的 UI

清單 3 是創建 Mashup 示例應用 UI 界面的 JavaFX 腳本代碼。關於創建用戶 UI 界面的知識點在前面的章節中基本已經講過，只不過本示例更爲複雜，多用了一些 UI 組件，比如 SplitPane、SplitView、TextField 等。根據前面介紹的基礎知識您應該很容易看懂這部分代碼，它們只不過是給這些組件多設置了一些屬性而已，在此，將不作過多闡述。關於 JavaFX 的 UI 設計的更爲詳細的技術文檔和教程，可以參考本教程的參考資料。

清單 3. 建立 Mashup 應用的 UI 界面

                    
import javafx.ui.*; 

var stockSymbol = TextField { };
var zipCodeField = TextField { };

Frame {
    title: 'Mashup Application'
    visible: true

    content: SplitPane {
        orientation: HORIZONTAL
        content:
            [
            SplitView {
                weight: 0.5
                content:
                BorderPanel {
                    top: GridBagPanel {
                        border: CompoundBorder {
                            borders:
                                [
                                TitledBorder {
                                    title: 'Input Areas'
                                },
                                EmptyBorder {
                                    top: 5
                                    left: 5
                                    bottom: 5
                                    right: 5
                                }
                                ]
                            }
                        cells:
                            [
                            GridCell {
                                anchor: EAST
                                gridx: 0
                                gridy: 0
                                content: SimpleLabel {
                                    text: 'Stock: '
                                }
                            },
                            GridCell {
                                anchor: WEST
                                fill: HORIZONTAL
                                weightx: 1
                                gridx: 1
                                gridy: 0
                                content: stockSymbol
                            },
                            GridCell {
                                anchor: EAST
                                gridx: 0
                                gridy: 1
                                insets: {top: 2}
                                content: SimpleLabel {
                                    text: 'Zipcode: '
                                }
                            },
                            GridCell {
                                gridx: 1
                                gridy: 1
                                fill: HORIZONTAL
                                weightx: 1
                                insets: {top: 2}
                                content: zipCodeField
                            },
                            GridCell {
                                anchor: WEST
                                weightx: 1.0
                                gridx: 0
                                gridy: 2
                                gridwidth: 2
                                fill: HORIZONTAL
                                content: SimpleLabel {
                                    border: EmptyBorder {
                                        top: 10
                                    }
                                    text: "Input Some characters,Press Enter"
                                }
                            }
                        ]//end cells
                    }//end BorderPanel

                    center: BorderPanel {
                        border: CompoundBorder {
                            borders:
                                [
                                    TitledBorder {
                                        title: "Display Stock Price:"
                                    },
                                    EmptyBorder {
                                        top: 5
                                        left: 5
                                        bottom: 5
                                        right: 5
                                    }
                                ]
                            }
                            center: TextArea {
                                font: Font { face: SERIF style: ITALIC size: 16 }
                                lineWrap: true
                                wrapStyleWord: true
                                editable: false
                                text: ''
                            }
                        }                         
                    }
                },//SplitView
                SplitView {
                    weight: 0.5
                    content: SplitPane {
                    border: CompoundBorder {
                        borders:
                            [TitledBorder {
                                title: "Display Mashup Results:"
                            },
                            EmptyBorder {
                                top: 5
                                left: 5
                                bottom: 5
                                right: 5
                            }]
                        }
                        orientation: VERTICAL
                        content:
                        [SplitView {
                            weight: 0.5
                            content:EditorPane {
                                opaque: true
                                preferredSize: {height: 250 width: 250}
                                contentType: HTML
                                editable: false
                                text: ''
                            }
                        },
                        SplitView {
                            weight: 0.5
                            content: EditorPane {
                                preferredSize: {height: 250 width: 250}
                                editable: true
                                text: ''
                        }
                    }]
                }
            }
        ]
    }//end SplitPane
}// end frame

將清單 3 中的代碼複製到前面章節中建立的 Mashup.fx 文件中，然後和 Hello World 程序的步驟一樣：保存和運行。我們可以看到如下所示的運行界面：

圖 14. Mashup 應用程序的界面

現在，我們已經爲 Mashup 應用做好了鋪墊，我們利用 JavaFX 腳本輕鬆地描述並創建好了一個可執行的 UI 界面。

調用 REST API 實現 Mashup

在本節中，我們將給示例應用的 UI 界面添加一些業務邏輯代碼，通過調用互聯網網站提供的 REST 風格 Web 服務來檢索需要的數據，並將返回的結果與 UI 組件進行綁定，用於顯示結果數據，從而完成這個 Mashup 示例應用程序的開發。

Mashup 單一數據源

我們首先來做一個比較簡單的 Mashp 應用，只從單一網站獲取數據。我們希望在剛纔創建的 UI 界面的 Stock 輸入框中輸入股票代碼，比如 IBM，回車後程序會在“Display Stock Price”下面的文本框內顯示股票價格。

爲了達到上述目的，首先需要建立一個 JavaFX 類 RestService。這個類有兩個 String 類型的屬性（attribute），一個是 source 屬性，用來存放 Web 服務的 URL；另一個是 result 屬性，用來存放從 Web 服務中返回的數據。同時還定義了一個操作（operation）：update()，用來更新 result 中的內容。

代碼的位置加在剛纔的 Mashup.fx 文件的頂部，如下：

清單 4. 建立一個 JavaFX 類

                    
import javafx.ui.*; 
import java.net.URL; 
import java.lang.StringBuffer ; 
import java.io.InputStreamReader; 
import java.io.BufferedReader; 

class RestService { 
    attribute source: String ;//hold the url of web service
    attribute result: String ; //hold the data received from  web service
    operation update(); // update the result attribute when get data from a new source
}

operation RestService.update(){
// it means that this update() operation belongs to class RestService 
    var content = new StringBuffer(""); 
    var url = new URL( source ); 
    var is = url.openStream(); 
    var reader = new BufferedReader(new InputStreamReader(is)); 
    var line; 
    while (true) { 
        line = reader.readLine(); 
        if (line == null) { 
            break; 
        } 
    content.append(line); 
    content.append("\n"); 
    } // end while 
    is.close(); 
    result = content.toString(); 
}

JavaFX 中用關鍵字 class 來建立類，類可以有屬性（attribute），操作（operation）和函數（function），我們只用到了前兩者。語句：

attribute source: String ; //hold the url of web service

爲類 RestService 定義了一個屬性 source，其數據類型是 String 類型。JavaFX 語言提供四種基本類型：String（字符串）、Boolean（布爾）、Number（數值）和 Integer（整數）。JavaFX 的操作有點像 Java 中的方法（Method），但是操作的定義都在類定義之外，用點號（.）來表示操作和類之間的從屬關係。

下面的代碼，我們建立了一個 RestService 類的實例：

清單 5. 建立類的實例

                    
var restStockService = RestService { 
    result: "Stock price area initialized" 
    source: "http://quote.yahoo.com/download/javasoft.beans?SYMBOLS=IBM&format=p" 
};

和前面創建 UI 界面時的語法很類似，我們給 RestService 類的兩個屬性賦予了兩個初始值。

那麼如何能讓 Stock 輸入框中輸入股票代碼，回車後“Display Stock Price”下面的框內自動顯示股票價格呢？爲了達到這個目的，我們要建立一種關聯。首先需要給輸入框 stockSymbol 指定回車後的動作：

清單 6. 給輸入框 stockSymbol 指定動作

                    
var stockSymbol = TextField { };
stockSymbol.action = operation() {
    restStockService.source=
    "http://quote.yahoo.com/download/javasoft.beans?SYMBOLS={stockSymbol.value}&format=p";
    restStockService.update();
};

從代碼中可以看出，指定動作是通過設定 action 來實現的。在觸發該輸入框回車事件後，先讓 RestService 類的實例 stockSymbol 的 source 屬性賦值爲指向 REST API 的 URL，然後再調用類實例的 update() 方法去更新類實例的 result 屬性。

其次，我們需要完成關鍵的一步，即屬性的綁定。我們將 “Display Stock Price”下面的顯示框，也就是那個 TextArea 組件的 text 屬性通過 bind 關鍵字綁定到 restStockService 對象的 result 屬性上去。從而，當 restStockService 的 result 屬性值發生變化的時候，TextArea 的 text 屬性，也就是它的顯示內容也會動態發生變化，從而實現結果的顯示。看起來十分地簡單！

清單 7. 將 UI 組件 TextArea 的 text 屬性綁定到 restStockService.result

                    
center: TextArea {
    font: Font { face: SERIF style: ITALIC size: 16 }
    lineWrap: true
    wrapStyleWord: true
    editable: false
    text: bind restStockService.result
}

保存代碼，運行。在 Stock 輸入框中輸入 IBM，我們將會看到下面的結果：

圖 15. 用 Web service 來獲得 IBM 股票價格

Mashup 多個數據源

前面我們已經通過調用一個 API 來實現了股票查詢功能，接下來我們再稍微增加一點複雜性，將從多個數據源中獲取數據。我們將用到兩個 Web 服務：一個是 Yahoo! 的天氣搜索的 API，比如我們需要搜索 ZipCode 是 94089 的城市的天氣情況，那麼可以調用它的服務 API ：

http://weather.yahooapis.com/forecastrss?p=94089

另一個是 sunlightlabs 提供的 API，可以獲得某個城市的信息。比如您給定一個 ZipCode，如 94105，您可以通過以下的 API 來獲得信息：

http://api.sunlightlabs.com/places.getCityStateFromZip.php?zip=94105&apikey=23kj234kjb3kjbcl87ds

其中 apikey 是網站提供的一個認證密鑰，您使用本例中給出的這個就可以。通過這個 API 將返回一個 JSON 格式的結果數據：

{ "zip" : "94105", "city" : "San Francisco", "state" : "CA" }

可以看出，它表示這個城市的 ZipCode 是 94015，城市名稱是 "San Francisco"，州的縮寫是“CA”。

爲了消費這兩個服務，我們需要再建立兩個 RestService 的實例，代碼如下：

清單 8. 再建立兩個 RestService 類的實例

                    
var weatherService = RestService { 
    result: "" 
    source: "http://weather.yahooapis.com/forecastrss?p=94105" 
}; 
var locationInfoService = RestService { 
    result: "" 
    source: "http://api.sunlightlabs.com/places.getCityStateFromZip.php?zip=
        94105&apikey=23kj234kjb3kjbcl87ds" 
};

上面的例子一樣，給 ZipCode 輸入框設定動作，但這次同時更新兩個 RestService 類的實例的 result 屬性：

清單 9. 給 ZipCode 輸入框設定動作

                    
var zipCodeField = TextField { };
zipCodeField.action = operation() {
    weatherService.source=
    "http://weather.yahooapis.com/forecastrss?p={zipCodeField.value}";
    weatherService.update();
    locationInfoService.source=
        "http://api.sunlightlabs.com/places.getCityStateFromZip.php?zip=
        {zipCodeField.value}&apikey=23kj234kjb3kjbcl87ds";
    locationInfoService.update(); 
};

最後需要給界面中右側的兩個結果顯示窗口分別綁定 text 屬性到新建的 RestService 類的兩個實例的 result 屬性上去，用於顯示結果。

保存，運行！在界面裏面輸入一個 5 位的數字將會看到下面的界面。

圖 16. 最終的程序界面

到此爲止，我們的 Mashup 應用已經基本建立起來了。但是大家可以看到，從 http://api.sunlightlabs.com 返回的數據只是原始的 JSON 格式數據，限於篇幅，本教程沒有對數據進行進一步的解析處理。讀者在學完這個教程之後，可以自己動手去嘗試對返回的 JSON 數據進行進一步的處理。甚至可以將進一步處理的結果作爲參數去調用第三個網站的 API，從而構建更復雜的 Mashup 應用。

本示例的源代碼可以在本教程的源代碼下載中得到。

部署 JavaFX

我們的 Mashup 例子剛纔只是在 Eclipse 的 IDE 中運行。但是正如我們在體驗 JavaFX 界面一節中看到的那樣，Openjfx 項目的官方網站的 JavaFX 例子都是將 JavaFX 應用部署在網絡上的。客戶通過加載 JNLP 文件就可以用 JWS（Java Web Start）來運行。

爲了將我們的應用也部署到服務器上，我們就首先要了解一下 JNLP 文件。

JNLP（Java Network Launching Protocol，Java 網絡加載協議）。一個 JNLP 客戶端就是一個應用程序或者說服務，它可以從宿主於網絡的資源中加載應用程序。如果您使用 JNLP 打包一個應用程序，那麼一個 JNLP 客戶端能夠：

爲該應用探測，安裝並且使用正確版本的 JRE（Java 運行時環境）
從瀏覽器或者桌面加載應用程序
當新版本的應用出現時自動下載最新的版本
爲了加速啓動速度在本機緩存應用程序需要的類
可以作爲 applet 或者 JavaFX 應用程序運行
在必要的情況下下載原始的庫
以安全的方式使用諸如文件系統這樣的本機資源
自動定位和加載外部依賴資源

Sun 公司提供了一個 JNLP 的參考實現，即 Java Web Start（JWS）。

下面我們來探索一下 JNLP 文件的內容，用文本編輯器打開前面下載的 studiomoto.jnlp 文件，其內容如下：

<?xml version="1.0" encoding="utf-8"?>
<!--codebase 屬性指出搜索應用程序資源的頂級 URL，
下面的 jar 元素的 href 都是相對這個 URL 的相對路徑--> 
<jnlp 
    spec="1.5+" 
    codebase="http://download.java.net/general/openjfx/demos"
    href="studiomoto.jnlp">
    <information>
        <!--title ：應用程序標題 vendor：供應商-->
        <title>JavaFX Demos:Motorola Music</title>
        <vendor>Sun Microsystems</vendor>
        <!-- 允許離線啓動，可以使用javaws -offline命令-->
        <offline-allowed />
    </information>
    <security> 
        <all-permissions/>   
    </security> 
    <resources>
    <!-- 指定客戶端需要安裝的 JDK 版本和運行時參數，下面指定爲1.5+，
    如果客戶端現在版本是 1.4，在鏈接此 JNLP 文件時會提示更新 JDK 版本-->
        <j2se version="1.5+" href="http://java.sun.com/products/autodl/j2se"
        java-vm-args="-Xss1M -Xmx256M"></j2se>
        <!-- 指定要下載到本地的jar文件 -->
        <jar href="JavaFXrt.jar" main="true"/>
        <jar href="Filters.jar"/>
        <jar href="swing-layout.jar"/>
        <jar href="studiomoto.jar"/>
    </resources>
    <!--application-desc 指定 webstart 啓動時執行 jar 文件中的哪個類-->
    <application-desc main-class="net.java.JavaFX.FXShell">
        <argument>studiomoto.StudioMoto</argument>
    </application-desc>
</jnlp>

配置文件的含義我已經在裏面加以註釋，由此我們可以看出程序主要是運行 studiomoto.jar 裏面的代碼。

根據以上對 JNLP 相關知識的介紹，我們可以看到，爲了部署我們的應用：

首先要將我們的 JavaFX 的代碼和引用的其他類庫代碼打包成相應的 Jar 文件部署到服務器上。關於 Jar 文件打包，解包使用簽名等問題可以參見參考資源。
然後按照上面的 JNLP 文件的格式編寫自己的 JNLP 文件，並且將 JNLP 文件也部署到服務器上，注意 JNLP 文件和 Jar 文件的路徑問題，確保 Jar 文件能夠正確的被加載到客戶端。

限於篇幅，本文就不提供 JNLP 文件內容了，您可以在閱讀完上述 JNLP 文件介紹後，自己動手將我們的 Mashup.fx 文件打包成一個 Jar 文件，並且編寫相應的 JNLP 文件完成應用的部署工作。

通常來說，模仿是快速提高知識的一個有效途徑。爲了加深我們對 JavaFX 的理解，我們可以將例子的×××到本地加以研究。根據上述 Demo 的 JNLP 文件 codebase 和文件名的組合得到 studiomoto.jar 文件的地址：http://download.java.net/general/openjfx/demos/studiomoto.jar。將該 Jar 文件下載到本地，由於 JavaFX 是腳本語言，我們還可以看到它的代碼。

圖 17. JavaFX 官網例子的代碼結構

研究這些源碼可以很好的提高您的 JavaFX 編程能力。

結束語

本文教程中，我們儘量結合例子，將 JavaFX 的產生背景、基本語法、UI設計、類的概念穿插進來。最後我們完成了一個界面比較複雜，並且使用 REST Style 的 Web 服務構建的 Mashup 應用。在各種 RIA 解決方案共存的情況下，JavaFX 的出現憑藉它簡單的語法，天生的跨平臺，Java 類庫強大的支持肯定會在 RIA 的領域佔有一席之地。但作爲新鮮面孔，要成爲一枝獨秀，我想 JavaFX 恐怕還要有一段比較長的路要走，讓我們拭目以待吧！

下載

描述	名字	大小	下載方法
本教程示例應用程序的源代碼	JavaFxHello.zip	4 KB	HTTP

參考資料

學習

JavaFX 的官方站點：這裏有 JavaFX 參考實現項目 Openjfx 更爲豐富的信息。
JavaFX 的官方 Demo：可以找到更多在線的 JavaFX 應用演示。
JavaOne 2007：Sun 在客戶端的迴歸：瞭解關於 JavaFX Script 的評論。
JavaFX 語言參考：介紹 JavaFX 基本語法和概念的文章。
JavaFX UI 設計參考：指導您如何利用 JavaFX 設計 UI。
JavaFX 語言 API 參考：非常全面的 UI 類庫 API 參考。
MotoStudio 例子的 JNLP 文件：可以下載研究 MotoStudio 的 JNLP 部署文件。
Lesson: Packaging Programs in JAR Files：關於 JAR 文件打包解包簽名等的非常詳細的教程。

zz javafx應用

使用 Eclipse 和 JavaFX 開發 Mashup 應用

zz javafx應用

java程序員求職手冊

階段總結

我的友情鏈接

面試題目

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結