第 2 课：使用声明性语法

 第 2 课：使用声明性语法

您是否熟悉声明性编程？JavaFX Script 使用的就是这种简单而强大的编码样式。本课通过指导您创建一个简单的 GUI 应用程序来展示使用声明性语句是多么容易。有关更多信息，请参阅学习 JavaFX Script 编程语言中的编写脚本、使用对象和编写您自己的类。

 

目录

 

-	添加必要的导入
-	创建应用程序窗口
-	设置场景
-	创建矩形
-	创建圆
-	运行示例
-	更改代码和运行示例

 

正如您在学习 JavaFX Script 编程语言中所了解的那样，JavaFX Script 使用声明性方法进行编程。在创建应用程序的 UI 时，声明很方便，因为在代码中声明的对象的结构反映了场景图形的视觉结构，这样您就能很轻松地理解和维护代码。有关场景图形的更多信息，请参见在图形场景中显示 UI 对象。

为帮助您理解此方法，在本课中，您将按照逐步操作过程创建一个简单的样例 JavaFX Script 应用程序，该应用程序将绘制一个绿色的圆角矩形，并在该矩形上面绘制一个具有红色轮廓线的白色圆。这两个对象都位于标题为 "Declaring Is Easy!!" 的窗口中。运行此应用程序时，将显示以下窗口。

 

图 1：完整的应用程序

 

 

通过执行以下步骤，您将学会如何在构建应用程序时使用声明性语句。

创建一个扩展名为 .fx 的文件，例如 Declaring.fx。避免使用与现有的类、实例变量或保留字的名称匹配的文件名，因为这会在编译过程中导致错误。有关现有的类、变量和保留字的更多信息，请参见 JavaFX Script API 和 学习 JavaFX Script 编程语言。

您可以在任意时间使用以下命令编译您的代码：

javafxc Declaring.fx

 

您可以使用以下命令运行编译的代码：

javafx Declaring

 

添加必要的导入

将导入添加到 .fx 文件中，以确保此应用程序可以访问必要的类。

import javafx.stage.Stage; //required to render a window import javafx.scene.Scene; //required to display a circle and rectangle on a window import javafx.scene.shape.Rectangle; //required to render the rectangle import javafx.scene.paint.Color; //required to fill and stroke the rectangle and circle with color import javafx.scene.shape.Circle; //required to render the circle

 

创建应用程序窗口

为了显示图形，需要创建一个窗口。

创建窗口：

1. 指定 Stage 对象字面值。绘制任何对象都需要使用 Stage。
   
   

   Stage {}

    
   这等效于：
   
   

   Stage { }

    
   
2. 此窗口应该足够大，以便能够将矩形和圆都显示出来。在本示例中，此窗口是一个 249 x 251 像素的矩形。要创建如此大小并且标题为 "Declaring is Easy" 的窗口，请在花括号中使用以下代码声明这些值：
   
   

   Stage { title: "Declaring Is Easy!" width: 249 height: 251 visible: true }

    
   

冒号左边的词 title、width、height 和 visible 称作实例变量，您可以参阅 Stage 文档以获取可用变量的完整列表。title 将 'Declaring Is Easy' 短语放在窗口的顶部边框中。width 和 height 是像素值。有关 JavaFX Script 中对象字面值、类和实例变量的更多信息，请参见语言教程中的编写脚本和使用对象。

当您运行目前已定义的代码时，将会看到以下窗口。

 

图 2：空窗口

 

 

设置场景

在 stage 内，设置用来容纳 Node 对象（如圆或矩形）的 scene。使用以下代码创建 Scene：

Stage { ... scene: Scene { content: [ ] } }

 

此场景是用来放置节点类型的对象的根区域。此场景具有一个用来容纳节点的 content 变量。有许多不同类型的节点，如图形对象、文本和 GUI 组件。有关节点和 Scene 类的更多信息，请参见在图形场景中显示 UI 对象一课和 JavaFX Script API。

