安装JavaFX Script For Eclipse插件


要完成我们今天的旅途,您首先需要安装Eclipse 3.2.2,以及安装FlexBuilder也可以,另外如果您的Jre版本低于1.5请升级

安装JavaFX Script For Eclipse插件

首先我们来安装JavaFX Script For Eclipse插件,官方的安装说明在这里,安装步骤如下:

  1. 启动Eclipse/FlexBuilder;

  2. 从主菜单选择 Help > Software Updates > Find and Install;

  3. 在Install/Update对话框中, 选择Search for New Features to Install然后点击Next;

  4. 点击New Remote Site;

  5. 在New Update Site对话框中,在Name中输入JavaFX;

  6. 在URL中输入:http://download.java.net/general/openjfx/plugins/eclipse/site.xml;

  7. 点击OK;

  8. 在Install窗口中点击Finish;

  9. 在Updates对话框中选择JavaFX > JavaFX node > 然后点击Next;

  10. 接受协议并点击Next;

  11. 点击Next和Finish;

  12. 在Verification对话框中选择Install All;

  13. 安装完成后重启Eclipse,JavaFX Script Eclipse 插件就安装完成了。

新建JavaFX工程

以上准备好了JavaFX Script的Eclipse开发环境,现在我们来实际开始JavaFX Script之旅。

我们需要创建一个Java工程来存放我们的JavaFX Script文件。

  1. 从Eclipse的主菜单选择New > Project

  2. 在选择工程向导窗口中选择Java Project

  3. 点击Next

  4. 输入Project Name为:JavaFXapp

  5. 不需要添加JavaFX Script Lib,运行JavaFX Script程序时,Eclipse会自动添加并设置环境的。点击Finish,完成。

    现在JavaFXapp工程就创建好了,如下图:

创建我们第一个JavaFX程序

现在,开始用Eclipse创建我们第一个JavaFX HelloWorld 程序。

  1. 右击JavaFXapp > New > Other

  2. 在New窗口中选择JavaFX > JavaFX File,

  3. 点击Next,在File name输入:HelloWorld.fx,

  4. 点击Finish,HelloWorld.fx就被添加到JavaFXapp工程中,并且在右边自动被打开了。

  5. 将下面代码粘贴到HelloWorld.fx中:

    [java]
    import javafx.ui.*;
    
    Frame {
      title: "Hello World JavaFX"
      width: 200
      height: 50
      content: Label {
         text: "Hello World"
      }
      visible: true
    }

运行我们的第一个JavaFX程序

现在让我们用Eclipse运行我们的第一个JavaFX程序。

  1. 在Eclipse主菜单,选择Run > Run…:

  2. 在Run窗口中,双击JavaFX Application:

  3. 然后在Name输入:HelloWorld:

  4. 点击Arguments,在Program arguments中输入我们的JavaFX程序名称:HelloWorld,这里的名称与Java类名一致,如果我们的HelloWorld存放在prac目录下,那们就输入prac.HelloWorld:

  5. 点击Run,自动编译运行,将出现下面运行窗口:

恭喜,我们现在完成了第一个JavaFX程序。

语法解释

正如您在前面章节看到的,JavaFX语言提供了一种用于表述用户界面组件结构和内容的声明式的语法(Declarative Syntax)。为了帮助您理解发生了什么,我们使用类似于Swing的纯程序的形式(类似AS3)重写以上代码:

[java]
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程序并且和前面的运行效果相同。

以下同时说明了以上声明式和程序式方式的代码实际发生了什么:

  1. 调用Frame类构造器创建一个新的Frame。

  2. 对Frame的title、width、visible和content属性进行赋值。

  3. 在content属性的赋值过程中,调用Label类构造器创建了一个新的Label,并且给它的text属性赋了一个值。

但是,即使像这里这么极端简单的示例中,描述性语法编写的程序的意识还是更加容易理解。

因为声明式编程(declarative programming)可以从单个表达式创建程序,如前面第一个例子,表达式的根一般为一个生成程序的对象图形的对象分配表达式(构造器)。

添加动态行为(dynamic behavior)

上面的“Hello World”程序没有动态行为。在JavaFX中创建一个带动态行为的图形用户接口,即创建一个属性依赖其他对象属性值的图形用户接口组件(和Flex中的绑定的概念一致)。这些其他对象可以是任何您觉得合适的代表您的应用状态的对象。因为该GUI组件的属性依赖于另一个对象,它会自动反应任何时候您对另一个对象的修改。相应的,GUI组件是视图(View)而另一个对象就是模型(Model),下面是“Hello World”程序的Model/View版本:

[java]
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
};

运行程序显示如下:

如果model对象的saying改成下面这样:

[java]
model.saying = "Goodbye Cruel World!";

运行结果将变为下图所示:

注意该示例通过JavaFX的bind操作将label的text属性初始化为mode的saying属性。在这里,bind操作声明增量更新。这意味着任何时候model.saying改变,label的text属性都将更新为相同的值。

对于输入构件,如按钮、复选框和文本输入域,模式属性和GUI组件之间的连接可以是双向的。

考虑以下示例:

[java]
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
};

运行该程序,显示如下:

如果您在文本输入域中输入其他内容然后敲回车,窗口的标题将相应的改变:

在这一情况下,文本域的值的更新是用户输入的结果(通过TextField类的实现)。当model的saying属性更新到与文本域相同值发生时,因为该表达式指定窗口的title属性依赖于model的saying属性,表达式被重新计算并且窗口的title属性更新到上面的结果。但是,这样的内容表达依然是声明。

原文(基于NetBeans):Getting Started with the JavaFX Script Language (for Swing Programmers)


上一篇 下一篇

分享

热门文章