Web UI Design

Sun确实反应太慢，在Adobe Flash平台已经可以开发产品级RIA应用的时候，它给出的road map还是慢慢腾腾： 

2008年7月，Sun将开放JavaFX Desktop SDK 
2008秋，JavaFX Desktop 1.0 发布 
2009春，JavaFX Mobile and TV 1.0发布 

也就是说，截至今天，1.0依然在按计划进行中，我们体验的只是Preview版本（Sun也不建议用这个版本进行产品开发）,似乎让人灰心，但没关系，相信Sun可以后来居上，譬如NetBeans之于Eclipse（当然它们至今仍未分高下）。从上面也可以看出，JavaFX Desktop和JavaFX Mobile and TV 都会发布，似乎又回到了1995年时候的Sun目标。 

OK,先让我们来看一下JavaFX到底是什么。 
JavaFX Preview SDK 是JavaFX platform的体验版本。这一版本是定位于web脚本开发人员和那些想事先体验JavaFX技术和工具的家伙。这一SDK同样包含"Nile Project"，这是一套工具和插件，能让脚本开发人员用拖放的方式建立图形化的东西。运行JavaFX Application需要： 
1.Java SDK 1.6 Update 7或更新，最好是Update 10 
2.JavaFX Preview SDK （上面说了，JavaFX SDK 1.0还在娘胎中），请下载Netbeans IDE 6.1 with JavaFX： http://javafx.com/htdocs/downloadpage.html 
 

而开发JavaFX，则需要写JavaFX Script，这是一种新的脚本语言，旨在方便高效地创建图形界面及绑定数据，而这个所谓的图形界面，最终调到的是swing，但需要注意： 
1.JavaFX能提供Swing所没有的一些Widgets 
2.对Swing组件的的操作，使用JavaFX Script可能有所限制，也即是说，Swing里面对图形界面元素控制的一些方法或属性，在Java FX里面可能不存在。 
下面是用JavaFX开发的一个Clock，其实Swing也完全可以做到： 
 

JavaFX Script看上去： 

package myclockproject;  
  
import javafx.application.Frame;  
import javafx.application.Stage;  
import javafx.scene.CustomNode;  
import javafx.scene.Group;  
import javafx.scene.Node;  
import javafx.scene.geometry.Circle;  
import javafx.scene.paint.Color;  
import javafx.scene.geometry.*;  
import javafx.scene.text.Text;  
import javafx.scene.Font;  
import javafx.scene.FontStyle;  
import javafx.scene.transform.Translate;  
import javafx.scene.transform.Rotate;  
import javafx.scene.image.ImageView;  
import javafx.scene.image.Image;  
  
import java.util.Date;  
import java.lang.Math;  
import javafx.animation.Timeline;  
import javafx.animation.KeyFrame;  
import javafx.ext.swing.Button;  
  
Frame {  
  title : "Java FX Clock Application"  
  width : 295  
  height: 325  
  closeAction : function (){  
  java.lang.System.exit(0) ;  
  }  
  visible: true  
  stage: Stage {  
  content: Clock{}  
  }  
}  
  
public class Clock extends CustomNode {  
  public attribute radius : Number = 77;  
  public attribute centerX : Number = 144;  
  public attribute centerY : Number = 144;  
  public attribute hours:Number;  
  public attribute minutes:Number;  
  public attribute seconds:Number;  
  
  public function nextTick () {  
  var now = new Date();  
  seconds = now.getSeconds();  
  minutes = now.getMinutes();  
  hours = now.getHours();  
  }  
   
  public function create(): Node {  
  return Group {  
  content:[  
  ImageView {  
  image: Image {  
  url: "{__DIR__}/clock_background.png"  
  }  
  },  
   
  Group{  
  transform: Translate { x: centerX, y: centerY }  
  content: [  
  // code to display the numbers for every third hour  
  for (i in [3, 6, 9, 12])  
  Text {  
  transform: Translate { x : -5, y : 5 }  
  font: Font {size: 16 style: FontStyle.BOLD }  
  x: radius * (( i + 0 ) mod 2 * ( 2 - i / 3))  
  y: radius * (( i + 1 ) mod 2 * ( 3 - i / 3))  
  content: "{i}"  
  },  
  
  //code to display a circle for the rest of the hours on the clock  
  for (i in [1..12])  
  if (i mod 3 != 0 ) then Circle {  
  transform:Rotate { angle: 30 * i }  
  centerX: radius  
  radius: 3  
  fill: Color.BLACK  
  } else [ ],  
  Circle {  
  radius: 5  
  fill: Color.DARKRED  
  },  
  //code for the smaller center circle  
  Circle {  
  radius: 3  
  fill: Color.DARKRED  
  },  
  //code for the seconds hand  
  Line {  
  transform: Rotate { angle: bind seconds * 6 }  
  endY: -radius - 3  
  strokeWidth: 2  
  stroke: Color.RED  
  },  
  //code for the hour hand  
  Path {  
  //for the hour hands  
  transform: Rotate { angle: bind (hours + minutes / 60) * 30 - 90 }  
  fill: Color.BLACK  
  elements: [  
  MoveTo {x: 4, y: 4},  
  ArcTo {x: 4 y: -4 radiusX: 1 radiusY: 1},  
  LineTo{ x: radius - 15 y: 0},  
  ]  
  },  
  // code for the minutes hand  
  Path {  
  //for the minutes hand  
  transform: Rotate { angle: bind minutes * 6 - 90 }  
  fill: Color.BLACK  
  elements: [  
  MoveTo {x: 4, y: 4},  
  ArcTo {x: 4 y: -4 radiusX: 1 radiusY: 1},  
  LineTo{ x: radius y: 0},  
  ]  
  }]}  
  ]  
  };  
  }  
   
  init {  
  var timeline = Timeline {  
  repeatCount: Timeline.INDEFINITE  
  keyFrames : [  
  KeyFrame {  
  time : 1s  
  action: function() {  
  nextTick();  
  }  
  }  
  ]  
  }  
  timeline.start();  
   
  }  
}  

 

JavaFX Script还是比较简单的。它与Java的差距，比JavaScript与Java的差距，个人感觉小的多。 

如何发布JavaFX应用呢？JavaFX内容可以通过Java Web Start发布为应用程序（这将最终运行在用户的Desktop上面），或者发布为Applets作为Java的Plug-In;无论哪种方式，都需要有一个JavaFX runtime. 

参考： 
Sun： 
http://www.sun.com/software/javafx/script/index.jsp 
SUN为Java FX专题建立的网站，网站本身也是Java FX技术的一个演示。 
http://javafx.com/ 
InfoQ: 
http://www.infoq.com/news/2008/01/javafx-chet-haase 
JavaFX Script： 
http://www.sun.com/software/javafx/script/index.jsp