教程– GroovyFX

最新推荐文章于 2024-03-14 11:42:56 发布

diluan6799

最新推荐文章于 2024-03-14 11:42:56 发布

阅读量409

点赞数

文章标签： java python javascript html 编程语言 ViewUI

GroovyFX是一个库，使编写JavaFX 2.x应用程序更加简单和自然。 GroovyFX利用Groovy的Builder模式的功能来使开发人员能够以简洁的声明式风格进行编写。以这种方式构造UI的能力使可视化正在构建的用户界面变得更加容易。简短易懂的代码也易于维护和扩展。 GroovyFX完全支持JavaFX的所有许多高级功能，例如控件，布局，图形，动画，声音，视频，图表等。

GroovyFX的0.2版可以从Sonatype的Maven存储库中作为快照使用。其组ID为 org.codehaus.groovyfx ，其工件ID仅为 groovyfx 。在本文中，我将使用最新版本：0.2-SNAPSHOT。

编者注： 在撰写本文时，Oracle的JavaFX团队正在完成JavaFX 2.1的工作。 我预计此版本将在本文发布后不久出现，因此本文中的所有代码示例都将使用GroovyFX 0.2-SNAPSHOT，它是GroovyFX的版本，用于跟踪JavaFX 2.1中的更改。

我最近发表了一篇博客文章，详细介绍了如何在Gradle项目和带有 @Grab 注释的 Groovy脚本中使用 GroovyFX 。或者，您可以直接从GitHub克隆项目，然后按照项目GitHub页面上的说明自行构建（确保您正在使用 develop 分支）。

JavaFX用户界面是通过构建场景图来创建的。因此，GroovyFX具有一个SceneGraphBuilder类，该类包装JavaFX API类，并使用Groovy的Builder语法使它们可用。但是，您很少会实例化并直接使用 SceneGraphBuilder 对象。相反，您通常将使用 GroovyFX 类的静态 start 方法，并向其传递一个执行GroovyFX代码的闭包。清单1中的示例对此进行了说明，该示例显示了一个基本的GroovyFX“ Hello，World”程序。

清单1：Hello World

import groovyx.javafx.GroovyFX

GroovyFX.start {
  stage(title: "GroovyFX Hello World", visible: true) {
    scene(fill: black, width: 530, height: 300) {
      hbox(padding: 80) {
        text(text: "Groovy", style: "-fx-font-size: 80pt") {
          fill linearGradient(endX: 0, stops: [palegreen, seagreen])
        }
        text(text: "FX", style: "-fx-font-size: 80pt") {
          fill linearGradient(endX: 0, stops: [cyan, dodgerblue])
          effect dropShadow(color: dodgerblue, radius: 25, spread: 0.25)
        }
      }
    }
  }
}

JavaFX中的主要应用程序容器是这个阶段。当作为桌面应用程序运行时，它对应于应用程序的窗口；当在浏览器中作为小程序运行时，它对应于其内容区域。该阶段包含一个场景，该场景保留对 场景图 的根节点的引用，该 场景图 是定义应用程序显示的内容的数据结构。因此，每个JavaFX应用程序都由一个舞台，一个场景以及一个或多个场景图节点类组成。清单1所示的GroovyFX代码很容易挑选这种结构，其中场景图的根是JavaFX Hbox类的实例。 HBox是一个布局节点，其子节点沿水平线排列。清单1显示了根HBox节点有两个子Text节点，它们并排显示字符串“ Groovy”和“ FX”， 如图1 所示。

图1：GroovyFX“ Hello，World”程序

细心的读者无疑会推断出GroovyFX中使用的命名模式。 GroovyFX构建器语法中的节点名称与其对应的JavaFX类相同，并且该类名称的首个大写字母转换为小写。因此，JavaFX的 Stage 类被称为在GroovyFX 阶段。同样， LinearGradient 变为 linearGradient ， HBox 变为 hbox ， Button 变为 button ，依此类推。

可以通过使用属性名称作为映射中的键来设置这些类的属性，该映射作为参数传递给构建器节点。以下代码创建一个舞台，其标题属性设置为“ GroovyFX Hello World”。

阶段（标题：“ GroovyFX Hello World”）

GroovyFX还提供了一些方便的快捷方式来声明场景图节点和属性。注意清单1中的linearGradient声明。GroovyFX允许您使用快捷方式（例如，按名称引用颜色）而不是使用其静态值（例如“ Color.CYAN”）。此外，您可以简单地将颜色数组作为linearGradient的 stops 属性传递，GroovyFX将使用这些颜色自动创建均匀间隔的渐变色块。这些便捷的快捷方式使编写GroovyFX代码变得干净快捷。

控件和布局

