java

位置:IT落伍者 >> java >> 浏览文章

JavaFX Script With Eclipse


发布日期:2018年10月25日
 
JavaFX Script With Eclipse

最近Java社区最火的就是JavaFX Script的发布了并且Sun同时公布了JavaFX Script的开源网站openJfxJavaFX Script是Sun的RIA解决方案是一种用于编写能够在支持Java的PC和手机上运行的应用软件的更简单的脚本语言其编写的程序可以直接在Java虚拟机上运行(Java 以上)从其运行的环境方式看这是Adobe Apollo的劲敌其运行的效果大家可以查看官方的演示程序(注意需要Jre 效果很惊人的哦下面是其中一个演示的效果图


从语法来看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 以及安装FlexBuilder也可以另外如果您的Jre版本低于请升级

首先我们来安装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中输入

    点击OK

    在Install窗口中点击Finish

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

    接受协议并点击Next

    点击Next和Finish

    在Verification对话框中选择Install All

    安装完成后重启EclipseJavaFX Script Eclipse 插件就安装完成了

新建JavaFX工程

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

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

    从Eclipse的主菜单选择New > Project

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

    点击Next

    输入Project Name为JavaFXapp

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

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

创建我们第一个JavaFX程序

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

    右击JavaFXapp > New > Other

    在New窗口中选择JavaFX > JavaFX File

    点击Next在File name输入HelloWorldfx

    点击FinishHelloWorldfx就被添加到JavaFXapp工程中并且在右边自动被打开了

    将下面代码粘贴到HelloWorldfx中

    import javafxui*;Frame { title: Hello World JavaFX width: height: content: Label { text: Hello World} visible: true}

运行我们的第一个JavaFX程序

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

    在Eclipse主菜单选择Run > Run

    在Run窗口中双击JavaFX Application

    然后在Name输入HelloWorld

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

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

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

语法解释


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

var win = new Frame();wintitle = Hello World JavaFX;winwidth = ;var label = new Label();labeltext = Hello World;ntent = label;winvisible = true;

以上源代码同样是正确的JavaFX程序并且和前面的运行效果相同

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

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

    对Frame的titlewidthvisible和content属性进行赋值

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

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

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

添加动态行为(dynamic behavior)

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

import javafxui*;class HelloWorldModel { attribute saying: String;}var model = HelloWorldModel { saying: Hello World};var win = Frame { title: Hello World JavaFX width: height: content: Label { text: bind modelsaying} visible: true};

运行程序显示如下

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

modelsaying = Goodbye Cruel World!;

运行结果将变为下图所示

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

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

考虑以下示例

import javafxui*;class HelloWorldModel { attribute saying: String;}var model = HelloWorldModel { saying: Hello World};var win = Frame { title: bind {modelsaying} JavaFX width: height: content: TextField { value: bind modelsaying} visible: true};

运行该程序显示如下

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

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

上一篇:分享Spring中接口注入的三种方式

下一篇:实现一个简单的struts和spring框架