当您运行目前已定义的代码时，将会看到以下窗口。

 

图 3：具有场景的窗口

 

 

---

注意：由于白色是场景的默认填充颜色，因此窗口的内容被填充为白色。场景位于窗口之上。

---

创建矩形

要在 content 内声明矩形，请使用以下代码：

content: [ Rectangle { x: 45 y: 35 width: 150 height: 150 arcWidth: 15 arcHeight: 15 fill: Color.GREEN } ]

 

x 和 y 实例变量用来指定矩形的像素位置，arcWidth 和 arcHeight 用来定义角的圆度，fill 变量用来定义填充矩形的颜色。定义窗口的尺寸时，您已经看到了大小变量 width 和 height。

---

注意：在前面的代码样例中，您显式声明了所需的颜色，不过您也可以声明表示此颜色的 Web 代码。要使用代码来指定绿色填充颜色，请声明：

fill: Color.web("#008000")

 

---

结果，此代码在左上角 45,35 位置创建了一个矩形。此矩形的大小是 150 x 150 像素，角圆度为 15，并且使用绿色填充。有关 Rectangle 类的更多信息，请参见 JavaFX Script API。以下图形显示了此步骤中的应用程序窗口。

 

图 4：绿色圆角矩形

 

 

创建圆

使用以下代码在绿色矩形上面声明一个圆并设置其样式：

content: [ Rectangle{ ... }, Circle{ centerX: 118 centerY: 110 radius: 83 fill: Color.WHITE stroke: Color.RED } ]

 

由于矩形是在任何其他对象之前声明的，所以首先绘制该矩形。该矩形将位于后来绘制的任何其他对象后面。

此代码使用 Circle 对象字面值来创建 Circle 类的一个实例。圆具有 5 个用来定义其状态的实例变量，包括窗口上的 X 和 Y 位置、半径、填充和笔画颜色。结果，此代码创建了一个圆，其半径为 83，圆心位于 118,110，且以白色填充，轮廓线为红色。有关 Circle 类的更多信息，请参见 JavaFX Script API。

运行示例

现在，您可以运行整个示例了。以下代码是一个完整的 Declaring.fx 文件：

import javafx.stage.Stage; import javafx.scene.Scene; import javafx.scene.shape.Rectangle; import javafx.scene.paint.Color; import javafx.scene.shape.Circle; Stage { title: "Declaring Is Easy!" width: 249 height: 251 visible: true scene: Scene { content: [ Rectangle { x: 45 y: 35 width: 150 height: 150 arcWidth: 15 arcHeight: 15 fill: Color.GREEN }, Circle { centerX: 118 centerY: 110 radius: 83 fill: Color.WHITE stroke: Color.RED } ] } }

 

运行此代码时，将显示以下窗口。

 

图 5：完整的应用程序

 

 

更改代码和运行示例

将圆放在正方形下面。要执行此操作，请使用以下代码切换圆和正方形的顺序：

import javafx.stage.Stage; import javafx.scene.Scene; import javafx.scene.shape.Rectangle; import javafx.scene.paint.Color; import javafx.scene.shape.Circle; Stage { title: "Declaring Is Easy!" width: 249 height: 251 visible: true scene: Scene { content: [ Circle { centerX: 118 centerY: 110 radius: 83 fill: Color.WHITE stroke: Color.RED }, Rectangle { x: 45 y: 35 width: 150 height: 150 arcWidth: 15 arcHeight: 15 fill: Color.GREEN } ] } }

 

编译并运行此应用程序。矩形现在位于圆的上方。

 

图 6：已切换的对象顺序

 

 

---

注意：您可以使用 JavaFX Script 支持的布局方法来简化对象布局。有关布局方法的更多信息，请参见 排放 GUI 元素。

---

总结

正如本课所展示的，声明性语法可简化图形的创建并使代码易于阅读和维护。您在代码中声明的元素的顺序与它们在应用程序中出现的顺序是匹配的。