JavaFX附带了一套完整的现代UI控件，例如Button，Label，TextField和CheckBox。还包括更复杂的控件，例如ListView，TreeView和TableView。 JavaFX还包括一组功能强大的布局，例如HBox，VBox，BorderPane，TilePane和功能强大且灵活的GridPane。所有这些控件和布局窗格都只是JavaFX场景图中的节点。如清单1所示，作为布局窗格子级的任何场景图节点都将自动由该布局窗格设置其位置和大小（例如，两个Hbox子级的Text节点）。从技术上讲，在布局过程中还有其他因素在起作用，例如节点的托管属性的值以及节点是否可调整大小，但是在大多数情况下，您可以简单地假设布局窗格将控制节点的大小。子节点的大小和位置。

一些布局窗格需要其他信息才能布置其子节点。 BorderPane需要知道是否应将节点放置在其布局空间的北，南，东，西或中心。 GridPane需要知道在哪个行和列中放置节点。如果使用Java，则需要通过其他方法调用来设置这些约束。在GroovyFX中，这些约束可以直接传递到节点的属性映射，而GroovyFX将负责为您调用约束方法。这使您可以将布局约束保留在声明节点的位置，并使布局更易于理解。您可以在清单2中看到一个示例，其中GroovyFX使用放置在GridPane中的各种控件来构建简单的表单。

清单2

import static groovyx.javafx.GroovyFX.start

start {
  stage(title: "GridPane Demo", width: 400, height: 500, visible: true) {
    scene(fill: groovyblue) {
      gridPane(hgap: 5, vgap: 10, padding: 25, alignment: "top_center") {
        columnConstraints(minWidth: 50, halignment: "right")
        columnConstraints(prefWidth: 250, hgrow: 'always')

        label("Please Send Us Your Feedback", style: "-fx-font-size: 18px;",
              textFill: white, row: 0, columnSpan: 2, halignment: "center",
              margin: [0, 0, 10]) {
          onMouseEntered { e -> e.source.parent.gridLinesVisible = true }
          onMouseExited { e -> e.source.parent.gridLinesVisible = false }
        }

        label("Name", hgrow: "never", row: 1, column: 0, textFill: white)
        textField(promptText: "Your name", row: 1, column: 1 )

        label("Email", row: 2, column: 0, textFill: white)
        textField(promptText: "Your email address", row: 2, column: 1)

        label("Message", row: 3, column: 0, valignment: "baseline", 
              textFill: white)
        textArea(prefRowCount: 8, row: 3, column: 1, vgrow: 'always')

        button("Send Message", row: 4, column: 1, halignment: "right")
      }
    }
  }
}

清单2展示了更多GroovyFX便利。您会注意到， GridPane 的 对齐方式 设置为“ top_center”。 GroovyFX会发现您确实在引用枚举值“ Pos.TOP_CENTER”，因为GridPane的alignment属性为 Pos 类型。设置“中心”（HPos.CENTER）的对齐方式时也是如此。

GroovyFX允许的另一个节省时间的便利是将事件处理程序定义为Groovy闭包。在清单2中第一个标签节点上声明的 onMouseEntered 和 onMouseExited 事件处理程序中可以看到这一点。这两个事件处理程序使GridPane单元格的轮廓在鼠标悬停在标签上时可见。在GridPane中调试布局问题时，这可能是非常方便的技巧。清单2中的代码创建的表单 如图2 所示。

图2：在GroovyFX中创建表单布局

图形和动画

JavaFX还以其强大的图形和动画功能而闻名。当然，GroovyFX在这些领域也提供全面支持。请使用清单3中所示的代码，它是Oracle JavaFX团队编写的基于Java的Colorful Circles示例应用程序的GroovyFX转换。

清单3：

import static groovyx.javafx.GroovyFX.start

start {
  def circles
  stage(title: 'GroovyFX ColorfulCircles', resizable: false, show: true) {
    scene(width: 800, height: 600, fill: 'black') {
      group {
        circles = group {
          30.times {
            circle(radius: 200, fill: rgb(255, 255, 255, 0.05), 
                   stroke: rgb(255, 255, 255, 0.16),
                   strokeWidth: 4, strokeType: 'outside')
          }
          effect boxBlur(width: 10, height: 10, iterations: 3)
        }
        rectangle(width: 800, height: 600, blendMode: 'overlay') {
        def stops = ['#f8bd55', '#c0fe56', '#5dfbc1', '#64c2f8', 
                     '#be4af7', '#ed5fc2', '#ef504c', '#f2660f']
        fill linearGradient(start: [0f, 1f], end: [1f, 0f], stops: stops)
      }
    }
  }

  parallelTransition(cycleCount: 'indefinite', autoReverse: true) {
    def random = new Random()
    circles.children.each { circle ->
      translateTransition(40.s, node: circle, fromX: random.nextInt(800), 
                          fromY: random.nextInt(600),
                          toX: random.nextInt(800), 
                          toY: random.nextInt(600))
    }
  }.play()
}
  }
}

清单3展示了GroovyFX对JavaFX形状类（例如Circle和Rectangle）的支持，以及对所有效果（例如BoxBlur）的支持。使用Groovy循环构造（例如 30.times） 来创建圆，显示了使用Groovy的构建器语法的好处之一：任何Groovy表达式或语句在构建器中均有效。这甚至包括if语句之类的构造，可以让您有条件地构建节点。

