服务热线:13616026886

技术文档 欢迎使用技术文档,我们为你提供从新手到专业开发者的所有资源,你也可以通过它日益精进

位置:首页 > 技术文档 > JAVA > 核心技术 > 查看文档

javafx script with eclipse 入门

  最近java社区最火的就是javafx script的发布了,并且sun同时公布了javafx script的开源网站……

  最近java社区最火的就是javafx script的发布了,并且sun同时公布了javafx script的开源网站:openjfx,javafx script是sunria解决方案,是一种用于编写能够在支持java的pc和手机上运行的应用软件的更简单的脚本语言。其编写的程序可以直接在java虚拟机上运行(java 1.5以上),从其运行的环境、方式看,这是adobe apollo的劲敌,其运行的效果大家可以查看官方的演示程序(注意,需要jre 1.5),效果很惊人的哦。下面是其中一个演示的效果图:

image

  从语法来看,javafx script是个java和vrml的混合体,既有java的优点(面向对象,继承等等),又有vrml的优点(图形描述)。在ide支持方面,目前以及推出netbeanseclipse的插件,虽然功能还不是很强大,但相信等javafx script正式发布的时候,ide方面的支持会持续加强的,比如可视模式的ui编辑、语法提示等。

  openjfx官方有一个基于netbeansjavafx script 起步,考虑到flex开发中eclipse(flexbuilder)的使用情况,今天我们将基于eclipe来一起开始我们的javafx script发现之旅。文中除了将原文的使用netbeans更改为eclipse,其他均翻译自官方文档。

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

  安装javafx script for eclipse插件

  首先我们来安装javafx script for eclipse插件,官方的安装说明在这里,安装步骤如下:

  •   启动eclipse/flexbuilder;
  •   从主菜单选择 help > software updates > find and install;
  •   在install/update对话框中, 选择search for new features to install然后点击next;
  •   点击new remote site;
  •   在new update site对话框中,在name中输入javafx;
  •   在url中输入:http://download.java.net/general/openjfx/plugins/eclipse/site.xml;
  •   点击ok;
  •   在install窗口中点击finish;
  •   在updates对话框中选择javafx > javafx node > 然后点击next;
  •   接受协议并点击next;
  •   点击next和finish;
  •   在verification对话框中选择install all;
  •   安装完成后重启eclipse,javafx script eclipse 插件就安装完成了。

  新建javafx工程

  以上准备好了javafx script的eclipse开发环境,现在我们来实际开始javafx script之旅。

  我们需要创建一个java工程来存放我们的javafx script文件。

  从eclipse的主菜单选择new > project

  在选择工程向导窗口中选择java project

image

  点击next

  输入project name为:javafxapp

  不需要添加javafx script lib,运行javafx script程序时,eclipse会自动添加并设置环境的。点击finish,完成。

image

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

image

  创建我们第一个javafx程序

  现在,开始用eclipse创建我们第一个javafx helloworld 程序。

  右击javafxapp > new > other

image

  在new窗口中选择javafx > javafx file,

image

  点击next,在file name输入:helloworld.fx,

image

  点击finish,helloworld.fx就被添加到javafxapp工程中,并且在右边自动被打开了。

image

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

  import javafx.ui.*;
  frame {
  title: "hello world javafx"
  width: 200
  height: 50
  content: label {
  text: "hello world"
  }
  visible: true
  }

  运行我们的第一个javafx程序

  现在让我们用eclipse运行我们的第一个javafx程序。

  在eclipse主菜单,选择run > run...:

image

  在run窗口中,双击javafx application:

image

  然后在name输入:helloworld:

image

  点击arguments,在program arguments中输入我们的javafx程序名称:helloworld,这里的名称与java类名一致,如果我们的helloworld存放在prac目录下,那们就输入prac.helloworld:

image

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

image

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

  语法解释

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

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

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

  •   调用frame类构造器创建一个新的frame。
  •   对frame的title、width、visible和content属性进行赋值。
  •   在content属性的赋值过程中,调用label类构造器创建了一个新的label,并且给它的text属性赋了一个值。
  •   但是,即使像这里这么极端简单的示例中,描述性语法编写的程序的意识还是更加容易理解。

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

  添加动态行为(dynamic behavior)

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

  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
  };

  运行程序显示如下:

image

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

  model.saying = "goodbye cruel world!";

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

image

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

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

  考虑以下示例:

  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
  };

  运行该程序,显示如下:

image

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

image

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


  阅读关于 java sun javafx 开源 apollo vrml ide eclipse netbeans 的全部文章

扫描关注微信公众号