| « | December 2025 | » | | 日 | 一 | 二 | 三 | 四 | 五 | 六 | | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | | | | |
|
公告 |
| 本博客在此声明所有文章均为转摘，只做资料收集使用。并无其他商业用途。 |
| Blog信息 |
|
blog名称:
日志总数:210
评论数量:205
留言数量:-19
访问次数:929086
建立时间:2007年5月10日 |
| |
|
 [javaFX]JavaFX发现之旅：JavaFX Script With Eclipse 入门（第一部分） 
文章收藏, 网上资源, 软件技术, 电脑与网络
李小白 发表于 2007/7/30 14:29:26 |
| pytruth1002 发表于 2007-06-01 17:07:13作者:feiy 来源:feiy评论数:15 点击数:2,458 投票总得分:5 投票总人次:1关键字:JavaFX
最近Java社区最火的就是JavaFX Script的发布了，并且Sun同时公布了JavaFX Script的开源网站：openJfx，JavaFX Script是Sun的RIA解决方案，是一种用于编写能够在支持Java的PC和手机上运行的应用软件的更简单的脚本语言。其编写的程序可以直接在Java虚拟机上运行（Java 1.5以上），从其运行的环境、方式看，这是Adobe Apollo的劲敌，其运行的效果大家可以查看官方的演示程序（注意，需要Jre 1.5），效果很惊人的哦。下面是其中一个演示的效果图：500)this.width=500'>从语法来看，JavaFX Script是个Java和VRML的混合体，既有Java的优点（面向对象，继承等等），又有VRML的优点（图形描述）。在IDE支持方面，目前以及推出NetBeans和Eclipse的插件，虽然功能还不是很强大，但相信等JavaFX Script正式发布的时候，IDE方面的支持会持续加强的，比如可视模式的UI编辑、语法提示等。OpenJfx官方有一个基于NetBeans的JavaFX 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 Project500)this.width=500'>点击Next 输入Project Name为：JavaFXapp 不需要添加JavaFX Script Lib，运行JavaFX Script程序时，Eclipse会自动添加并设置环境的。点击Finish，完成。500)this.width=500'>现在JavaFXapp工程就创建好了，如下图：500)this.width=500'>创建我们第一个JavaFX程序现在，开始用Eclipse创建我们第一个JavaFX HelloWorld 程序。右击JavaFXapp > New > Other500)this.width=500'>在New窗口中选择JavaFX > JavaFX File，500)this.width=500'>点击Next，在File name输入：HelloWorld.fx，500)this.width=500'>点击Finish，HelloWorld.fx就被添加到JavaFXapp工程中，并且在右边自动被打开了。500)this.width=500'>将下面代码粘贴到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...：500)this.width=500'>在Run窗口中，双击JavaFX Application：500)this.width=500'>然后在Name输入：HelloWorld：500)this.width=500'>点击Arguments，在Program arguments中输入我们的JavaFX程序名称：HelloWorld，这里的名称与Java类名一致，如果我们的HelloWorld存放在prac目录下，那们就输入prac.HelloWorld：500)this.width=500'>点击Run，自动编译运行，将出现下面运行窗口：500)this.width=500'>恭喜，我们现在完成了第一个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};
运行程序显示如下：500)this.width=500'>如果model对象的saying改成下面这样：model.saying = "Goodbye Cruel World!";
运行结果将变为下图所示：500)this.width=500'>注意该示例通过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};
运行该程序，显示如下：500)this.width=500'>如果您在文本输入域中输入其他内容然后敲回车，窗口的标题将相应的改变：500)this.width=500'>在这一情况下，文本域的值的更新是用户输入的结果（通过TextField类的实现）。当model的saying属性更新到与文本域相同值发生时，因为该表达式指定窗口的title属性依赖于model的saying属性，表达式被重新计算并且窗口的title属性更新到上面的结果。但是，这样的内容表达依然是声明。 |
|
|