动画绝对是JavaFX的强项之一。您可以定义自己的时间轴，也可以使用许多可用的预先打包的过渡类之一。清单3演示了ParallelTransition（一种并行运行其他动画的过渡）和TranslateTransition（一种改变节点的x，y坐标以便使其移动）的用法。在这种情况下，将随机平移应用于每个圆，以便它们在屏幕上缓慢徘徊。该应用程序的输出 如图3 所示。

图3：GroovyFX中的图形和动画

JavaFX Script（用于编写JavaFX 1.x应用程序的语言）的强大功能之一是其对绑定的内置支持。此功能以属性和绑定API类的形式存在于JavaFX 2.x的基于Java的库中。这是一种流畅的API，可让您使用旧版JavaFX Script绑定功能的几乎所有功能。基于Java的API的缺点之一是定义绑定类能够使用的属性所需的样板代码数量。以清单4中所示的Person类为例。

清单4 –人员类别

public class Person {
  private StringProperty firstName;
  public void setFirstName(String val) { firstNameProperty().set(val); }
  public String getFirstName() { return firstNameProperty().get(); }
  public StringProperty firstNameProperty() { 
    if (firstName == null) 
      firstName = new SimpleStringProperty(this, "firstName");
    return firstName; 
  }
 
  private StringProperty lastName;
  public void setLastName(String value) { lastNameProperty().set(value); }
  public String getLastName() { return lastNameProperty().get(); }
  public StringProperty lastNameProperty() { 
    if (lastName == null) // etc.
  } 
}

此清单显示了在JavaFX中定义具有两个属性的类所需的典型样板。这些属性由 StringProperty 类支持，因此可以完全参与所有JavaFX绑定功能。但是，如果您使用该样板并乘以应用程序中每个类的每个属性，那么您可能会很快对其引入的其他代码量感到苦恼，这些代码必须由您（或其他不幸的开发人员）调试和维护。

GroovyFX可以利用Groovy最强大的功能之一AST转换为您解决此问题。编写自定义AST转换可让您 在编译时 修改或插入代码，以减轻开发人员的编码负担。您要做的就是使用 @FXBindable 批注对标准Groovy属性进行批注，然后GroovyFX会为您编写所有样板代码！清单5显示了使用 @FXBindable 批注时 Person 类的外观。信不信由你，此代码与清单4所示的代码等效。

清单5

public class Person {
  @FXBindable String firstName; 
  @FXBindable String lastName;
}

如果您的POGO中的所有属性都应该是可绑定的，则可以注释该类而不是每个单独的属性，如清单6所示。

清单6

@FXBindable 
public class Person {
  String firstName; 
  String lastName;
}

要了解有关 @FXBindable 和GroovyFX的绑定功能的更多信息，我敦促您查看AnalogClockDemo ，该文件包含在GitHub上的GroovyFX项目中。

在编写复杂的应用程序时，通常需要支持诸如使用MVC设计模式，简单的线程以及事件总线之类的功能。这是Griffon的领域，Griffon是一个易于使用的类似Grails的框架，用于编写桌面Java应用程序（请参阅Andres Almiray在Griffon上的文章）。

您将很高兴知道，迁移到Griffon并不意味着您需要放弃JavaFX的功能和GroovyFX的便利性。 Griffon有一个JavaFX插件，它允许您使用GroovyFX编写应用程序的视图代码。入门说明包含在我的Griffon JavaFX原型的GitHub页面上。此原型使您可以快速启动并运行新的JavaFX Griffon应用程序。

如果您有兴趣了解有关JavaFX和GroovyFX的更多信息，可以查阅我最近与人合着的《 Pro JavaFX 2：使用Java技术的富客户端的权威指南》。 Oracle还在其JavaFX网站上发布了大量JavaFX文档和示例。

作者简介：

迪恩·艾弗森（Dean Iverson）从事专业软件编写已超过15年。 他受聘于弗吉尼亚理工大学交通学院，是一名富客户应用程序开发人员。 他从一开始就从事JavaFX技术的工作，并且是GroovyFX和JFXtras开源项目的贡献者，并且还是Apress出版的Pro JavaFX书籍的合著者。

本文最初发表在Java Tech Journal – Groovy Universe中。 在那里查看更多Groovy项目 …

翻译自: https://jaxenter.com/tutorial-groovyfx-104700.html

diluan6799

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
教程– GroovyFX

GroovyFX是一个库，使编写JavaFX 2.x应用程序更加简单和自然。 GroovyFX利用Groovy的Builder模式的强大功能，使开发人员能够以简洁，声明性的风格进行编写。以这种方式构造UI的能力使可视化正在构建的用户界面变得更加容易。简短易懂的代码也易于维护和扩展。 GroovyFX完全支持JavaFX的所有许多高级功能，例如控件，布局，图形，动画，声音，视频，图表等。 ...
复制链接

扫一扫