JavaFX 1.0入門

 

Sun終於在上週四(04-12-2008)發佈了我們期盼已久的JavaFX 1.0版本。Sun想借助JavaFX這個強大的開發平臺，把Java在服務器端的輝煌擴大到包括瀏覽器和桌面在內的客戶端領域。這樣，Sun就可以在競爭激烈的RIA(Rich Internet Applictions)領域中和Adobe的Flex及Microsoft的Silverlight一較高下。筆者以前針對JavaFx0.0.2版本寫過一篇短文(見http://blog.csdn.net/carlwu/archive/2008/05/09/2419776.aspx)，指出了JavaFX的四點不足之處。但從剛剛發佈的JavaFX1.0來看，Sun改進了其中的三個缺點，即在JavaFX開發工具、JavaFX對多媒體影像的支持、JavaFX的網絡部署等方面有了很大的進步。所以，我覺得JavaFX1.0現在雖然還稍稍落後於Silverlight和Flex，但JavaFX可能會對我們的實際項目有所幫助，尤其對我們廣大的Java開發者而言。<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

Sun對JavaFX的簡單介紹請參見http://www.javafx.com/launch/win-player.jsp， Sun提供了幾段令人印象深刻的演示。其中，JavaFX和Photoshop的集成對我們開發者來說可能關係不大，JavaFX媒體播放器、JavaFX的拖拽功能及JavaFX的3D圖片展示可能會另我們耳目一新。Sun直言，JavaFX將對我們Java開發者、Web開發者及圖像設計者會有所裨益。我也衷心希望Sun藉助JavaFX平臺在RIA領域能有所作爲。

下面我們就開始我們的JavaFX的入門之旅，簡單領略一下JavaFX的魅力。

1. 準備工作

首先，您得從http://www.javafx.com/downloads/windows.jsp下載NetBeans 6.5，同時升級您的JDK到最新版本(我的本機爲JDK6u11)。

2. 請打開NetBeans，新建一個項目，項目類型選擇JavaFX，然後輸入項目名稱HelloJavaFX，同時創建主項目文件hellojavafx.Main；

3. NetBeans會創建一個缺省的JavaFX項目，我們打開Main.fx，將下面的源代碼覆蓋NetBeans自動生成的代碼：

1. /*
2.  * Main.fx
3.  *
4.  * Created on 2008-12-9, 17:05:46
5.  */
7. package hellojavafx;
8. import javafx.animation.Interpolator;
9. import javafx.animation.KeyFrame;
10. import javafx.animation.Timeline;
11. import javafx.scene.effect.DropShadow;
12. import javafx.scene.paint.Color;
13. import javafx.scene.paint.RadialGradient;
14. import javafx.scene.paint.Stop;
15. import javafx.scene.Scene;
16. import javafx.scene.shape.Circle;
17. import javafx.scene.text.Font;
18. import javafx.scene.text.Text;
19. import javafx.scene.text.TextAlignment;
20. import javafx.scene.transform.Scale;
21. import javafx.stage.Stage;
23. /**
24.  * @author carlwu
25.  */
26. var scale = 1.0;
27. var color = Color.YELLOW;
28. Timeline {
29.     repeatCount: Timeline.INDEFINITE
30.     keyFrames: [
31.         KeyFrame {
32.             time: 5s
33.             canSkip: true
34.             values: [
35.                 scale => -1.0 tween Interpolator.EASEBOTH
36.                 color => Color.GREEN
37.             ] // values
38.         } // KeyFrame
39.     ] // keyFrames
40. }.play();
41. Stage {
42.     title: "/u6211/u7684/u7b2c/u4e00/u4e2aJavaFX"
43.     width: 250
44.     height: 250
45.     scene: Scene {
47.         content: [
48.             Circle {
49.                 centerX: 100,
50.                 centerY: 100
51.                 radius: 90
52.                 fill: RadialGradient {
53.                     centerX: 75
54.                     centerY: 75
55.                     radius: 90
56.                     proportional: false
57.                     stops: [
58.                         Stop {
59.                             offset: 0.0
60.                             color: Color.BLUE},
61.                         Stop {
62.                             offset: 1.0
63.                             color: Color.YELLOW}
64.                     ] // stops
66.                 } // RadialGradient
68.                 radius: 90
69.                 fill: Color.RED
70.             }
71.             Text {
72.                 font: Font {
73.                     size: 24
74.                 }
75.                 x: 20,
76.                 y: 90
77.                 textAlignment: TextAlignment.CENTER
78.                 content:"/u6b22/u8fce/u8fdb/u5165 /nJavaFX /u7684/u4e16/u754c"
79.                 fill: bind color
80.                 effect: DropShadow {
81.                     offsetX: 10
82.                     offsetY:10
83.                     color: Color.color(0.1, 0.3, 0.1)
84.                 };  // DropShadow
85.                 transforms: Scale{
86.                     x: 1
87.                     y: bind scale
88.                     pivotX: 100,
89.                     pivotY: 100
90.                 } // Scale
91.             } // Text
92.         ]
93.     }
94. }

然後，右擊Main.fx文件，先編譯然後運行該文件，運行效果如下：

 

 

您會看到窗口上的兩行字的動畫效果。上面的代碼非常簡單，其中，Timeline類似於Flash中的時間線的概念，隨着時間線的推移，關鍵幀發生變化，所以產生動畫效果。另外，Stage就相當於以前Swing中的Window，是最頂級的容器；Stage中包含了次級的容器Scene 的實例scene，這相當於以前的Graphics畫布對象，scene對象中又包含了一個Circle對象和Text對象，代碼的結構還是相當清楚的。JavaFX是一種聲明式的腳本語言，但它不是動態語言。關於JavaFX腳本語言的細節及API，請參考Sun的JavaFX教程http://java.sun.com/javafx/1/tutorials/core/，在此我就不多說了。

4. 關於JavaFX的部署

JavaFX模糊了桌面應用和網絡應用的概念，就上面的簡單示例來說，請在資源管理器中打開該項目所在的目錄，您會發現該目錄下有一個dist的子目錄，子目錄中包含了一個HelloJavaFX.jnlp的Java Web Start的啓動文件，如果您雙擊該文件，它就會啓動Java Web Start，您此時的應用就是一個桌面應用程序；另外，dist子目錄下還有一個HelloJavaFX.html文件，如果您在瀏覽器中打開這個文件，您應看到如下圖所示的效果：

 

 

 5. JavaFX小結

通過上面簡單的示例，我們可以看到，JavaFX是Sun公司下一代RIA技術的代表，它在多媒體的支持、IDE集成、拖拽功能、對移動開發的支持及和其它技術的集成上面，都有可圈可點之處。如果您對RIA開發有興趣，不妨抽時間可以學習一下JavaFX。另外，我覺得Sun還可以在IDE上多下工夫，真正做到“所見即所得”的效果，雖然現在JavaFX有預覽的功能。另外，Eclipse的JavaFX1.0插件也不知何時能推出？