初探JavaFX Mobile技術架構與應用
以開發人員角度來看，JavaFX Mobile在開發速度比起其它技術平台，快了許多，因為它的開發介面及部署方式簡單且容易使用，最重要的是它的跨平台特性，將來只要開發好JavaFX Mobile應用程式，就可以在如iPhone、Android、Windows mobile等等手機上或是手持式裝置、Mobile TV、桌上型電腦等等有支援JavaFX的硬體設備上執行，對開發人員來講是蠻值得投資。

JavaFX是Java技術平台的擴充，讓Java產品，從J2EE伺服器端程式到使用者端，如網頁程式應用、桌面程式應用、手持式裝置應用，一直到提供更加豐富美觀的高品質影音、動畫、遊戲等多媒體的應用，及更多互動的使用者介面RIA技術平台JavaFX，應用非常廣泛，而其中的JavaFX Mobile即是JavaFX技術的延伸。


JavaFX Mobile技術簡介
就如Sun官方所言，它是建構在現有的Java Platform Micro Edition(Java ME)基礎上，而目前已有超過26億支的手機已內建有Java ME平台，所以你使用JavaFX Mobile技術所寫的手機程式，將來很容易就可在現有的基礎上執行，在官方的網站也有建議，如何將現有手機上的MIDlet應用程式，改寫成介面更美觀的JavaFX Mobile(http://javafx.com/docs/articles/midlet/)。

JavaFX技術平台如圖1，最頂層是Applications and WebServices，這一層就如我們這篇會開發一個台灣各地方天氣的查詢應用程式，App FrameWork有Mobile、Desktop、TV的Runtime及Extensions。最底下一層就是支援各式各樣的設備，其中的Common Platform，就是你在撰寫程式時要注意是否要跨各種平台，包含一般電腦、手持式裝置、TV等，使用的API需為JavaFX Common Profile。這個Profile是包含在DeskTop Profile之下，有部分的DeskTop Profile的API在Common Profile是不支援的，如javafx.ext.swing、javafx.reflect、javafx.scene.effect…等套件，所以在撰寫手機程式時需特別留意。


▲圖1：JavaFX Platform。(來源http://www.javapassion.com/)


JavaFX Mobile與MIDlet
雖然MIDlet與JavaFX Mobile都是小型手持式裝置的開發平台，且兩者都是建立在Java ME的基礎上，但兩者以目前的狀況來看是可以並存的，因為超過26億支的手機已內建有Java ME平台，且大部份支援Java的手機程式都是以MIDlet開發，而目前JavaFX Mobile比較明朗的支援硬體廠商，只有LG Electronics、Sony Ericsson與MobiTV，在還不是很普遍的情況下，MIDlet依然是主要平台。

不過長久來看的話，要支援更豐富、更美觀的使用者介面及互動式多媒體、影音、動畫的技術，或是硬體廠商實作Java手機規格的統一性，未來還是有可能會以JavaFX Mobile開發的應用程式，取代MIDlet開發的應用程式，但MIDlet的平台還是會存在，因為有太多的開發者或手機程式目前還是使用MIDlet居多，JavaFX Mobile在短期內無法完全取代，但未來值得期待。

Java ME最為人詬病的，就是各家硬體廠商對JSRs(Java Specification Requests)規格實作不一致，導致開發人員在開發時的困擾，這也喪失了Java自己強調的跨平台特性。在未來支援JavaFX Mobile的手機廠商是否可以大幅改善這個問題，還要看硬體廠商與Sun的合作情形，但一般來講只要實作JavaFX Mobile的裝置，以目前手機模擬器版本來看的話，Java ME 這層應該至少會支援CLDC1.1+MIDP2.1以上版本，其它實作的JSRs如圖2。


▲圖2：JavaFX Mobile架構圖。(來源http://www.javapassion.com/)

其它如藍芽、GPS定位等API，以目前的情況，要使用這些功能還是要看下一層Java ME MSA(Mobile specific APIs)有無實作藍芽(JSR 82)、GPS定位(JSR 179)。


手機應用程式開發範例簡介
本文討論的開發應用程式範例，主要是讓手機能夠透過網路來查詢台灣各地方的天氣狀況，簡單的顯示當天的溫度及氣候情形及產生一秒鐘左右晃動的動畫效果，以及會預報兩天內的氣候狀況跟最高、最低溫。

我們以透過Yahoo! Weather API取得天氣的相關資訊的XML檔案，經過解析後，將相關欄位資訊放入我們應用程式對應的label元件屬性Text，即可動態查詢當天天氣，及可以作華氏及攝氏溫度的轉換。你也可以以同樣方式開發其他類似Google API的應用，只要能透過網路Service取得相關應用的XML檔案，即可做各式各樣的服務跟應用。

Yahoo! Weather API相關欄位說明
我們先到該API開發網頁的說明網址參考 http://developer.yahoo.com/weather/，因為是透過http get方式取得相關應用，所以request參數如表1。




其中w=2306182代表台灣台南市的code，查詢網址為http://weather.yahoo.com/，在Enter city or zip code欄位輸入台南，及可由網址列查出一串數字的code，即是代表該城市，將來查詢該地溫度都會用到這code，其它台灣各地代表code也是以同樣方式取得，這樣我們就可透過[http://weather.yahooapis.com/forecastrss?w=2306182&u=c]網址查詢該地氣候，顯示的網頁如圖3，其實是個XML檔案。


▲圖3：XML天氣圖檔。

我們會用到的XML標籤及屬性，如表2，還有很多我沒列進來，只列有用到的部分。接下來再透過程式取得的相關標籤，就可動態的將其顯示在手機應用程式上了。





開發前的準備工作
需要下載的開發工具，以筆者寫這篇文章時最新版本為主，尤其是Java編譯器更新速度非常快，可以隨時上官方網站查詢：
●JDK 6 Update 18：http://java.sun.com/javase/downloads/widget/jdk6.jsp。
●NetBeans IDE 6.8 for JavaFX 1.2(已包含JavaFX編譯器)：http://javafx.com/downloads/windows.jsp。
●學會JavaFX Script語法：http://java.sun.com/javafx/1/tutorials/core/。
●學會JavaFX GUI元件的使用：http://java.sun.com/javafx/1/tutorials/ui/。

當然以上第二個下載你也可以選擇 JavaFX 1.2.1 Plugin for Eclipse，但對於JavaFX的支援目前還是以 NetBeans 最好，且在編輯 JavaFX 的畫面的工具已有拉放即見即所得的功能。

按照上面步驟完成安裝後，開啟 NetBeans IDE，在功能表選單選Tools→Plugins，如圖4點 Availabel Plugins的tab，勾選JavaFX Composer元件，按下Install安裝，這個功能主要是讓開發工具可以拉放方式開發JavaFX圖形使用者介面的即見即所得的方式編寫畫面。


▲圖4：下載安裝 Plugins JavaFX Composer。

由於 NetBeans IDE 與 JavaFX emulator (手機模擬器)對多國語言及特殊符號的支援程度還有些問題，尤其是手機模擬器還有些 bug，畫面元件在 Design 階段輸入中文及顯示圖檔格式為 gif 時沒問題，但在runtime的時候就會出現亂碼及無法顯示 gif圖檔格式。

而支援的其他圖檔格式png、jpg 無論在 Design 階段或是 runtime 階段都沒問題，所以我在這主題的程式撰寫會以英文及 png 圖檔為主。因此Yahoo! Weather API提供的氣候圖檔「*.gif」就無法使用，這些問題得等到下一版本或許可解決，當然我們也盡量避免亂碼問題，可先做一下相關設定。

修改[.\NetBeans 6.8\etc\]目錄下的檔案netbeans.conf裡的這行「netbeans_default_options=”……….”」，最後面引號前空一格，加入編碼參數「-J-Dfile.encoding=UTF-8」，以及在NetBeans IDE的功能表選Tools→Options的 Fonts & Colors， Syntax的Default字型選DialogInput，而Size選14，如圖5，這應該是目前在網路上很多人討論後，較佳的NetBeans IDE開發環境設定。


▲圖5：設定字型。

而手機模擬器環境設定在[.\NetBeans 6.8\javafx2\javafx-sdk\emulator\toolkit-lib\process\device-manager\conf]目錄底下，可以找到 4 種不同類型手機的環境設定，我們設定DefaultFxPhone1.properties裡這行profiler.enabled:true，及runtime.internal.microedition.locale: zh-TW，其他類型手機設定相同，你也可以設定其他參數如記憶體配置、旋轉手機等，依自己開發手機時的須求去設定執行時期的環境。

至於開發時需查看手機模擬器版本資訊，只要在你程式碼寫上一段「println("版本:{FX.getProperty("javafx.me.profiles")}");」，即可顯示Java ME、JavaFX版本資訊MIDP-2.1 JAVAFX-1.2。

而如果要判斷你執行時期的環境是desktop或mobile或browser，只要寫上一段變數如下：




注意，變數字母左右兩邊是每邊各兩個下加底線，一般要寫跨平台的應用，這個變數很重要，可以作為你調整顯示螢幕大小或選擇一些特效動畫的應用。


開始專案建置開發
選NetBeans IDE的選單功能表File→New Project如圖6，找到JavaFX Mobile Business Application，按Next如圖7，輸入專案名稱、專案放置路徑後按Finish，即會產生兩個檔案Main.fx(畫面編輯檔案)、Main_run.fx(執行檔案)。


▲圖6：建置JavaFX Mobile Business Applications專案。


▲圖7：輸入專案名稱及放置位置。

我們選專案按右鍵選Porperties，如圖8，選Run的Run in Mobile Emulator，其中的Device下拉式欄位，就是我們在之前提過的4種不同類型手機的環境的設定，我們選第一個預設即可，當然你也可以選其它如觸控螢幕、標準鍵盤手機等。


▲圖8：選擇手機模擬器。

完成後先在package weather底下再建立一個存放圖檔的package weather.images，如圖9，然後將會用到的圖檔都複製進來，我專案放置的地方的這個package weather.images的目錄是在[.\code_project\netbeans_prj\Weather\src\weather\images]，所以我把圖檔全部複製進去該目錄，這樣我們在編輯畫面時，就可以直接引用Porject Images，在Scene加入背景圖或其它圖形，如圖10。


▲圖9：建立Java Package。


▲圖10：加入背景圖檔。

NetBeans IDE 開發工具介面簡介如圖11，然後將我們會用到的元件拉進來及設訂屬性如圖12，如要設定元件更多屬性請按屬性區的小圖示，我們這個應用程式會用到VBox、HBox、List View、Label、Toggle Button、Image、Image View 等元件。


▲圖11：手機背景底圖。(來自http://ultrawallpaper.com/)


▲圖12：各UI元件操作說明。

我們設定 List View 元件的 Items，點一下畫面 listView 的 右邊屬性視窗的Items 屬性按鈕如圖13，然後如圖14輸入項目，一行一筆。而Label的屬性Text，我們要動態繫結相關的字串值，如圖15，及如圖16寫code指定變數值。


▲圖13：新增listView的項目。


▲圖14：listView各項目值。


▲圖15：繫結變數。


▲圖16：至程式編輯區寫變數值。

依序將需要元件陸陸續續加入後，其中List View及Toggle Button元件需寫事件方法，在編輯畫面選該元件，點選右下的屬性視窗event的小圖示，會有如鍵盤及滑鼠事件方法如On Key Pressed、On Key Typed、On Mouse Clicked等，如圖17，按Generate來產生相對應事件的方法，會跳到程式編輯視窗寫code。


▲圖17：寫滑鼠或鍵盤事件程式碼。

而所有元件加入後的階層結構及畫面如圖18及圖19，其間的元件屬性設定，如字型大小、顏色、擺放位置、寬度、高度、透明度、字體置中、置底、置頂、靠左、靠右，就不再贅述，由各位自行去排列。執行結果可參考圖20。


▲圖18：各UI元件樹狀結構圖。


▲圖19：UI設計完成。


▲圖20：執行結果。


程式範例說明
以上編寫的畫面產生的程式碼是Main.fx，而我們開發專案範例還需透過Yahoo!API天氣服務取得XML 內容的程式碼RequestHandler.fx，及天氣的內容物件程式WeatherContent.fx，透過NetBeans IDE右鍵選單New→JavaFX Class建立，還有解析XML語法的程式XMLParser.fx，這個要選New→Empty JavaFX File建立。

Main_run.fx這支是開發環境專案的執行檔，Main.fx這支則是使用者介面的主程式，我們由圖19與圖20比較，可以知道圖19有很多 Label 元件繫結變數值，在 Design 階段會以 符號顯示，程式碼如下：




而其它 label 元件繫結的變數值同理就不再列出，我們再看看變數：




完整內容請參考：RUN!PC雜誌2010年4月號；礙於篇幅有限，本文相關完整程式碼，請至www.runpc.com.tw網站下載。