使用JavaFX+构建GUI+教程

使用JavaFX构建GUI教程使用声明性语法您是否熟悉声明性编程？JavaFXScript使用的就是这种简单而强大的编码样式。本课通过指导您创建一个简单的GUI应用程序来展示使用声明性语句是多么容易。有关更多信息，请参阅学习JavaFXScript编程语言中的编写脚本、使用对象和编写您自己的类。正如您在学习JavaFXScript编程语言中所了解的那样，JavaFXScript使用声明性方法进行编程。在创建应用程序的UI时，声明很方便，因为在代码中声明的对象的结构反映了场景图形的视觉结构，这样您就能很轻松地理解和维护代码。有关场景图形的更多信息，请参见在图形场景中显示UI对象。为帮助您理解此方法，在本课中，您将按照逐步操作过程创建一个简单的样例JavaFXScript应用程序，该应用程序将绘制一个绿色的圆角矩形，并在该矩形上面绘制一个具有红色轮廓线的白色圆。这两个对象都位于标题为DeclaringIsEasy!!的窗口中。运行此应用程序时，将显示以下窗口。图1：完整的应用程序通过执行以下步骤，您将学会如何在构建应用程序时使用声明性语句。创建一个扩展名为.fx的文件，例如Declaring.fx。避免使用与现有的类、实例变量或保留字的名称匹配的文件名，因为这会在编译过程中导致错误。有关现有的类、变量和保留字的更多信息，请参见JavaFXScriptAPI和学习JavaFXScript编程语言。您可以在任意时间使用以下命令编译您的代码：您可以使用以下命令运行编译的代码：添加必要的导入将导入添加到.fx文件中，以确保此应用程序可以访问必要的类。创建应用程序窗口为了显示图形，需要创建一个窗口。创建窗口：1.指定Stage对象字面值。绘制任何对象都需要使用Stage。javafxcDeclaring.fxjavafxDeclaringimportjavafx.stage.Stage;//requiredtorenderawindowimportjavafx.scene.Scene;//requiredtodisplayacircleandrectangleonawindowimportjavafx.scene.shape.Rectangle;//requiredtorendertherectangleimportjavafx.scene.paint.Color;//requiredtofillandstroketherectangleandcirclewithcolorimportjavafx.scene.shape.Circle;//requiredtorenderthecircleStage{}这等效于：2.此窗口应该足够大，以便能够将矩形和圆都显示出来。在本示例中，此窗口是一个249x251像素的矩形。要创建如此大小并且标题为DeclaringisEasy的窗口，请在花括号中使用以下代码声明这些值：冒号左边的词title、width、height和visible称作实例变量，您可以参阅Stage文档以获取可用变量的完整列表。title将'DeclaringIsEasy'短语放在窗口的顶部边框中。width和height是像素值。有关JavaFXScript中对象字面值、类和实例变量的更多信息，请参见语言教程中的编写脚本和使用对象。当您运行目前已定义的代码时，将会看到以下窗口。Stage{}Stage{title:DeclaringIsEasy!width:249height:251visible:true}图2：空窗口设置场景在stage内，设置用来容纳Node对象（如圆或矩形）的scene。使用以下代码创建Scene：此场景是用来放置节点类型的对象的根区域。此场景具有一个用来容纳节点的content变量。有许多不同类型的节点，如图形对象、文本和GUI组件。有关节点和Scene类的更多信息，请参见在图形场景中显示UI对象一课和JavaFXScriptAPI。当您运行目前已定义的代码时，将会看到以下窗口。Stage{...scene:Scene{content:[]}}图3：具有场景的窗口注意：由于白色是场景的默认填充颜色，因此窗口的内容被填充为白色。场景位于窗口之上。创建矩形要在content内声明矩形，请使用以下代码：content:[Rectangle{x:45y:35width:150height:150arcWidth:15arcHeight:15fill:Color.GREEN}]x和y实例变量用来指定矩形的像素位置，arcWidth和arcHeight用来定义角的圆度，fill变量用来定义填充矩形的颜色。定义窗口的尺寸时，您已经看到了大小变量width和height。注意：在前面的代码样例中，您显式声明了所需的颜色，不过您也可以声明表示此颜色的Web代码。要使用代码来指定绿色填充颜色，请声明：结果，此代码在左上角45,35位置创建了一个矩形。此矩形的大小是150x150像素，角圆度为15，并且使用绿色填充。有关Rectangle类的更多信息，请参见JavaFXScriptAPI。以下图形显示了此步骤中的应用程序窗口。图4：绿色圆角矩形创建圆使用以下代码在绿色矩形上面声明一个圆并设置其样式：fill:Color.web(#008000)由于矩形是在任何其他对象之前声明的，所以首先绘制该矩形。该矩形将位于后来绘制的任何其他对象后面。此代码使用Circle对象字面值来创建Circle类的一个实例。圆具有5个用来定义其状态的实例变量，包括窗口上的X和Y位置、半径、填充和笔画颜色。结果，此代码创建了一个圆，其半径为83，圆心位于118,110，且以白色填充，轮廓线为红色。有关Circle类的更多信息，请参见JavaFXScriptAPI。运行示例现在，您可以运行整个示例了。以下代码是一个完整的Declaring.fx文件：content:[Rectangle{...},Circle{centerX:118centerY:110radius:83fill:Color.WHITEstroke:Color.RED}]importjavafx.stage.Stage;importjavafx.scene.Scene;importjavafx.scene.shape.Rectangle;importjavafx.scene.paint.Color;importjavafx.scene.shape.Circle;Stage{title:DeclaringIsEasy!width:249height:251visible:true运行此代码时，将显示以下窗口。图5：完整的应用程序更改代码和运行示例scene:Scene{content:[Rectangle{x:45y:35width:150height:150arcWidth:15arcHeight:15fill:Color.GREEN},Circle{centerX:118centerY:110radius:83fill:Color.WHITEstroke:Color.RED}]}}将圆放在正方形下面。要执行此操作，请使用以下代码切换圆和正方形的顺序：编译并运行此应用程序。矩形现在位于圆的上方。importjavafx.stage.Stage;importjavafx.scene.Scene;importjavafx.scene.shape.Rectangle;importjavafx.scene.paint.Color;importjavafx.scene.shape.Circle;Stage{title:DeclaringIsEasy!width:249height:251visible:truescene:Scene{content:[Circle{centerX:118centerY:110radius:83fill:Color.WHITEstroke:Color.RED},Rectangle{x:45y:35width:150height:150arcWidth:15arcHeight:15fill:Color.GREEN}]}}图6：已切换的对象顺序注意：您可以使用JavaFXScript支持的布局方法来简化对象布局。有关布局方法的更多信息，请参见排放GUI元素。总结正如本课所展示的，声明性语法可简化图形的创建并使代码易于阅读和维护。您在代码中声明的元素的顺序与它们在应用程序中出现的顺序是匹配的。第3333课：在图形场景中显示UIUIUIUI对象本课介绍作为JavaFXScript编程语言基础的节点体系结构和场景图形，并包含有关Scene、Node和Group类的信息。在本课中，您将构建一个图形场景、创建一组节点并对该组应用变换。有关声明性语法的概念的更多信息，请参见使用声明性语法。JavaFXScript编程语言是基于场景图形的。场景图形是一个树状数据结构，可用于在场景中定义图形对象的分层结构。场景图形中的单个元素称作节点。每个节点都有一个父节点，但根节点除外，根节点没有父节点。每个节点是叶节点或分支。叶节点没有子节点。分支节点具有零个或多个子节点。JavaFX节点可处理不同类型的内容，如UI组件、形状、文本、图像和媒体。可以变换节点，也可以对其设置动画。您还可以对节点应用各种效果。在本课中，您将创建一个具有三个节点（圆、文本和图像）的应用程序，如下所示。图1：节点示例JavaFX可以绘制场景中的所有内容。您可以将场景看作用来绘制图形内容的绘图表面。场景是一个用来容纳场景图形节点的容器。在任何JavaFXGUI应用程序中，都需要创建一个场景并向其中添加节点。您可以通过应用效果、变换和动画来修改图形场景。JavaFX运行时负责处理图形场景中的任何更改并在必要时进行重新绘制。javafx.scene.Node类是场景图形节点的基类。所有其他节点类（例如javafx.scene.shape.Circle）可从Node类继承。有关实例变量和函数的完整列表，请参见Node类的API文档。Node类可定义一个局部坐标系，在该坐标系中，X坐标值从左向右递增，Y坐标值从上向下递增。可以通过应用变换（如平移、旋转、缩放和剪切）来更改节点。例如，平移可将节点的坐标系原点沿X或Y轴或这两个轴移动。要定义平移，请设置translateX或translateY变量或这两个变量的值。JavaFX提供对效果（通过javafx.scene.effect和javafx.scene.effect.light软件包提供）的强大支持。在JavaFXGUI简介中，您可以看到一些应用的效果和变换。节点可以接收鼠标和键盘事件。您可以定义在出现此类事件时可以收到通知的函数。有关详细信息，请参见使GUI元素具有交互性。可以将节点组合到一起，将其看作单个实体。如果需要为几个节点提供通用行为，请将它们组合在一起，然后为整个组定义所需的行为。javafx.scene.Group类表示一组节点。现在，创建如图1所示的简单应用程序。此应用程序的图形场景包含三个节点，这三个节点分别显示在下面的单独窗口中。它们是形状对象（圆）、文本和图像。图2：位于单独窗口中的三个节点：圆、文本和图像首先，将这些节点作为单独的节点添加到场景中。然后，将其组合在一起并对整个组应用变换。创建一个扩展名为.fx的文件，例如nodes.fx。在任何时间，您都可以使用以下命令编译您的代码：您可以使用以下命令运行编译的代码：javafxcnodes.fx创建应用程序窗口创建一个标题为Nodes的应用程序窗口，其宽度为220像素，高度为170像素。有关详细信息，请参见使用声明性语法。以下代码可创建此窗口。此代码会生成如下所示的输出。图3：Nodes窗口创建场景使用Scene对象字面值声明一个场景。让此场景具有淡蓝色背景。javafxnodesimportjavafx.stage.Stage;Stage{title:Nodeswidth:220heig